《JavaScript高级程序设计》（第3版）读书笔记第6章面向对象的程序设计

时间 2019-11-16

标签 javascript 高级程序设计读书笔记面向对象栏目 JavaScript 繁體版

原文原文链接

面向对象（Object-Oriented, OO）的语言有一个标志，它们都有类的概念，而经过类能够建立任意多个具备相同属性和方法的对象。
ECMAScript中没有类的概念，所以它的对象也与基类的语言中的对象有所不一样
ECMA-262把对象定义为：“无序属性的集合，其属性能够包含基本值、对象或者函数。” 咱们能够把ECMAScript的对象想象成散列表：无非就是一组名值对，其中值能够是数据或者函数
每一个对象都是基于一个引用类型建立的，这个引用类型能够是第5章讨论的原生类型，也能够是开发者定义的类型

理解对象

// 建立对象，赋给属性
var person = new Object();
person.name = "Nicholas";
person.age = 29；
person.job = "Sofware Engineer";

person.sayName = function() {
  alert(this.name);
}

// 字面量方式建立对象
var person = {
  name: "Nicholas",
  age: 29,
  job: "Sofware Engineer",
  sayName: function() {
    alert(this.name);
  }
}

属性类型

ECMAScript中有两种属性：数据属性和访问器属性

数据属性

数据属性包含一个数值的位置。在这个位置能够读取和写入值。数据属性有4个描述其行为的特性javascript
- [[Configurable]] 表示可否经过delete删除属性从而从新定义属性，可否修改属性的特性，或者可否把属性修改成访问器属性。像前述例子中那样直接在对象定义的属性，它们这个特性默认值为true
- [[Enumerable]] 表示可否经过for-in循环返回属性。前述例子这个特性默认为true
- [[Writable]] 表示可否修改属性的值。前述例子这个特性默认为true
- [[Value]] 包含这个属性的数据值。读取属性值得实惠，从这个位置读；写入属性值得实惠，把新值保存在这个位置。这个特性的默认值为undefined
要修改属性默认的特性，必须使用ECMAScript5的Object.defineProperty()方法。java
- 主要接收三个参数：属性所在的对象，属性的名字和一个描述符对象。描述符（descriptor）对象的属性必须是：configurable,enumerable,writalbe和value。
- 设置其中的一或多个值，能够修改对应的特性值
```
var person = {};
// 建立了一个name属性，它的值"Nicholas"是只读的。
Object.defineProperty(person, "name", {
  writable: false,
  value: "Nicholas"
});

console.log(person.name);                // "Nicholas"
// 在非严格模式下，赋值操做会被忽略
// 而在严格模式下，会致使错误
person.name = "Greg";
console.log(person.name);                // "Nicholas"
```
- 把configurable设置为false，表示不能从对象中删除属性。若是对这个属性调用delete，则在非严格模式下什么也不会发生，而在严格模式下会致使错误
- 一旦把属性定义为不可配置的，就不能再把它变回可配置了。此时再调用Object.defineProperty()方法修改除writable以外的特性，都会致使错误
```
var person = {};
Object.defineProperty(person, "name", {
  configurable: false,
  value: "Nicholas"
});

// 抛出错误
Object.defineProperty(person, "name", {
  configurable: true,
  value: "Nicholas"
})
```
- 能够屡次调用Object.defineProperty()方法修改同一个属性，但在把configurable特性设置为false以后就会有限制了。
- 调用Object.defineProperty()若是不指定，configurable,enumerable,writalbe 特性的默认值都是false。多数状况下，没有必要利用Object.defineProperty()方法提供的高级功能。

访问器属性

访问器属性不包含数据值，它们包含一对getter和setter函数（不是必须的）
在读取访问器属性时，会调用getter函数，这个函数负责返回有效的值
写入访问器属性时，会调用setter函数并传入新值，这个函数负责决定如何处理数据
访问器属性有以下4个特性：数组
- [[Configurable]] 表示可否经过delete删除属性从而从新定义属性，可否修改属性的特性，或者可否把属性修改成数据属性。对于直接在对象上定义的属性，这个特性的默认值为true
- [[Enumerable]] 表示可否经过for-in循环返回属性。对于直接在对象上定义的属性，这个特性的默认值为true
- [[Get]] 在读取属性时调用的函数。默认值为undefined
- [[Set]] 在写入属性时调用的函数。默认值为undefined
访问器属性不能直接定义，必须使用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;
console.log(book.edition);   // 2

不必定非要同时制定getter和setter。只指定getter意味着属性时不能写，尝试写入属性会被忽略。在严格模式下尝试写入只指定了getter函数的属性会抛出错误。
只指定setter意味着属性时也不能读，不然在非严格模式下回返回undefined，而在严格模式下会抛出错误
支持ECMAScript 5这个方法的浏览器有IE9+（IE8只是部分实现），Firefox 4+, Safari 5+, Opera 12+, Chrome
在不支持Object.defineProperty()方法的浏览器中不能修改[[Configurable]] 和 [[Enumerable]]

定义多个属性

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 > 2004) {
        this._year = newValue;
        this.editio += newValue - 2004;
      }
    }
  }
})

读取属性的特性

Ojbect.getOwnPropertyDescriptor() 方法，能够取得给定属性的描述符，这个方法接收两个参数：属性所在的对象和要读取属性描述符的属性名称。返回值时一个对象，若是是访问器属性，这个对象的属性有configurable, enumerable, get, set；若是是数据属性，这个对象的属性有configurable, enumerable, writable, value

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 > 2004) {
        this._year = newValue;
        this.editio += newValue - 2004;
      }
    }
  }
});

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

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

建立对象

虽然Object构造函数或对象字面量均可以用来建立单个对象，但这些方式有个明显的缺点：使用同一个接口建立不少对象，会产生大量的重复代码。为解决这个问题，人们开始使用工厂模式的一种变体

工厂模式

考虑到ECMAScript中没法建立类，开发者就发明了一种函数，用函数来封装以特定接口建立对象的细节

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");

虽然工厂模式解决了建立多个类似对象的问题，但却没有解决对象识别的问题（即怎样知道一个对象的类型）。

构造函数模式

可建立自定义的构造函数，从而定义自定义对象类型的属性和方法

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");

构造函数模式对比工厂模式存在如下不一样之处浏览器
- 没有显式的创造对象
- 直接将属性和方法赋给了this对象
- 没有return 语句
- 函数名首字母大写，按照惯例，构造函数都应该以一个大写字母开头，而非构造函数小写
person1 和 person2 分别保存着Person的一个不一样的实例。二者都有一个constructor（构造函数）属性，改属性指向Person

console.log(person1.constructor == Person); // true
console.log(person2.constructor == Person); // true

对象的constructor属性最初是用来标识对象类型的。可是，检测对象类型，仍是instanceof操做符要更可靠。
这个例子中建立的全部对象既是Object的实例，同时也是Person的实例

console.log(person1 instanceof Object);   // true
console.log(person2 instanceof Object);   // true
console.log(person1 instanceof Person);   // true
console.log(person2 instanceof Person);   // true

建立自定义的构造函数意味着未来能够将它的实例标识为一种特定的类型，这正是构造韩式模式赛过工厂模式的地方。这个例子中，person1, person2 之因此同时是Object的实例，是由于全部对象均继承自Object
以这种方式定义的构造是定义在Global对象（浏览器中是window）中的。第8章将详细讨论浏览器对象模型（BOM）

将构造函数看成函数

构造函数与其余函数的惟一区别就在于调用方式不一样。
构造函数也是函数，不存在定义构造函数的特殊语法
任何函数只要经过new操做符来调用，那它就能够做为构造函数
而任何函数不经过new操做符来调用，那它跟普通函数没有区别

// 做为构造函数使用
var person = new Person("Nicholas", 29, "Software Engineer");
person.sayName();   // "Nicholas"

// 做为普通函数调用，此时this指向window对象
Person("Greg", 27, "Doctor");  // 添加到window对象上
window.sayName();       // "Greg"

// 在另外一个对象的做用域中调用
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)");
}

console.log(person1.sayName == person2.sayName);  // false

有this对象在，没有必要在执行代码前就把函数绑定到特定对象上面，经过把函数定义转移到函数外部来简化

function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayName = sayName
}

function sayName () {
  alert(this.name);
}

var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

咱们把sayName函数的定义转移到了函数外部。而在构造函数内部，咱们将sayName属性设置成等于全局的sayName函数。如此一来，因为sayName包含的是一个指向函数的指针，所以person1和person2对象就共享了全局做用域中定义的同一个sayName() 函数。
新的问题出现了，在全局做用域中定义的函数实际上只能被某个对象调用，这让全局做用域有点名存实亡。而更让人没法接受的是：若是对象须要定义不少方法，那么就要定义不少个全局函数，因而咱们这个自定义的引用类型就丝毫没有封装性可言了。
好在能够经过原型模式来解决

原型模式

咱们建立的每一个函数都有一个prototype（原型），这个属性是一个指针，指向一个对象，而这个对象的用途是包含能够由特定类型的全部实例共享的属性和方法。
prototype就是经过调用构造函数而建立的那个对象实例的原型对象，使用原型对象的好处是可让全部对象实例共享它所包含的属性和方法。换言之，没必要再构造函数中定义对象实例的信息，而是能够将这些信息直接添加到原型对象中

function Person() {}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function () {
  alert(this.name);
};

var person1 = new Person();
person1.sayName();    // "Nicholas"

var person2 = new Person();
person2.sayName();    // "Nicholas"

console.log(person1.sayName == person2.sayName);    // true

在此，咱们将sayName()方法和全部属性直接添加到了Person的prototype属性中，构造函数变成了空函数。即便如此，也仍然能够经过调用构造函数来建立新对象，并且新对象还会具备相同的属性和方法。
但与构造函数模式不一样的是，新对象的这些属性和方法时由全部实例共享的。换言之，person1和person2访问的都是同一组属性和方法
要理解原型模式的工做原理，必须先理解ECMAScript中原型对象的性质

理解原型对象

只要建立了一个函数，就会根据一组特定的规则为该函数建立一个prototype属性，这个属性指向函数的原型对象。
默认状况下，全部原型对象都会自动得到一个constructor（构造函数）属性，这个属性是一个指向prototype属性所在函数的指针。例如上述例子，Person.prototype.constructor 指向Person。
咱们能够继续为原型对象添加其余属性和方法
建立了自定义构造函数后，其原型对象默认只会获得constructor属性，至于其余方法，则都是从Object继承而来。当调用构造函数建立一个新的实例后，该实例的内部将包含一个指针（内部属性），指向构造函数的原型对象。ECMAScript 5 中管这个叫[[Prototype]]。
虽然脚本中没有标准的方式访问[[Prototype]],但Firefox, Safari, Chrome 在每一个对象都支持一个属性__proto__;这个属性对脚本则是彻底不可见的。
这个连接存在于实例与构造函数的原型对象之间，而不是存在于实例与构造函数之间
图6-1（148页）展现了Person构造函数、Person的原型属性以及Person现有的两个实例之间的关系。在此，Person.prototype指向了原型对象，而Person.prototype.constructor又指回了Person。原型对象中除了包含constructor属性以外，还包括后来添加的其余属性。Person的每一个实例——person1和person2都包含一个内部属性，该属性仅仅指向了Person.prototype；换言之，person1和person2 与构造函数没有直接的关系。此外，要格外注意的是，虽然这两个实例都不包含属性和方法，但咱们却能够调用person1.sayName()。这是经过查找对象属性的过程来实现的。
虽然在全部实现中都没法访问到[[Prototype]]，但能够经过isPrototypeOf()方法来肯定对象之间是否存在这种关系。

console.log(Person.prototype.isPrototypeOf(person1));     // true
console.log(Person.prototype.isPrototypeOf(person2));     // true

console.log(Person.isPrototypeOf(person1));     // false
console.log(Person.isPrototypeOf(person2));     // false

ECMAScript 5 新增了一个方法，Object.getPrototypeOf()，在全部支持的实现中，这个方法返回[[Prototype]]的值。支持的浏览器 IE9+, Safari 5+, Opera 12+, Chrome

console.log(Object.getPrototypeOf(person1) == Person.prototype); // true
console.log(Object.getPrototypeOf(person1).name);                // "Nicholas"

每当代码读取某个对象的某个属性时，都会执行一次搜索，目标是具备给定名字的属性。搜索从对象实例自己开始，若是没有找到，则继续搜索指针指向的的原型对象，在原型对象中查找具备给定名字的属性。也就是说，在咱们调用person1.sayName()的时候，会先执行两次搜索，在person1中没有找到sayName属性，继续在person1的原型中搜索，在Person.prototype中找到了sayName属性，而后读取那个保存在原型对象中的函数。
原型最初只包含constructor属性，而该属性也是共享的，所以能够经过对象实例访问
虽然能够经过对象实例访问保存在原型中的值，但却不能经过对象实例重写原型中的值。若是咱们在实例中添加了一个属性，而该属性与实例原型中的一个属性同名，那咱们就在实例中建立该属性，该属性将会屏蔽原型中的那个属性
hasOwnProperty()方法（继承于Object）能够检测一个属性是存在于实例中，仍是存在于原型中。

function Person() {}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function () {
  alert(this.name);
};

var person1 = new Person();
var person2 = new Person();

console.log(person1.hasOwnProperty("name"));       // false

person1.name = "Greg";
console.log(person1.name);                         // "Greg" ——来自实例
console.log(person1.hasOwnProperty("name"));       // true

console.log(person2.name);                         // "Nicholas" ——来自原型
console.log(person2.hasOwnProperty("name"));       // false

// 使用delete操做符删除实例中的属性
delete person1.name;
console.log(person1.name);                         // "Nicholas" ——来自实例
console.log(person1.hasOwnProperty("name"));       // false

ECMAScript 5 的 Object.getOwnPropertyDescriptor() 方法只能用于实例属性，要取得原型属性的描述符，必须直接在原型对象上调用Object.getOwnPropertyDescriptor() 方法

原型与in操做符

两种方式使用in操做符，单独使用和在for-in循环中使用。
单独使用in操做符，会在经过对象可以访问给定属性时返回true，不管该属性存在于实例中仍是原型中。

function Person() {}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function () {
  alert(this.name);
};

var person1 = new Person();
var person2 = new Person();

console.log(person1.hasOwnProperty("name"));       // false
console.log("name" in person1);                    // true

person1.name = "Greg";
console.log("name" in person1);                    // true

console.log(person2.name);                         // "Nicholas" ——来自原型
console.log("name" in person2);                    // true

// 使用delete操做符删除实例中的属性
delete person1.name;
console.log("name" in person1);                    // true

同时使用hasOwnProperty() 方法和in操做符，就能够肯定该属性存在于实例中仍是存在运行中

function hasPrototypeProperty(object, name) {
  return !object.hasOwnProperty(name) && (name in object);
}

因为in操做符只要经过可以访问到属性就返回true， hasOwnProperty() 只在属性存在于实例中才返回true，所以只要in操做符返回true，而hasOwnproperty()返回false，就能够肯定属性是原型中的属性。

function Person() {}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function () {
  alert(this.name);
};

var person = new Person();
console.log(hasPrototypeProperty(person, "name"));      // true

person.name = "Greg";
console.log(hasPrototypeProperty(person, "name"));      // false

使用for-in循环，返回的是全部可以经过对象访问的、可枚举的（enumerad）属性，其中既包括存在于实例中的属性，也包括存在于原型中的属性。屏蔽了原型中不可枚举的属性（即将[[Enumerable]]标记为false的属性）实例属性也会在for-in循环返回，由于根据规定，全部开发人员定的属性，都是可枚举的——只有在IE8及更早版本中例外。
IE早期版本的实现中存在一个bug，即屏蔽不可枚举属性的实例属性不会出如今for-in循环中。

var o = {
  toString: function() {
    return  "My Object";
  }
};

for (var prop in o) {
  if (prop ==  "toString") {
    console.log("Found toString");    // 在IE中不会显示
  }
}

在IE中，因为其实现认为原型的toString()方法被打上了值为false的[[Enumerable]]标记，所以应该跳过该属性，结果就不会打印。该bug会影响默认不可枚举的全部属性和方法，包括：hasOwnProperty(), propertyIsEnumerable(), toLocaleString(), valueOf()
ECMAScript 5 也将constructor和prototype属性的[Enumerable]]特性设置为false，但并非全部浏览器都照此实现。
要取得对象上全部可枚举的实例属性，可使用ECMAScript5的Object.keys()方法。这个方法接收一个对象做为参数，返回一个包含全部可枚举属性的字符串数组

function Person() {}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "SoftWare Engineer";
Person.prototype.sayName = function() {
  console.log(this.name);
};

var keys = object.keys(Person.prototype);
console.log(keys);                            // "name,age,job,sayName"

var p1 = new Person();
p1.name = "Rob";
p1.age = 31;
var p1kyes = Object.keys(p1);
console.log(p1kyes);                         // "name,age"

若是你想要获得全部实例属性，不管它是否可枚举，均可以使用Object.getOwnPropertyNames()方法。

var keys = Object.getOwnPropertyNames(Person.prototype);     // "constructor,name,age,job,sayName"

注意结果中包含了不可枚举的constructor属性。Object.keys() 和 Object.getOwnPropertyNames()方法均可以用来替代for-in循环。支持这两个方法的浏览器有IE9+, Firefox4+, Safari5+, Opera12+, Chrome

更简单的原型语法

前面例子中每添加一个属性和方法就要敲一遍 Person.prototype。为减小没必要要的输入，也为了从视觉上更好的封装原型的功能，更常见的作法是用一个包含全部属性和方法的对象字面量来重写整个原型对象

function Person() {}

Person.prototype = {
  name: "Nicholas",
  age: 29,
  job: "Software Engineer",
  sayName: function () {
    console.log(this.name);
  }
};

咱们将Person.prototype设置为等于一个以对象字面量形式建立的新对象。最终结果相同，但有一个例外：constructor属性再也不指向Person了。由于每建立一个函数，就会同时建立它的prototype对象，整个对象也会自动得到constructor属性。而咱们在这里使用的语法，本质上彻底重写了默认的prototype对象，所以constructor属性也就变成了新对象的constructor属性（指向Object构造函数），再也不指向Person函数。此时尽管instanceof操做符还能返回正确的结果，但经过constructor已经没法肯定对象的类型

var friend = new Person();

console.log(friend instanceof Object);                     // true
console.log(friend instanceof Person);                     // true
console.log(friend.constructor == Person);                 // false
console.log(friend.constructor == Object);                 // Object

若是constructor的值真的很重要，能够像下面这样特地将它设置回适当的值。

function Person() {}

Person.prototype = {
  constructor: Person,                          // 让 prototype的constructor从新指向Person
  name: "Nicholas",
  age: 29,
  job: "Software Engineer",
  sayName: function () {
    console.log(this.name);
  }
};

这种方式重设constructor会致使它的[[Enumerable]]特性被设置为true。默认状况下，原生的constructor属性是不可枚举的，所以若是你使用兼容ECMAScript 5 的 JavaScript 引擎，能够试一试 Object.defineProperty()

function Person() {}

Person.prototype = {
  name: "Nicholas",
  age: 29,
  job: "Software Engineer",
  sayName: function () {
    console.log(this.name);
  }
};

// 重设构造函数，只适用于ECMASCript 5 兼容的浏览器
Object.defineProperty(Person.prototype, "constructor", {
  enumerable: false,
  value: Person
});

原型的动态性

因为在原型中查找值的过程是一次搜索，所以咱们对原型对象所作的任何修改都可以当即从实例上反映出来——即便是先建立了实例后修改原型也照样如此

var friend = new Person();

Person.prototype.sayHi = function() {
  console.log("Hi");
};

friend.sayHi();               // "Hi"

尽管能够随时为原型添加属性和方法，而且修改可以当即在全部对象实例中反映出来，但若是是重写整个原型对象，那么状况就不同了。调用构造函数时会为实例添加一个指向最初原型的[[Protoype]]指针，而吧原型修改成另一个对象，就等于切断了构造函数与最初原型之间的联系。请记住：实例中的指针仅指向原型，而不是指向构造函数。

function Person() {}

var friend = new Person();

// 重写整个原型对象，就等于切断了构造函数与最初原型之间的联系
Person.prototype = {
  constructor: Person,
  age: 29,
  job: "Software Engineer",
  sayName: function () {
    console.log(this.name);
  }
};

friend.sayName();  // error

原生对象的原型

原型模式的重要性不只体如今建立自定义类型方面，就连全部原生的引用类型，都是采用这种模式建立的。全部原生引用类型（Object, Array, String, 等)都在其构造函数的原型上定义了方法。例如，在Array.prototype 中能够找到sort()方法，而在String.prototype中能够找到substring()方法修改同一个属性

console.log(typeof Array.prototype.sort);          // "function"
console.log(typeof String.prototype.substring);    // "function"

经过原生对象的原型，不只能够取得全部默认方法的引用，并且也能够定义新方法。能够像修改自定义对象的原型同样修改原生对象的原型，所以能够随时添加方法。下面的代码就给基本包装类型String添加了一个名为startsWith()的方法

String.prototype.startsWith = function (text) {
  return this.indexOf(text) == 0;
};

var msg = "Hello world!";
console.log(msg.startsWith("Hello"));             // true

尽管看起来很方便，但不推荐在产品化的程序修改原生对象的原型。若是某个实现中缺乏某个方法，就在原生对象的原型中添加这个方法，那么当另外一个支持该方法的实现中运行代码时，就可能会致使命名冲突。并且这样作也可能会意外的重写原生方法。

原型对象的问题

原型模式也不是没有缺点。安全

首先，它省略了为构造函数传递初始化参数这一环节，结果全部实例在默认状况下都将取得相同的属性值。虽然这回在某种程度上带来一些不方便，但还不是原型的最大问题
原型模式最大的问题是由其共享的本性锁致使的。原型中全部属性是被不少实例共享的，这种共享对于函数很是适合。对于那些包含基本值的属性倒也说得过去，毕竟经过在实例上添加一个同名属性，能够隐藏原型中的对应属性。
然而，对于包含引用类型值得属性来讲，问题就比较突出了

function Person() {}

Person.prototype = {
  constructor: Person,                          // 让 prototype的constructor从新指向Person
  name: "Nicholas",
  age: 29,
  job: "Software Engineer",
  friend: ["Shelby", "Court"],
  sayName: function () {
    console.log(this.name);
  }
};

var person1 = new Person();
var person2 = new Person();

// 这里修改的其实是Person.prototype.friends
person1.friends.push("Van");

// 不但person1的friends属性被修改，person2也作了一样的改动
console.log(person1.friends);                               // "Shelby,Court,Van"
console.log(person1.friends);                               // "Shelby,Court,Van"
// 由于两个实例的friends属性指向的都是Person.prototype.friends
console.log(person1.friends === person2.friends);           // true

上述问题正是不多有人单独使用原型模式的缘由的所在

组合使用构造函数模式和原型模式

建立自定义类型的最多见方式，就是组合使用构造函数模式与原型模式。构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性。这样每一个实例都会有本身的一份实例属性的副本，但又同时共享着对方法的引用，最大限度的节省了内存。
另外这种混成模式还支持向构造函数传递参数
这种构造函数与原型混成的模式，是目前在ECMAScript 中使用最普遍，认同度最高的一种建立自定义类型的方法。能够说是用来定义引用类型的一种默认模式。

function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
  this.friends = ["Shelby", "Court"];
}

Person.prototype = {
  constructor: Person,
  sayName: function() {
    console.log(this.name);
  }
};

var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

person1.friends.push("Van");
console.log(person1.friends);                               // "Shelby,Court,Van"
console.log(person1.friends);                               // "Shelby,Court"
console.log(person1.friends === person2.friends);           // false
console.log(person1.sayName === person2.sayName);           // true

动态原型模式

动态原型模型把全部信息都封装在了构造函数中，而经过在构造函数中初始化原型（仅在必要的状况下），又保持了同时使用构造函数和原型的优势。换言之，能够经过检查某个应该存在的方法是否有效，来决定是否须要初始化原型

function Person(name, age, job) {
  // 属性
  this.name = name;
  this.age = age;
  this.job = job;
  // 方法
  if (typeof this.sayName != "function") {
    Person.perototype.sayName = function() {
      console.log(this.name);
    };
  }
}

var friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName();                 // "Nicholas"

使用动态原型模型时，不能使用对象字面量重写原型。若是在已经建立了实例的状况下重写原型，那么就会切断现有实例与新原型之间的联系。

寄生构造函数模式

在前述几种模式都不适用的状况下，可使用寄生（parasitic）构造函数模式。建立一个函数，该函数的做用仅仅是封装建立的对象代码，而后再返回新建立的对象；但从表面上看，这个函数又很像是典型的构造函数

function Person(name, age, job) {
  var o = new Object();
  o.name = name;
  o.age = age;
  o.job = job;
  o.sayName = function() {
    console.log(this.name);
  };
  return o
}

var friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName();                 // "Nicholas"

除了使用new操做符并把使用的包装函数叫作构造函数以外，这个模式跟工厂模式实际上是如出一辙的。构造函数再不返回值得状况下，默认会返回新对象实例。而经过一个return语句，能够重写调用构造函数时返回的值。
这个模式能够在特殊状况下用来为对象建立构造函数。假设咱们想建立一个具备额外方法的特殊数组。因为不能直接修改Array构造函数，所以可使用这个模式。

function SpecialArray() {

  // 建立数组
  var values = new Array();

  // 添加值
  values.push.apply(values, arguments);

  // 添加方法
  values.toPipedString = function() {
    return this.join("|");
  };

  // 返回数组
  return values;
}

var colors = new SpecialArray("red", "blue", "green");
console.log(colors.toPipedString());                      // "red|blue|green"

关于寄生构造函数模式，有一点须要说明：首先，返回的对象与构造函数或者与构造函数的原型属性之间没有关系；也就是说，构造函数返回的对象与构造函数外部建立的对象没有什么不一样。为此不能依赖instanceof操做符来肯定对象类型。因为上述问题，咱们建议在可使用其余模式的状况下，不要使用寄生模式

稳妥构造函数模式

道格拉斯·克罗克福德（Douglas Crockford）发明了JavaScript中的稳妥对象（durable objects）这个概念。稳妥对象，指的是没有公共属性并且其方法不引用this的对象。稳妥对象最适合在一些安全的环境中（这些环境中会禁止使用this和new），或者在防止数据被其余应用程序（如Mashup程序）改动时使用。稳妥构造函数遵循与寄生构造函数相似的模式，但有两点不一样：app
- 一是建立对象的实例方法不引用this
- 二是不适用new操做符调用构造函数

function Person(name, age, job) {

  // 建立要返回的对象
  var o = new Object();

  // 这里定义私有变量和函数
  ...

  // 添加方法
  o.sayName = function() {
    console.log(name);
  };

  // 返回对象
  return o;
}

var friend = Person("Nicholas", 29, "Software Engineer");
friend.sayName();   // "Nicholas"

在这种模式建立的对象中，除了使用sayName()方法以外，没有其余办法访问name的值。
与寄生构造函数模式相似，使用稳妥构造函数模式建立的对象与构造函数之间也没有什么关系，所以instanceof操做符对这种对象也没有意义

继承

许多OO语言都支持两种继承方式函数
- 接口继承，只继承方法签名
- 实现继承，继承实际方法
如前所述，在ECMAScript中没法实现接口继承，只支持实现继承，并且其实现继承主要是依靠原型链来实现的。

原型链

原型链 实现继承的主要方法。基本思想是利用原型让一个引用类型继承另外一个引用类型的属性和方法。简单回顾一下构造函数、原型和实例的关系：测试
- 每一个构造函数都有一个原型对象
- 原型对象都包含一个指向构造函数的指针
- 而实例都包含一个指向原型对象的内部指针。
假如咱们让原型对象等于另外一个类型的实例，显然，此时的原型对象将包含一个指向另外一个原型的指针，相应地，另外一个原型中也包含着指向另外一个构造函数的指针。假如另外一个原型又是另外一个类型的实例，那么上述关系依然成立，如此层层递进，就构成了实例与原型的链条。这就是所谓原型链的基本概念
实现原型链有一种基本模式

function SuperType() {
  this.property = true;
}

SuperType.prototype.getSuperValue = function() {
  return this.property;
};

function SubType() {
  this.subproperty = false;
}

// 继承了SuperType
SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function () {
  return this.subproperty;
};

var instance = new SubType();
console.log(instance.getSuperValue());        //true

上述代码中，咱们没有使用SubType默认使用的原型，而是给它换了个新原型，SuperType的实例。因而新原型不只具备做为一个SuperType的实例所拥有的所有属性和方法，并且其内部还有一个指针，指向了SuperType的原型。
最终：this
- instance指向SubType的原型
- SubType的原型又指向SuperType的原型
- getSuperValue() 方法仍然还在SuperType.prototype中，但property则位于SubType.prototype中。这是由于property是一个实例属性，而getSuperValue()则是一个原型方法。 既然 SubType.prototype 如今是SuperType的实例，那么property固然就位于该实例中了。
- 此外，要注意instance.constructor 如今指向的是SuperType，这是由于原来SubType.prototype 中的 constructor被重写了的缘故
经过实现原型链，本质上拓展了原型搜索机制。当读取模式访问一个实例属性时，首先会在实例中搜索该属性。若是没有找到该属性，则会继续搜索实例的原型。在经过原型链实现继承的状况下，搜索过程就得以沿着原型链继续向上。调用instance.getSuperValue()会经历三个搜索步骤spa
1. 搜索实例
2. 搜索SubType.prototype
3. 搜索SuperType.prototype 最终找到方法

别忘记默认的原型

事实上，前述例子的原型链少了一环。全部引用类型默认都继承了Object，而这个继承也是经过原型链实现的。全部函数的默认原型都是Object的实例，由于默认原型都会包含一个内部指针，指向Object.prototype。这也正是全部自定义类型都会继承toString(), valueOf()等默认方法的根本缘由。
SubType继承了SuperType，而 SuperType继承了Object。当调用instance.toString()方法，实际上调用的是保存在Object.prototype中的那个方法

肯定原型和实例的关系

第一种方式，使用instanceof操做符，只要用这个操做符来测试实例与原型链中出现过的构造函数，结果就会返回true。

// 因为原型链，咱们能够是instance是Object，SuperType, SubType中任何一个类型的实例
console.log(instance instanceof Object);         // true
console.log(instance instanceof SuperType);      // true
console.log(instance instanceof SubType);        // true

第二种方式，使用isPrototypeOf()方法。一样，只要是原型链中出现过的原型，均可以说是该原型链所派生的实例的原型。

console.log(Object.prototype.isPrototypeOf(instance));         // true
console.log(SuperType.prototype.isPrototypeOf(instance));      // true
console.log(SubType.prototype.isPrototypeOf(instance));        // true

谨慎的定义方法

子类型有时候须要覆盖超类型中的一个方法，或者须要添加超类型中不存在的某个方法。但无论怎么样，给原型链添加方法的代码必定要放在替换原型的语句以后

function SuperType() {
  this.property = true;
}

SuperType.prototype.getSuperValue = function() {
  return this.property;
};

function SubType() {
  this.subproperty = false;
}

// 继承了SuperType,原来默认的原型被替换
SubType.protoype = new SuperType();

// 添加新方法
SubType.prototype.getSubValue = function () {
  return this.subproperty;
};

// 重写超类型中的方法
SubType.protoype.getSuperValue = function () {
  return false;
};

var instance = new SubType();
console.log(instance.getSuperValue());       // false

还有一点须要提醒读者，即在经过原型链实现继承时，不能使用对象字面量建立原型方法。由于这样就会重写原型链

function SuperType() {
  this.property = true;
}

SuperType.prototype. getSuperValue = function() {
  return this.property;
};

function SubType() {
  this.subproperty = false;
}

// 继承了SuperType
SubType.protype = new SuperType();

// 使用字面量添加新方法，会致使上一行代码无效
// 原型链被切断——SubType 和 SuperType 之间已经没有关系
SubType.prototype = {
  getSubValue: function () {
    return this.subproperty;
  },

  someOtherMethod: function () {
    return false;
  }
};

var instance = new SubType();
console.log(instance.getSuperValue()));    // error

原型链的问题

最主要的问题，来自包含引用类型值的原型。包含引用类型值的原型属性，会被全部实例共享；因此要在构造函数中定义值而不是原型对象。在经过原型来实现继承时，原型实际上会变成另外一个类型的实例。因而，原先的实例属性也就瓜熟蒂落的变成了如今的原型属性了。

function SuperType() {
  this.colors = ["red", "blue", "green"];
}

function SubType() {
}

// SubType 继承了 SuperType 以后
// SubType.prototype 就变成了 SuperType的一个实例
// 所以 SubType.prototype 也拥有了本身的colors属性 等价于建立了一个SubType.prototype.colors
SubType.protype = new SuperType();

var instance1 = new SubType();
instance1.colors.push("black");
console.log(instance1.colors);                // "red,blue,green,black"

// 结果就是全部SubType实例都会共享这个colors属性
var instance2 = new SubType();
console.log(instance2.colors);                // "red,blue,green,black"

原型链的第二个问题：在建立子类型的实力时，不能向超类型的构造函数中传递参数。准确的说是没有办法在不影响全部对象实例的状况下，给超类型的构造函数传递参数。
有鉴于此，实践中不多会单独使用原型链

借用构造函数

在解决原型中包含引用类型值所带来的问题过程当中，开发人员开始使用一种叫作 借用构造函数（constructor stealing） 的技术（有时候也叫伪造对象或经典继承）。
思想至关简单，即在子类型构造函数的内部调用超类型构造函数。函数只不过是在特定环境中执行代码的对象，所以经过使用apply() call()方法也能够在（未来）新建立对象上执行构造函数。其实是在（将来将要）新建立的SubType实例环境下，调用了SuperType构造函数，就会在新 SubType 对象上执行 SuperType() 函数中定义的全部对象初始化代码。结果每一个SubType的实例都会具备本身的colors属性的副本了。

function SuperType() {
  this.colors = ["red", "blue", "green"];
}

function SubType() {
  // 继承了SuperType
  // "借调“了超类型的构造函数
  SuperType.call(this);
}

var instance1 = new SubType();
instance1.colors.push("black");
console.log(instance1.colors);                // "red,blue,green,black"

// SubType实例都不会共享这个colors属性
var instance2 = new SubType();
console.log(instance2.colors);                // "red,blue,green"

传递参数

相对于原型链而言，借用构造函数有一个很大的优点，便可以在子类型构造函数中向超类型构造函数传递参数。
为了确保SuperType 构造函数不会重写子类型的属性，能够在调用超类型构造函数后，再添加应该在子类型中定义的属性。

function SuperType(name) {
  this.name = name;
}

function SubType() {
  // 继承了SuperType 同时传递了参数
  SuperType.call(this. "Nicholas");

  // 实例属性
  this.age = 29;
}

var instance = new SubType();
console.log(instance.anme);             // "Nicholas"
console.log(instance.age);              // 29

借用构造函数的问题

仅仅是借用构造函数，也将没法避免构造函数模式存在的问题——方法都在构造函数中定义，所以函数复用就无从谈起了。
在超类型的原型中定义方法，对子类型而言也是不可见的，结果全部类型都只能使用构造函数模式。
有鉴于此，借用构造函数也是不多单独使用的

组合继承

组合继承（combination inheritance)，有时候也叫做伪经典继承，是将原型链和借用构造函数的技术组合到一块儿，从而发挥两者之长。其背后的思路是使用原型链实现对原型属性和方法的继承，而经过借用构造函数来实现对实例属性的继承。既经过在原型上定义方法实现了函数复用，又能保证每一个实例都有它本身的属性

function SuperType(name) {
  this.name = name;
  this.colors = ["red", "blue", "green"];
}

SuperType.prototype.sayName = function() {
  console.log(this.name);
}

function SubType(name, age) {
  // 继承属性
  SuperType.call(this, name);

  // 子类型本身的属性
  this.age = age
}

// 继承方法
SubType.prototype = new SuperType();
// 若是不指定constructor，SubType.prototype.constructor 为 SuperType
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function() {
  console.log(this.age);
};

var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
console.log(instance1.colors);                 // "red,blue,green,black"
instance1.sayName();                           // "Nicholas"
instance1.sayAge();                            // 29

var instance2 = new SubType("Greg", 27);
console.log(instance2.colors);                 // "red,blue,green"
instance2.sayName();                           // "Greg"
instance2.sayAge();                            // 27

组合继承避免了原型链和借用构造函数的缺陷，融合了它们的优势，成为JavaScript中最经常使用的继承模式。并且instanceof 和 isPrototypeOf() 也可以用于识别基于组合继承建立的对象。

原型式继承

道格拉斯·克罗克福德2006年在文章中介绍了一种实现继承的方法，这种方法并无使用严格意义上的构造函数。他的想法是借助原型能够基于已有对象建立新对象，同时还没必要所以建立自定义类型。为达到这个目的，给出了以下函数

function object(o) {
  function F() {}
  F.prototype = o;
  return new F();
}

在object() 函数内部，先建立了一个临时性的构造函数，而后将传入的对象做为这个构造函数的原型，最后返回了这个临时类型的新实例。从本质上讲，object() 对传入其中的对象执行了一次浅复制

var person = {
  name: "Nicholas",
  friends: ["Shelby", "Court", "Van"],
};

var anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
console.log(anotherPerson.friends);             // "Shelby,Court,Van,Rob"

var yetAnotherPerson = object(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
console.log(yetAnotherPerson.friends);          // "Shelby,Court,Van,Rob,Barbie"

console.log(person.friends);                    // "Shelby,Court,Van,Rob,Barbie"

这种原型式继承，要求你必须有一个对象能够做为另外一个对象的基础。把它传递给object()函数，而后再根据具体需求对获得的对象加以修改便可。这意味着，person.friends不只属于person，并且也会被anotherPerson, yetAnotherPerson共享。实际上就至关于又建立了person对象的两个副本（浅拷贝）。
ECMAScript 5 经过新增Object.create() 方法规范化了原型式继承。这个方法接受两个参数：一个用做新对象原型的对象和（可选）一个新对象定义额外的属性的对象。在传入一个参数的状况下，Object.create() 与 Object()方法的行为相同（原著如此表述，但实际二者并不相同，参照第五章 Object类型的相关补充说明）

var person = {
  name: "Nicholoas",
  friends: ["Shelby", "Court", "Van"]
};

var anotherPerson = Object.create(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
console.log(anotherPerson.friends);             // "Shelby,Court,Van,Rob"

var yetAnotherPerson = Object.object(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
console.log(yetAnotherPerson.friends);          // "Shelby,Court,Van,Rob,Barbie"

console.log(person.friends);                    // "Shelby,Court,Van,Rob,Barbie"

Object.create() 方法的第二个参数与Object.defineProperties() 方法的第二个参数格式相同：每一个属性都是经过本身的描述符定义的。以这种方式制定的任何属性都会覆盖对象上同名的属性。

var person = {
  name: "Nicholoas",
  friends: ["Shelby", "Court", "Van"]
};

var anotherPerson = Object.create(person, {
  name: {
    value: "Greg"
  }
});

console.log(anotherPerson.name);           // "Greg"

支持Object.create()方法的浏览器：IE9+, Firefox4+, Opera12+, Chrome
在没有必要兴师动众的建立构造函数，而只想让一个对象与另外一个对象保持相似的状况下，原型式继承是彻底能够胜任的。但别忘了，包含引用类型值（如上面的friends属性是一个数组）始终都会共享相应的值，就像使用原型模式同样。

寄生式继承

寄生式继承（parasitic）是与原型式继承紧密相关的一种思路，而且一样也是由克罗克福德推而广之的。
思路与构造函数和工厂模式相似，既建立了一个仅用于封装继承过程的函数，该函数在内部以某种方式来加强对象，最后再像真的是它作了全部工做同样返回对象。

function createAnother(original) {
  var clone = object(original);         // 经过调用函数建立一个新对象
  clone.sayHi = function() {            // 以某种方式加强这个对象
    console.log("hi");
  };
  return clone;                         // 返回这个对象
}

寄生组合式继承

组合继承是最经常使用的继承模式；不过最大的问题就是不管什么状况下，都会调用两次超类型构造函数：
- 一次是在建立子类型原型的时候
- 另外一次是在子类型构造函数内部
也就是说，子类型最终会包含超类型对象的所有实例属性，但咱们不得不在调用子类型构造函数时，重写这些属性。

function SuperType(name) {
  this.name = name;
  this.colors = ["red", "blue", "green"];
}

SuperType.prototype.sayName = function() {
  console.log(this.name);
};

function SubType(name, age) {
  SuperType.call(this, name);               // 第二次调用SuperType()

  this.age = age;
}

// 实例化SuperType做为SubType的原型
// 当即触发
SubType.prototype = new SuperType();        // 第一次调用SuperType()
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function() {
  console.log(this.age);
};

// 此时触发第二次调用
var instance = new SubType("Nicholas", 29);

console.log(instance.name);                // "Nicholas"
console.log(SubType.prototype.name);       // undefined

在第一次调用SuperType构造函数时，SubType.prototype会获得两个属性：name和colors；它们都是SuperType的实例属性，只不过如今位于SubType的原型中。当调用SubType构造函数时，又会调用一次 SuperType的构造函数，这一次又在新对象上建立了实例属性name和colors属性。因而这两个属性就屏蔽了原型中的两个同名属性。（图6-6）

有两组name和colors属性，一组在实例instance上，一组在SubType的原型中。这就是调用两次SuperType构造函数的结果
所谓寄生组合式继承，即经过借用构造函数来继承属性，经过原型链的混成形式来继承方法。其背后的思路是：没必要为了指定子类型的原型而调用超类型的构造函数，咱们所须要的无非就是超类型原型的一个副本。本质上，就是使用寄生式继承来继承超类型的原型，而后再将结果指定给子类型的原型

function inheritPrototype(subType, superType) {

  // 建立对象 - 超类型的对象原型的副本
  // 这里没有使用new操做符，因此没有生成SuperType的实例
  // 这里没有调用SuperType构造函数
  var prototype = Object(superType.prototype)
  console.log(prototype == superType.prototype)

  // 加强对象 - 弥补因重写原型而失去的默认constructor属性
  // 而这也将致使supert.prototype.constructor指向了subType
  prototype.constructor = subType;

  // 指定对象 - 将新建立的对象（即副本）赋值给子类型的原型。
  subType.prototype = prototype;
}

function SuperType(name) {
  this.name = name;
  this.colors = ["red", "blue", "green"];
}

SuperType.prototype.sayName = function() {
  console.log(this.name);
};

function SubType(name, age) {
  SuperType.call(this, name);

  this.age = age;
}

inheritPrototype(SubType, SuperType);

SubType.prototype.sayAge = function() {
  console.log(this.age);
};

inheritPrototype() 函数实现了寄生组合式继承的最简单形式。这个函数接受两个参数：子类型构造函数和超类型构造函数。
这样就只调用了一次SuperType构造函数，而且所以便了SubType.prototype 上建立没必要要的、多余的属性。与此同时，原型链还能保持不变；所以，还可以正常使用instanceof 和 isPrototypeOf().
开发人员广泛认为寄生组合式继承是引用类型最理想的继承范式。

《JavaScript高级程序设计》（第3版）读书笔记 第6章 面向对象的程序设计

理解对象

属性类型

数据属性

访问器属性

定义多个属性

读取属性的特性

建立对象

工厂模式

构造函数模式

将构造函数看成函数

构造函数的问题

原型模式

理解原型对象

原型与in操做符

更简单的原型语法

原型的动态性

原生对象的原型

原型对象的问题

组合使用构造函数模式和原型模式

动态原型模式

寄生构造函数模式

稳妥构造函数模式

继承

原型链

别忘记默认的原型

肯定原型和实例的关系

谨慎的定义方法

原型链的问题

借用构造函数

传递参数

借用构造函数的问题

组合继承

原型式继承

寄生式继承

寄生组合式继承

《JavaScript高级程序设计》（第3版）读书笔记第6章面向对象的程序设计