zoukankan      html  css  js  c++  java
  • js Object.defineProperty 使用

    语法

    Object.defineProperty(obj, prop, descriptor)

    参数说明:

    obj:必需。目标对象 
    prop:必需。需定义或修改的属性的名字
    descriptor:必需。目标属性所拥有的特性

    返回值:

    传入函数的对象。即第一个参数obj。

    针对属性,我们可以给这个属性设置一些特性,比如是否只读不可以写;是否可以被for..inObject.keys()遍历。

    示例1:

    <!DOCTYPE html>
    <html lang="zh">
    
        <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <meta http-equiv="X-UA-Compatible" content="ie=edge" />
            <title>Object.defineProperty 示例</title>
        </head>
    
        <body>
    
            <script type="text/javascript">
                var ss = {
                    age: 10
                };
                var name = 'mfg';
                Object.defineProperty(ss, 'name', {
                    //设置是否可以枚举
                    enumerable: false,
                    //是否可以删除目标属性
                    configurable: false,
                    // writable 控制是否可以修改(赋值)
                    //获取属性值  
                    get() {
                        return name;
                    },
                    //设置属性值  
                    set(val) {
                        name = val;
                    }
                })
                console.log(ss.name)
                ss.name = 'new value';
                console.log(ss.name);
            </script>
        </body>
    
    </html>

    示例2:

    <!DOCTYPE html>
    <html lang="zh">
    
        <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <meta http-equiv="X-UA-Compatible" content="ie=edge" />
            <title>Object.defineProperty 示例</title>
        </head>
    
        <body>
    
            <script type="text/javascript">
                Object.defineProperties(Object.prototype, 'allkeys', {
                    value: function() {
                        let result = [];
                        for(let i in this) {
                            result.push(i)
                        }
                        return result;
                    },
                    writable: true,
                    //关键配置,不可枚举,这样就可以在for in中遍历不到了
                    enumerable: false,
                    configurable: true
                });
            </script>
        </body>
    
    </html>

    说明:

    示例2的例子,在Object.prototype上增加了方法,同时保证了不被for in遍历到。

     

  • 相关阅读:
    工具进阶:如何利用 MAT 找到问题发生的根本原因
    性能优化步骤
    搞定内存泄漏
    jvm配置示例
    vue的transition相同元素通过v-if,以及绑定key的区别
    安装nvm之node版本管理器
    在ts中定义变量类型的dva使用方法
    dva的全部用法
    react父子组件传值之二,ref传值(父组件调用子组件的值和方法) useRef+useImperativeHandle(hook)
    react父子组件传值方式一之props方法
  • 原文地址:https://www.cnblogs.com/mengfangui/p/9081419.html
Copyright © 2011-2022 走看看