一、大家都知道,面向对象语言有一个标志,那就是他们都有类的概念,通过类我们可以创建任意多个具有相同属性和方法的对象。但ECMAScript(指定JavaScript标准的机构,也就是说JavaScript是实现其标准的扩展)并没有类的概念,因此他的对象和基于类的语言中的对象有所不同,ECMAScript把对象定义为:"无需属性的集合,其属性可以包含基本值、对象或者函数"。严格的来说,这就相当于说对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字，而每个名字都映射到一个值。正应为这样,我们可以把ECMAScript的对象想象成散列表;无非就是一组键值对,其中值可以是数据或函数。每个对象都是基于一个引用类型创建的。
//JavaScript早期的对象定义方式 var person = new Object(); person.name = "张三"; person.age = 22; person.job = "coder"; person.sayName = function () { alert(this.name); } //几年后,对象字面量成为创建这种对象的首选模式 var person = { name: "Nicholas", age: 22, job: "coder", sayName: function () { alert(this.name); } } person.sayName(); 注意：这里的对象,不像真正的面向对象语言那样,对象真的被创建了,这里对象的概念只是一个数据集合(这个数据集合可以存放任何数据)的引用,这个引用值不会改变,而面向对象的类你每new一次,他的引用值都会改变一次。
二、面向对象的属性类型
在ES5中在定义只有内部采用的特性时,描述了属性(property)的各种特征。ECMA-262定义这些特性是为了实现JavaScript引擎用的,因此在JavaScript中不能直接访问他们,为了表示特性是内部值,ECMA-262规范把它们放在了两对方括号中,例如[[Enumerable]]。
ECMAScript中有两种属性:数据属性和访问器属性。
1、数据属性
数据属性包含一个数据值的位置。在这个位置可以读取和写入值。数据属性有4个描述其行为的特性。
(1)[[Configurable]]：表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性。像上面代码中直接在对象上定义的属性,他们的这个特性默认值为true.
(2)[[Enumerable]]：表示能否通过for-in循环返回属性。像上面代码中直接在对象上定义的属性,他们的这个特性值默认为true。
(3)[[Writable]]：表示能否修改属性的值。像上面代码中直接在对象定义的属性,他们的这个特性默认为true。
(4)[[Value]]：包含这个属性的数据值。读取属性值的时候,从这个位置读;写入属性值的时候.把新值保存在这个位置。这个特性的默认值为undefined。也就是说如果你不给属性的该特性赋值,他的值将会是undefined。
现在有如下代码:
var person={ name:"张三"}；
像上面中直接在对象中定义的属性,他们的[[Configurable]]、[[Enumerable]]、[[Writable]]特性都被设置为true,而[[Value]]被设置为指定的值"张三"；按照上面特性的描述,person对象中的name属性可以通过delete删除重新定义该属性,可以修改该属性的特性,可以把该属性修改为访问器属性。可以通过for-in循环返回属性,可以修改属性的值。
应为ECMA-262规范中提到属性的特性是为了实现JavaScript引擎所用到，所以我们不能通过JavaScript直接访问,但是JavaScript给我们提供了了一个方法,来操作我们需要操作的对象的属性的特性；这个方法是
//这个方法接收三个参数:属性所在的对象引用、属性的名字和一个描述符对象 //其中描述符对象的属性必须是上面提到的四个属性的特性(实现JavaScript引擎所用) //Configurable、Enumerable、Writable、value Object.defineProperty();
下面是这个方法的应用:
var person = {}; Object.defineProperty(person, "name", { writable:false, //writable这个特性决定了当前属性的属性值能否被修改,这边设置为false，也就是不能被修改 value:"张三" }); alert(person.name); person.name = "李四";//所以给name重新赋值并没有效果,如果将writable的值修改为true,这边的赋值就会成功! alert(person.name); 两次输出都是"张三"。
alert(person.name);
var person = {}; Object.defineProperty(person, "name", { configurable: true, //configurable这个特性决定了当前属性能否通过delete删除从而重新定义属性,能否修改属性的特性,能否将属性修改为访问器属性。 //这边设置为true,所以都可以 value:"张三" }); alert(person.name); delete person.name;//所以当这边删除name属性后,person对象就不存在了name属性 alert(person.name);//所以这边输出undefined因为此时person对象没有了name属性
输出:"张三","undefined";
var person = {}; Object.defineProperty(person, "name", { configurable: false, //configurable这个特性决定了当前属性能否通过delete删除从而重新定义属性,能否修改属性的特性,能否将属性修改为访问器属性。 //这边设置为false,所以都不可以 value:"张三" }); alert(person.name); delete person.name;//所以当这边执行删除name属性的动作没有效果 alert(person.name);//所以这边输出还是"张三" 输出:"张三","张三"
var person = {}; Object.defineProperty(person, "name", { configurable: false, //configurable这个特性决定了当前属性能否通过delete删除从而重新定义属性,能否修改属性的特性,能否将属性修改为访问器属性。 //这边设置为false,所以name属性被设置成为无法配置的属性 value:"张三", }); Object.defineProperty(person, "name", { configurable: true, //报错 value:"张三", }); 这边需要注意:当我们把属性定义为不给配置的之后,就不能再把它变回可配置的了。此时如果再调用Object.defineProperty()方法修改出writable之外的特性,都会导致错误。
输出:TypeError: can't redefine non-configurable property "name"
注意:当我们调用Object.defineProperty()方法,在指定了对象和对象的属性却没有指定描述符对象的的configurable、writable、Enumerbale的三个特性时,那么他们的默认值都为false;
综上所述:我们可以通过Object.defineProperty()方法来多次修改同一个属性,但是当我们把属性的configurable特性的值设置成false,就会有所限制了,我们只能修改属性的writable特性的值了；
2、访问器属性
访问器属性和数据属性的区别是:访问器属性不包含数据值,且类似与面向对象里面的类属性,他们都包含一对getter和setter函数,在读取访问器属性时,会调用getter函数,这个函数会返回有效的值，在写入访问器属性时,会调用setter函数并写入新值,这个函数负责决定如何处理数据,这个面向对象中的类属性大致一样!
访问器属性和数据属性一样,有4个特性:
[[Configurable]]：表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为数据属性,对于直接在对象上定义的属性,这个特性的默认值为true;
[[Enumerable]]：表示能否通过for-in循环返回属性。对于直接在对象上定义的属性。这个特性的默认值为true。
[[Get]]：在读取属性时调用的函数,默认值为undefined。
[[Set]]：在写入属性时调用的函数。默认值为undefined。
访问器属性不能直接定义,必须使用Object.definneProperty().请看下面代码:
var book = { _year: 1994, edition: 1 } Object.defineProperty(book, "year", { get: function () { return this._year; }, set: function (newValue) { if (newValue > 1994) { this.edition += newValue - this._year; this._year = newValue; } } }); book.year = 2016; alert(book.edition); 以上代码创建了一个book对象,并给他定义了两个默认的属性:_year和edition。_year前面的下划线十一找那个常用的标记,用于表示只能通过通过对象方法访问的属性。而访问器属性year则包含一个getter函数和setter函数。getter函数返回_year值.这里不一定要同时指定getter和setter。只指定getter意味着属性是不能写,只指定setter意味着只写,无法获取属性值。
注意:支持ECMAScript 5的get,set方法浏览器只有IE9+(IE8部分实现)、FireFox 4+、Safari 5+、Opera 12+和Chrome,在这之前,要创建访问器属性,一般都使用两个非标准方法,_defineGetter_()和_defineSetter_(),如下代码是早期访问器属性的代码版本:
var book = { _year: 1994, edition: 1 } book._defineGetter_("year", function () { return this._year; }); book._defineSetter_("year", function (newValue) { if (newValue > 1994) { this.edition += newValue - this._year; } this._year = newValue; }); book.year = 2016; alert(book.edition);
3、定义多个属性
在开发当中,当我们用到对象的时候,大多数情况下都会用到多个属性,所以ECMAScript 5又定义了一个Object.defineProperties()方法。利用这个方法可以通过描述符一次定义多个属性。
代码如下:
var book = {}; Object.defineProperties(book, { _year: { writable: true, value: 2004 }, edition: { writable: true, value: 1 }, year: { get: function () { return this._year; }, set: function (newValue) { if (newValue > this._year) { this.edition += newValue - this._year; } this._year = newValue; } } }); book.year = 2016; alert(book.edition); 上面定义了两个数据属性(_year和edition)和一个访问器属性(year)。最终的对象和上一段代码定义的对象相同。唯一的区别是这里的属性都是在同一时间创建的！上一段代码中定义的对象,实在定义完数据属性之后又定义了一个访问器属性。
4、读取属性的特性
var book = {}; Object.defineProperties(book, { _year: { writable: true, value: 2004 }, edition: { writable: true, value: 1 }, year: { get: function () { return this._year; }, set: function (newValue) { if (newValue > this._year) { this.edition += newValue - this._year; } this._year = newValue; } } }); var attribute = Object.getOwnPropertyDescriptor(book, "_year"); /*获取数据属性_year对象注意:支持这个方法的浏览器有IE9+,fireFox4,Safari 5+,Opera,Chrome*/ alert(attribute.value); /*输出数据属性_year的Value特性*/ alert(attribute.configurable); /*输出数据属性_year的configurable特性*/ alert(typeof attribute.get); /*输出数据属性的get的特性,但是数据属性被没有Get特性,只有访问器属性才有Get和Set特性,所以这里输出undefined*/ var attribute_two=Object.getOwnPropertyDescriptor(book,"year"); alert(attribute_two.get); //输出访问器属性的get方法,get是指向getter函数的指针 alert(attribute_two.value); //输出访问器属性year的value特性,但是访问器属性并没有value特性,value特性属于数据属性,所以输出undefined alert(attribute_two.enumerable); //因为访问器属性year并不是在对象上直接定义的属性而是通过defineProperties()方法定义的属性,所以他的Enumerable特性为false，所以输出false;