5中的属性描述符详解

2019-09-06 16:00 来源:未知

属性描述符是ES5中新增添的定义,其功能是给指标的性质扩展更加多的决定。

ECMAScript 5中的属性描述符详解,ecmascript详解

品质描述符是ES5中新增加的概念,其效能是给指标的性能扩展更加多的支配。

Object.defineProperty

要斟酌属性描述符,首先要钻探 Object.defineProperty 方法。那些格局的机能是给指标定义新属性或修改已存在的性质。其原型如下:
复制代码 代码如下:
Object.defineProperty(obj, prop, descriptor)

行使示例:
复制代码 代码如下:
var obj = { };
Object.defineProperty(obj, 'attr', { value: 1 });

地点一段代码给obj对象扩大了叁个名字为attr的性质,值为1。也就是:
复制代码 代码如下:
var obj = { };
obj.attr = 1;

相对来说起来,Object.defineProperty 的写法看似特别复杂。不过,它最大的奥妙在于其第八个参数。

数量描述符

假使大家愿意attr是一个只读属性,就足以增多 writable 数据描述符:
复制代码 代码如下:
var obj = { };
Object.defineProperty(obj, 'attr', {
    value: 1,
    writable: false
});
console.log(obj.attr);
obj.attr = 2; // fail
console.log(obj.attr);

实行以上程序能够窥见,两回打印出来的attr的值都以1,也便是说对质量的写入退步。不过,那样的结果会有一点莫明其妙,因为赋值语句的举办未有丰富,却难倒了,试想借使在大片的代码中冒出如此的主题材料,就很难排查出来。事实上,只要以严酷情势运作代码,就能够发出非凡:
复制代码 代码如下:
'use strict'; // 踏入严苛形式
var obj = { };
Object.defineProperty(obj, 'attr', {
    value: 1,
    writable: false
});
obj.attr = 2;  // throw exception

上边再来看看另叁个数据描述符 enumerable ,它能够操纵属性是不是能被枚举。要是只是轻巧地定义叁本特性,那性情子是足以在for...in循环中被枚举出来的:
复制代码 代码如下:
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]); }

施行上边一段代码,会发掘调整台什么也没输出,因为此时attr属性不能够被枚举了。

讲到这里,大家兴许有七个疑问,属性描述符能或不能够被退换?举例说贰个只读属性是还是不是足以重新定义为可写?其实那取决另贰个数量描述符 configurable ,它能够调控属性描述符能还是不能够被转移。
复制代码 代码如下:
var obj = { };
Object.defineProperty(obj, 'attr', {
    value: 1,
    writable: false,
    configurable: true
});
Object.defineProperty(obj, 'attr', {
    writable: true
});
obj.attr = 2;

上边一段代码先把attr定义为只读属性,然后又再次定义为可写。所以对attr的写入是水到渠成的。

存取描述符

存取描述符类似面向对象中的get/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

在地方一段代码中,对attr的拜访事实上成为了对_attr的拜候,况兼在set函数中限制了最小值为0。

收获属性描述符

前面所述都以安装属性描述符,那怎么赢得已设置的叙说符呢?Object.getOwnPropertyDescriptor 能够成功此项工作。
复制代码 代码如下:
var obj = { };
Object.defineProperty(obj, 'attr', {
    value: 1,
    writable: false,
    configurable: true
});
var desc = Object.getOwnPropertyDescriptor(obj, 'attr');
console.dir(desc);

目的说了算

前边说的 Object.defineProperty ,其操作的是指标的习性,而下边说的四个方式则间接操作对象。

Object.preventExtensions 能够使对象不可能具有新的性质:
复制代码 代码如下:
var obj = { };
obj.attr = 1;
Object.preventExtensions(obj);
obj.attr2 = 2; //fail

Object.seal 能够使对象仅剩属性值能够修改(假若属性为只读,则连属性值都力所不比修改):
复制代码 代码如下:
var obj = { };
obj.attr = 1;
Object.seal(obj);
obj.attr = 1.5;
delete obj.attr; // fail

Object.freeze 能够使对象完全不或然被改变:
复制代码 代码如下:
var obj = { };
obj.attr = 1;
Object.freeze(obj);
obj.attr = 1.5; // fail
obj.attr2 = 2; //fail

下一场我们也许又会问,怎么了解有个别对象是还是不是业已被preventExtensions、seal或许freeze呢?答案正是独家调用 Object.isExtensible 、 Object.isSealed 、 Object.isFrozen ,那四个函数的用法相比较轻巧,就不再累赘了。

如上所述,通过质量描述符能够进一步严控对象,抓实程序逻辑的严格性,独一不足的正是,ES5在IE9里面才基本达成(IE9还不扶助严苛情势),思量到境内IE8占有率还相比高的景况,那套东西这段日子不得不在移动端浏览器和Node.js里面用了。

5中的属性描述符详解,ecmascript详解 属性描述符是ES5中新扩大的概念,其遵从是给目的的性格增添越来越多的主宰。 Object.defineProperty 要研...

Object.defineProperty

要研究属性描述符,首先要探究 Object.defineProperty 方法。这么些点子的效用是给指标定义新属性或改造已存在的属性。其原型如下:

复制代码 代码如下:

Object.defineProperty(obj, prop, descriptor)

应用示例:

复制代码 代码如下:

var obj = { };
Object.defineProperty(obj, 'attr', { value: 1 });

地点一段代码给obj对象扩展了贰个名称叫attr的属性,值为1。相当于:

复制代码 代码如下:

var obj = { };
obj.attr = 1;

对照起来,Object.defineProperty 的写法看似越发复杂。不过,它最大的深邃在于其第三个参数。

数据描述符

只要我们盼望attr是二个只读属性,就能够加多 writable 数据描述符:

复制代码 代码如下:

var obj = { };
Object.defineProperty(obj, 'attr', {
    value: 1,
    writable: false
});
console.log(obj.attr);
obj.attr = 2; // fail
console.log(obj.attr);

奉行以上程序能够开掘,一遍打字与印刷出来的attr的值都以1,也等于说对质量的写入失利。不过,那样的结果会有一些莫名其妙,因为赋值语句的进行没有卓殊,却难倒了,试想如若在大片的代码中冒出那样的主题素材,就很难排查出来。事实上,只要以严刻情势运转代码,就能够发生十三分:

复制代码 代码如下:

'use strict'; // 步向严刻形式
var obj = { };
Object.defineProperty(obj, 'attr', {
    value: 1,
    writable: false
});
obj.attr = 2;  // throw exception

上边再来看看另一个数码描述符 enumerable ,它能够决定属性是不是能被枚举。假设只是简短地定义二个性质,那些性格是足以在for...in循环中被枚举出来的:

复制代码 代码如下:

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]); }

施行上边一段代码,会开掘调控台什么也没输出,因为此时attr属性不只怕被枚举了。

讲到这里,大家可能有贰个疑团,属性描述符能不能够被退换?比方说二个只读属性是还是不是能够再度定义为可写?其实那取决另多少个数额描述符 configurable ,它能够调控属性描述符能无法被退换。

复制代码 代码如下:

var obj = { };
Object.defineProperty(obj, 'attr', {
    value: 1,
    writable: false,
    configurable: true
});
Object.defineProperty(obj, 'attr', {
    writable: true
});
obj.attr = 2;

下边一段代码先把attr定义为只读属性,然后又重新定义为可写。所以对attr的写入是马到功成的。

存取描述符

存取描述符类似面向对象中的get/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

在下面一段代码中,对attr的拜访事实上成为了对_attr的访问,何况在set函数中限制了最小值为0。

赢得属性描述符

后边所述都以安装属性描述符,那什么获得已设置的叙说符呢?Object.getOwnPropertyDescriptor 能够产生此项职业。

复制代码 代码如下:

var obj = { };
Object.defineProperty(obj, 'attr', {
    value: 1,
    writable: false,
    configurable: true
});
var desc = Object.getOwnPropertyDescriptor(obj, 'attr');
console.dir(desc);

对象说了算

前边说的 Object.defineProperty ,其操作的是指标的质量,而下边说的四个主意则直接操作对象。

Object.preventExtensions 可以使对象不能兼而有之新的属性:

复制代码 代码如下:

var obj = { };
obj.attr = 1;
Object.preventExtensions(obj);
obj.attr2 = 2; //fail

Object.seal 能够使对象仅剩属性值能够修改(若是属性为只读,则连属性值都没办法儿修改):

复制代码 代码如下:

var obj = { };
obj.attr = 1;
Object.seal(obj);
obj.attr = 1.5;
delete obj.attr; // fail

Object.freeze 能够使对象完全不或者被修改:

复制代码 代码如下:

var obj = { };
obj.attr = 1;
Object.freeze(obj);
obj.attr = 1.5; // fail
obj.attr2 = 2; //fail

然后大家或然又会问,怎么知道有些对象是或不是早就被preventExtensions、seal只怕freeze呢?答案正是分别调用 Object.isExtensible 、 Object.isSealed 、 Object.isFrozen ,那四个函数的用法相比轻松,就不再累赘了。

总的看,通过质量描述符能够尤其严控对象,做实程序逻辑的严峻性,独一不足的正是,ES5在IE9里面才基本落到实处(IE9还不协助严俊情势),思考到国内IE8占有率还比较高的气象,那套东西这两天只得在活动端浏览器和Node.js里面用了。

TAG标签:
版权声明:本文由990888藏宝阁发布于网络应用,转载请注明出处:5中的属性描述符详解