美文网首页
理解Javascript中的数据属性和访问属性

理解Javascript中的数据属性和访问属性

作者: gsonliu | 来源:发表于2016-04-19 07:09 被阅读780次

    理解对象

    ECMAScript中有两种属性:数据属性和访问器属性

    数据属性

    示例1:

    Nodejs 中

        console.log(global.undefined);//undefined
        global.undefined = 1;
        console.log(global.undefined);//undefined
    

    浏览器中

        console.log(window.undefined);//undefined
        window.undefined = 2;
        console.log(global.undefined);//undefined
    

    在js中一切皆对象,我们都知道全局属性undefined的值为undefined.那么属性就应该是可以修改,上边对全局属性undefined进行修改却没有修改成功,这是为什么呢?

    示例2:

    Nodejs 中

        var des = Object.getOwnPropertyDescriptor(global,'undefined');
        console.log(des);
    

    输出

        {
          value: undefined,
          writable: false,
          enumerable: false,
          configurable: false
        }
    

    在浏览器中输出也应该一样.上面可以看到有四个属性,这就是javascript中的属性特性,它能设置属性的值,可编辑,可删除,可迭代特性。

    • Configurable

    表示能够通过delete删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性。默认值true。表示能否删除,如果是false,delete不起作用。在严格模式下报异常

    • Enumerable

    表示能否通过for-in 循环返回属性。默认值true。false不可迭代

    • Writable

    表示能否修改属性的值,默认是true。false不可修改

    • Value

    包含这个属性的数据值,读取属性值的时候,从这个位置读;写入属性的时候把新值保存在这个位置,默认是undefined

    要修改属性默认的特性,必须用ECMAScript5的Object.defineProperty(),接受三个参数,属性所在对象,属性名称,一个描述符对象。

    示例3:

        var obj = {};
        Object.defineProperty(obj,'name',{
                'value' : 'name',
                'writable' : false
        });
        console.log(obj.name);//name
        obj.name = 'newname';
        console.log(obj.name);//name
    

    访问器属性

    示例4:

        var book = {
            _year: 2004,
            edition: 1
        };
        Object.defineProperty(book, "year", {
            get: function () {
                return this._year;
            },
            set: function (newValue) {
                if (newValue > 2004) {
                    this._year = newValue;
                    this.edition += newValue - 2004;
                }
            }
        });
        book.year = 2005;
        console.log(book.edition);//2
    

    访问器属性不包含数据值,它们包含一对getter和setter函数,(不过这两个函数都不是必须的),默认都是undefined.一般情况不用去定义setter和getter方法.找了很久也不知道在哪种场景适合用。上面这一种就是给一个属性赋值,导致另外一个属性变化,其实在代码中直接实现就可以.

    上面代码需要注意的地方是,year用_year代替.前面加下划线是常用的用法,表示只能用对象方法访问的属性.如果用year回导致死循环赋值.

    其他

    另外还有 Object.definePropties可以批量为属性设置特性

    相关文章

      网友评论

          本文标题:理解Javascript中的数据属性和访问属性

          本文链接:https://www.haomeiwen.com/subject/iswalttx.html