js高级程序设计（红宝书）学习笔记六

面向对象

对象：无序属性的集合，其属性可以包含基本值、对象或者函数。下面两种声明对象的方式均可：

var person = new Object(); 
person.name = "Nicholas"; 
person.age = 29; 
person.job = "Software Engineer"; 
person.sayName = function(){ 
     alert(this.name); 
}; 

var person = { 
 name: "Nicholas", 
 age: 29, 
 job: "Software Engineer", 
 sayName: function(){ 
 alert(this.name); 
 } 
}; 

属性类型

属性类型在实际的开发工作中经常被忽略，因为用到的几率比较小，所以常常会被遗忘。
ECMAScript 中有两种属性：数据属性和访问器属性，ECMA-262 第 5 版在定义只有内部才用的特性（attribute）时，描述了属性（property）的各种特征。ECMA-262 定义这些特性是为了实现 JavaScript 引擎用的，因此在 JavaScript 中不能直接访问它们。为了表示特性是内部值，该规范把它们放在了两对儿方括号中，例如[[Enumerable]]。

1. 数据属性

[[Configurable]]： 表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性，像前面例子中那样直接在对象上定义的属性，它们的这个特性默认值为 true。
[[Enumerable]]: 表示能否通过 for-in 循环返回属性。像前面例子中那样直接在对象上定义的属性，它们的这个特性默认值为 true。
[[[Writable]]]: 表示能否修改属性的值。像前面例子中那样直接在对象上定义的属性，它们这个特性默认值为 true。
[[[Value]]]: 包含这个属性的数据值。读取属性值的时候，从这个位置读；写入属性值的时候，把新值保存在这个位置。这个特性的默认值为 undefined

对于像前面例子中那样直接在对象上定义的属性，它们的[[Configurable]]、[[Enumerable]]和[[Writable]]特性都被设置为 true，而[[Value]]特性被设置为指定的值。例如：

var person = { 
 name: "Nicholas" 
}; 

这里创建了一个名为 name 的属性，为它指定的值是”Nicholas”。也就是说，[[Value]]特性将被设置为”Nicholas”，而对这个值的任何修改都将反映在这个位置。

要修改属性默认的特性，必须使用 ECMAScript 5 的 Object.defineProperty()方法，这个方法接收三个参数：属性所在的对象、属性的名字和一个描述符对象。其中，描述符（descriptor）对象的属性必须是：configurable、enumerable、writable 和 value。设置其中的一或多个值，可以修改对应的特性值。例如：

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

2. 访问器属性

访问器属性不包含数据值；它们包含一对儿 getter 和 setter 函数（不过，这两个函数都不是必需的）。在读取访问器属性时，会调用 getter 函数，这个函数负责返回有效的值；在写入访问器属性时，会调用setter 函数并传入新值，这个函数负责决定如何处理数据。
访问器属性不能直接定义，必须使用 Object.defineProperty()来定义。请看下面的例子。

var book = { 
     _year: 2004, 
     edition: 1 
}; 
Object.defineProperty(book, "year", { 
     get: function(){ 
         return this._year; 
     }, 
     set: function(newValue){ 
         if (newValue > 2004) { 
             this._year = newValue; 
             this.edition += newValue - 2004; 
         } 
     } 
}); 
book.year = 2005; // 会调用属性 year 的 set 方法
alert(book.edition); //2 

以上代码创建了一个 book 对象，并给它定义两个默认的属性：_year 和 edition。_year 前面的下划线是一种常用的记号，用于表示只能通过对象方法访问的属性。而访问器属性 year 则包含一个getter 函数和一个 setter 函数。getter 函数返回_year 的值，setter 函数通过计算来确定正确的版本。因此，把 year 属性修改为 2005 会导致_year 变成 2005，而 edition 变为 2。这是使用访问器属性的常见方式，即设置一个属性的值会导致其他属性发生变化。

读取属性特性

使用 ECMAScript 5 的 Object.getOwnPropertyDescriptor()方法，可以取得给定属性的描述符。这个方法接收两个参数：属性所在的对象和要读取其描述符的属性名称。返回值是一个对象，如果是访问器属性，这个对象的属性有 configurable、enumerable、get 和 set；如果是数据属性，这个对象的属性有 configurable、enumerable、writable 和 value。例如：

var book = {}; 
Object.defineProperties(book, { 
     _year: { // 数据属性
         value: 2004 
     }, 
     edition: { // 数据属性
         value: 1 
     }, 
     year: { // 访问器属性
         get: function(){ 
             return this._year; 
         }, 
         set: function(newValue){ 
             if (newValue > 2004) { 
                 this._year = newValue; 
                 this.edition += newValue - 2004; 
             } 
         } 
     } 
}); 


var descriptor = Object.getOwnPropertyDescriptor(book, "_year"); 
alert(descriptor.value); //2004 
alert(descriptor.configurable); //false 
alert(typeof descriptor.get); //"undefined" 


var descriptor = Object.getOwnPropertyDescriptor(book, "year"); 
alert(descriptor.value); //undefined 
alert(descriptor.enumerable); //false 
alert(typeof descriptor.get); //"function"

创建对象

使用Object构造函数和对象的字面量都可以创建单个对象，但是根据业务的需要和不同的场景，js对创建对象的模式又分为很多种，下面我们分别来学习。

1. 工厂模式

工厂模式的产生就是为了解决使用同一接口创建对象会产生大量重复代码的问题，工厂模式把创建对象的具体过程抽象了出来，如下面的例子：

function createPerson(name, age, job){ 
     var o = new Object(); 
     o.name = name; 
     o.age = age; 
     o.job = job; 
     o.sayName = function(){ 
         alert(this.name); 
     }; 
     return o; 
} 
var person1 = createPerson("Nicholas", 29, "Software Engineer"); 
var person2 = createPerson("Greg", 27, "Doctor"); 

这种工厂模式的创建方法虽然能解决创建对象的时候很多冗余代码，但是无法确定对象的类型，为了解决这一问题，出现了下面你这一种模式。

2. 构造函数模式

用构造函数的模式将上面的例子重写：

function Person(name, age, job){ 
     this.name = name; 
     this.age = age; 
     this.job = job; 
     this.sayName = function(){ 
         alert(this.name); 
     }; 
} 
var person1 = new Person("Nicholas", 29, "Software Engineer"); 
var person2 = new Person("Greg", 27, "Doctor"); 

如上所示，要创建Person实例，必须使用new操作符，以这种方式调用构造函数实际上会经历以下 4个步骤：
(1) 创建一个新对象；
(2) 将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象）；
(3) 执行构造函数中的代码（为这个新对象添加属性）；
(4) 返回新对象。

在前面例子的最后，person1 和 person2 分别保存着 Person 的一个不同的实例。这两个对象都有一个 constructor（构造函数）属性，该属性指向 Person，如下所示:

alert(person1.constructor == Person); //true 
alert(person2.constructor == Person); //true

将构造函数当作函数

构造函数和普通函数唯一的区别就是调用方式的不同。任何函数，只要通过new操作符来调用，那它就可以作为构造函数，而任何函数，如果不通过 new 操作符来调用，那它跟普通函数也不会有什么两样。例如，前面例子中定义的 Person()函数可以通过下列任何一种方式来调用：

// 当作构造函数使用
var person = new Person("Nicholas", 29, "Software Engineer"); 
person.sayName(); //"Nicholas" 
// 作为普通函数调用,当在全局作用域中调用一个函数时，
//this 对象总是指向 Global 对象（在浏览器中就是 window 对象）
Person("Greg", 27, "Doctor"); // 添加到 window 
window.sayName(); //"Greg" 
alert(job); //"Doctor" 
// 在另一个对象的作用域中调用
var o = new Object(); 
Person.call(o, "Kristen", 25, "Nurse"); 
o.sayName(); //"Kristen" 

使用构造函数的主要问题，就是每个方法都要在每个实例上重新创建一遍。在前面的例子中，person1 和 person2 都有一个名为 sayName()的方法，但那两个方法不是同一个 Function 的实例。不要忘了——ECMAScript 中的函数是对象，因此每定义一个函数，也就是实例化了一个对象。从逻辑角度讲，此时的构造函数也可以这样定义：

function Person(name, age, job){ 
     this.name = name; 
     this.age = age; 
     this.job = job; 
     this.sayName = new Function("alert(this.name)"); // 与声明函数在逻辑上是等价的
} 

从这个角度上来看构造函数，更容易明白每个 Person 实例都包含一个不同的 Function 实例（以显示 name 属性）的本质。说明白些，以这种方式创建函数，会导致不同的作用域链和标识符解析，但创建 Function 新实例的机制仍然是相同的。因此，不同实例上的同名函数是不相等的。

注:博客中所引用的例子或者语句有的来自书中原文（JavaScript高级程序设计 第3版），在此做补充说明。