菜单

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

2019年8月31日 - JavaScript

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里面用了。

http://www.bkjia.com/Javascript/963149.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/963149.htmlTechArticleECMAScript 5中的属性描述符详解,ecmascript详解
属性描述符是ES5中新添的概念,其功用是给指标的脾气扩展越来越多的调节。
Object.defineProperty 要研…

本性描述符是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里面用了。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图