亚洲免费乱码视频,日韩 欧美 国产 动漫 一区,97在线观看免费视频播国产,中文字幕亚洲图片

      1. <legend id="ppnor"></legend>

      2. 
        
        <sup id="ppnor"><input id="ppnor"></input></sup>
        <s id="ppnor"></s>

        ECMAScript 5中的屬性描述符詳解

        字號(hào):


            這篇文章主要介紹了ECMAScript 5中的屬性描述符詳解,本文講解了Object.defineProperty、數(shù)據(jù)描述符、存取描述符、獲取屬性描述符、對(duì)象控制等內(nèi)容,需要的朋友可以參考下
            屬性描述符是ES5中新增的概念,其作用是給對(duì)象的屬性增加更多的控制。
            Object.defineProperty
            要研究屬性描述符,首先要談?wù)?Object.defineProperty 方法。這個(gè)方法的作用是給對(duì)象定義新屬性或修改已存在的屬性。其原型如下:
            代碼如下:
            Object.defineProperty(obj, prop, descriptor)
            使用示例:
            代碼如下:
            var obj = { };
            Object.defineProperty(obj, 'attr', { value: 1 });
            上面一段代碼給obj對(duì)象增加了一個(gè)名為attr的屬性,值為1。相當(dāng)于:
            代碼如下:
            var obj = { };
            obj.attr = 1;
            相比起來,Object.defineProperty 的寫法看似更為復(fù)雜。但是,它最大的奧秘在于其第三個(gè)參數(shù)。
            數(shù)據(jù)描述符
            假設(shè)我們希望attr是一個(gè)只讀屬性,就可以加上 writable 數(shù)據(jù)描述符:
            代碼如下:
            var obj = { };
            Object.defineProperty(obj, 'attr', {
            value: 1,
            writable: false
            });
            console.log(obj.attr);
            obj.attr = 2; // fail
            console.log(obj.attr);
            執(zhí)行以上程序可以發(fā)現(xiàn),兩次打印出來的attr的值都是1,也就是說對(duì)屬性的寫入失敗。然而,這樣的結(jié)果會(huì)有點(diǎn)莫名其妙,因?yàn)橘x值語句的執(zhí)行沒有異常,卻失敗了,試想如果在大片的代碼中出現(xiàn)這樣的問題,就很難排查出來。事實(shí)上,只要以嚴(yán)格模式運(yùn)行代碼,就會(huì)產(chǎn)生異常:
            復(fù)制代碼 代碼如下:
            'use strict'; // 進(jìn)入嚴(yán)格模式
            var obj = { };
            Object.defineProperty(obj, 'attr', {
            value: 1,
            writable: false
            });
            obj.attr = 2; // throw exception
            下面再來看看另一個(gè)數(shù)據(jù)描述符 enumerable ,它可以控制屬性是否能被枚舉。如果只是簡(jiǎn)單地定義一個(gè)屬性,這個(gè)屬性是可以在for...in循環(huán)中被枚舉出來的:
            代碼如下:
            var obj = { };
            obj.attr = 1;
            for (var i in obj) { console.log(obj[i]); }
            enumerable 可以將其“藏”起來:
            var obj = { };
            Object.defineProperty(obj, 'attr', {
            value: 1,
            enumerable: false
            });
            for (var i in obj) { console.log(obj[i]); }
            執(zhí)行上面一段代碼,會(huì)發(fā)現(xiàn)控制臺(tái)什么也沒輸出,因?yàn)榇藭r(shí)attr屬性無法被枚舉了。
            講到這里,大家可能有一個(gè)疑問,屬性描述符能否被修改?比方說一個(gè)只讀屬性是否可以再次定義為可寫?其實(shí)這取決于另一個(gè)數(shù)據(jù)描述符 configurable ,它可以控制屬性描述符能否被更改。
            代碼如下:
            var obj = { };
            Object.defineProperty(obj, 'attr', {
            value: 1,
            writable: false,
            configurable: true
            });
            Object.defineProperty(obj, 'attr', {
            writable: true
            });
            obj.attr = 2;
            上面一段代碼先把a(bǔ)ttr定義為只讀屬性,然后又重新定義為可寫。所以對(duì)attr的寫入是成功的。
            存取描述符
            存取描述符類似面向?qū)ο笾械膅et/set訪問器。
            代碼如下:
            var obj = { };
            Object.defineProperty(obj, 'attr', {
            set: function(val) { this._attr = Math.max(0, val); },
            get: function() { return this._attr; }
            });
            obj.attr = -1;
            console.log(obj.attr); // 0
            在上面一段代碼中,對(duì)attr的訪問事實(shí)上變成了對(duì)_attr的訪問,而且在set函數(shù)中限制了最小值為0。
            獲取屬性描述符
            前面所述都是設(shè)置屬性描述符,那如何獲取已設(shè)置的描述符呢?Object.getOwnPropertyDescriptor 可以完成此項(xiàng)工作。
            代碼如下:
            var obj = { };
            Object.defineProperty(obj, 'attr', {
            value: 1,
            writable: false,
            configurable: true
            });
            var desc = Object.getOwnPropertyDescriptor(obj, 'attr');
            console.dir(desc);
            對(duì)象控制
            前面說的 Object.defineProperty ,其操作的是對(duì)象的屬性,而下面說的三個(gè)方法則直接操作對(duì)象。
            Object.preventExtensions 可以使對(duì)象無法擁有新的屬性:
            代碼如下:
            var obj = { };
            obj.attr = 1;
            Object.preventExtensions(obj);
            obj.attr2 = 2; //fail
            Object.seal 可以使對(duì)象僅剩屬性值可以修改(如果屬性為只讀,則連屬性值都無法修改):
            代碼如下:
            var obj = { };
            obj.attr = 1;
            Object.seal(obj);
            obj.attr = 1.5;
            delete obj.attr; // fail
            Object.freeze 可以使對(duì)象完全無法被修改:
            代碼如下:
            var obj = { };
            obj.attr = 1;
            Object.freeze(obj);
            obj.attr = 1.5; // fail
            obj.attr2 = 2; //fail
            然后大家可能又會(huì)問,怎么知道某個(gè)對(duì)象是否曾經(jīng)被preventExtensions、seal或者freeze呢?答案就是分別調(diào)用 Object.isExtensible 、 Object.isSealed 、 Object.isFrozen ,這三個(gè)函數(shù)的用法比較簡(jiǎn)單,就不再累贅了。
            總的來說,通過屬性描述符可以進(jìn)一步嚴(yán)格控制對(duì)象,加強(qiáng)程序邏輯的嚴(yán)謹(jǐn)性,唯一不足的就是,ES5在IE9里面才基本實(shí)現(xiàn)(IE9還不支持嚴(yán)格模式),考慮到國(guó)內(nèi)IE8份額還比較高的情況,這套東西目前只能在移動(dòng)端瀏覽器和Node.js里面用了。