理解Javascript的动态语言特性(3)

alert(person.name); // longen Object.defineProperty(person, "name", { writable: false, value: "tugenhua" }); alert(person.name); // tugenhua person.name = "Greg"; alert(person.name); // tugenhua

如上代码,我们writable设置为false的时候,当我们进行修改name属性的时候,是修改不了的,但是如果我把writable设置为true或者直接删掉这行代码的时候,是可以修改person中name的值的。如下代码:

Object.defineProperty(person, "name", { writable: false, value: "tugenhua" }); alert(person.name); // tugenhua person.name = "Greg"; alert(person.name); // Greg

理解configurable属性

继续如上JS代码如下:

var person = { name: 'longen' }; alert(person.name); // longen Object.defineProperty(person, "name", { configurable: false, value: "tugenhua" }); alert(person.name); // tugenhua delete person.name; alert(person.name); // tugenhua

当把configurable设置为false的时候,表示是不能通过delete删除name这个属性值的,所以上面的最后一个弹窗还会打印出tugenhua这个字符串的;

但是如果我把configurable设置为true或者直接不写这个属性的话,那么最后一个person.name弹窗会是undefined,如下代码:

var person = { name: 'longen' }; alert(person.name); // longen Object.defineProperty(person, "name", { value: "tugenhua" }); alert(person.name); // tugenhua delete person.name; alert(person.name); // undefined

理解enumerable属性

Enumerable属性表示能否通过for-in循环中返回数据,默认为true是可以的,如下代码:

var person = { name: 'longen' }; Object.defineProperty(person, "name", { enumerable: true, value: "tugenhua" }); alert(person.name); // tugenhua for(var i in person) { alert(person[i]); // 可以弹出框 }

如上是把enumerable属性设置为true,但是如果把它设置为fasle的时候,for-in循环内的数据就不会返回数据了,如下代码:

var person = { name: 'longen' }; Object.defineProperty(person, "name", { enumerable: false, value: "tugenhua" }); alert(person.name); // tugenhua for(var i in person) { alert(person[i]); // 不会弹出 }

2. 访问器属性

访问器属性有getter和setter函数,在读取访问器属性时,会调用getter函数,这个函数负责返回有效的值,在写入访问器属性时,会调用setter函数并传入新值,这个函数负责如何处理数据,访问器属性也有以下4个特性:
configurable:表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性。这个特性值默认为true。
enumerable:表示能否通过 for-in 循环返回属性。这个特性值默认为true。

get:在读取属性时调用的函数,默认值为undefined。
set:在写入属性时调用的函数,默认值为undefined。

如下代码:

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

首先我们先定义一个book对象,有2个属性_year和edit,并初始化值,给book对象再新增值year为2005,而访问器属性year则包含一个getter函数和一个setter函数,因此先会调用set函数,把2005传给newValue,之后this._year就等于2005,this.edit就等于2了;

目前支持Object.defineProperty方法的浏览器有IE9+,Firefox4+,safari5+,chrome和Opera12+;

理解定义多个属性

ECMAScript5定义了一个Object.defineProperties()方法,这个方法可以一次性定义多个属性,该方法接收2个参数,第一个参数是添加或者修改该属性的对象,第二个参数是一个对象,该对象的属性与第一个参数的对象需要添加或者删除的属性一一对应;

如下代码:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgdxzg.html