JavaScript 中原型链详解

JavaScript 中原型链是一个非常重要的知识。先来看一段代码：

function Person(name, age){
  this.name = name
  this.age = age
}
Person.prototype.sayName = function() {
  console.log(this.name)
}
var person1 = new Person('刘德华', 18)
console.log(person1.__proto__)
console.log(Person.prototype)
console.log(person1.__proto__ == Person.prototype);//true
person1.sayName()//刘德华

顺便再来看一张图：（我认为先看看图可以对加深文字描述的理解）

第一次看到的时候我很懵，prototype是什么？__proto__又是什么？我好像都没定义呀！其实这都是JavaScript原型链组成的重要部分。下面我们原型链进行一步一步的解析。

1 构造函数原型 prototype

构造函数方法很好用，但是存在浪费内存的问题。

function Person() {
    this.name = name
    this.sayName = function() {
        console.log(this.name)
    }
}
var person1 = new Person('刘德华')
var person2 = new Person('张学友')
person1.sayName()
person2.sayName()

如上例代码中两个不同的对象 person1 和 person2 调用sayName()方法，指向的是不同的地址：

因此，我们可以把像 sayName 这样的公共方法定义在构造函数的原型对象prototype上，构造函数通过原型 prototype 分配的函数是所有对象所共享的。

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

• 什么是构造函数的原型？

  JavaScript规定，每一个构造函数都有一个prototype属性，prototype就是一个对象，我们也称为原型对象，这个对象的所有属性和方法，都会被构造函数所拥有。

• 原型的作用是什么？

  共享方法。

2 对象原型__proto__

在 JavaScript 中，对象都会有一个属性__proto__指向构造函数的 prototype 原型对象；

在上面我们已经知道对象可以访问构造函数原型对象prototype的方法sayName，其实，之所以我们对象可以使用构造函数prototype原型对象的属性和方法，就是因为对象有__proto__原型的存在。

• 对象原型__proto__和构造函数原型对象prototype是等价的；

console.log(person1.__proto__ === Person.prototype);//true

• __proto__对象原型的意义就在于为对象的查找机制提供一个方向，或者说一条路线，但是它是一个非标准属性，因此实际开发中，不可以使用这个属性，它只是内部指向原型对象 prototype；

• 方法的查找规则：

  • 方法的查找规则: 首先先看 person1对象身上是否有 sayName 方法,如果有就执行这个对象上的 sayName ；

  • 如果没有 sayName 这个方法,因为有__proto__ 的存在，就去构造函数原型对象 prototype 身上去查找 sayName 这个方法

  • 对对象实例添加一个属性后，这个属性屏蔽了原型对象中保存的同名属性。即使将实例属性设置为null，也只会在实例中设置这个属性，而不会恢复其指向原型的连接。不过，使用delete操作符则可以完全删除实例属性，从而让哦我们能够重新访问原型中的属性。

3 constructor

对象原型（ __proto__）和构造函数（prototype）原型对象里面都有一个属性 constructor 属性 ，constructor 我们称为构造函数，因为它指回构造函数本身。

constructor 主要用于记录该对象引用于哪个构造函数，它可以让原型对象重新指向原来的构造函数。我们来看一个例子：

一般情况下，对象的方法都在构造函数的原型对象中设置。我们可以通过下面的方式给原型对象prototype设置方法：

Person.prototype.say = function(){
	console.log("我会说话");
}
Person.prototype.eat = function(){
	console.log("我会吃饭");
}

这时候就会有人想到了，如果像这样有多个对象的方法，我们可以给原型对象采取对象形式赋值的方式来设置方法：

Person.prototype = {
    say: function() {
        console.log('我会说话')
    },
    eat: function() {
        console.log('我会吃饭')
    }
}

但是这样就会覆盖构造函数原型对象 prototype 原来的内容，这样修改后的原型对象中的 constructor 就不再指向当前构造函数了。此时，我们可以在修改后的原型对象中，添加一个 constructor 指向原来的构造函数。Look：

Person.prototype = {
	constructor: Person,//添加一个 constructor 指向原来的构造函数
	say: function(){
		console.log("我会说话");
	},
	eat: function(){
		console.log("我会吃饭");
	}
}

4 JavaScript 的成员查找机制（规则）

1. 当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性。

2. 如果没有就查找它的原型（也就是 __proto__指向的 prototype 原型对象）。

3. 如果还没有就查找原型对象的原型（Object的原型对象）。

4. 依此类推一直找到 Object 为止（null）。

5. __proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线。

function Person(name, age) {
	this.uname = uname;
	this.age = age;
}
Person.prototype.sing = function() {
	console.log('我会唱歌');
}
Person.prototype.sex = '女';

var person1 = new Person('刘德华', 18);
person1.sex = '男';
console.log(person1.sex);//男

像上栗，虽然你 prototype 定义了性别sex是女，但我刘德华说了我是男的，所以打印的还是男的。

5 原型对象中的this指向

• 构造函数中的this 指向我们实例对象；

• 原型对象里面放的是方法，这个方法中 this 指向的是这个方法的调用者，也就是这个实例对象；

6 扩展内置对象

学习了原型对象 prototype 后，你可以对JavaScript中内置的一些对象扩展自定义的属性和方法。比如给数组增加自定义的求和的功能：

Array.prototype.sum = function() {
  var sum = 0
  for(var i=0; i<this.length; i++) {
    sum += this[i]
  }
  return sum
}

var arr1 = [1,2,3]
var arr2 = new Array(11,22,33)
console.log(arr1.sum())//6
console.log(arr2.sum())//66

注意：数组和字符串内置对象不能给原型对象覆盖操作：Array.prototype = {} ，只能是 Array.prototype.xxx = function(){} 的方式。

原因应该很容易能想到了，当你用覆盖操作的时候，那场面就非常尴尬了。

判断属性存在于实例或原型中

1. 使用hasOwnProperty方法可以检测一个属性是存在于实例中，还是存在于原型中。如果是实例的属性则返回true，否则返回false。如：

function Person(name, age) {
  this.name = name
  this.age = age
}
Person.prototype.height = 180
var person1 = new Person('刘德华', 18)
console.log(person1.hasOwnProperty("name")) //true
console.log(person1.hasOwnProperty("age")) //true
console.log(person1.hasOwnProperty("height")) //false

2. 使用in操作符会在通过对象能够访问给定属性时返回true，无论该属性存在于实例中还是原型中。如：

function Person(name, age) {
  this.name = name
  this.age = age
}
Person.prototype.height = 180
var person1 = new Person('刘德华', 18)
console.log("name" in person1) //true
console.log("age" in person1) //true
console.log("height" in person1) //true

构造函数+原型模式

现在我们可以来解释为什么使用构造函数+原型模式的组合来创建对象了。

原型模式很强大，但它并不是没有缺点，来看下面的例子：

function Person() {}
Person.prototype = {
  constructor: Person,
  friends: ['张学友', '彭于晏']
}
var person1 = new Person('刘德华', 18)
var person2 = new Person('成龙', 18)
person1.friends.push('郭德纲')
console.log(person1.friends)//["张学友", "彭于晏", "郭德纲"]
console.log(person2.friends)//["张学友", "彭于晏", "郭德纲"]

我们修改了person1.friends引用的数组，由于friends数组存在于Person.prototype而不是person1中，所以person2.friends也会收到同样的影响。这就是原型模式下的最大问题，由共享的本性所导致的问题。

而当我们组合使用构造函数和原型模式，问题迎刃而解：

    function Person() {
      this.friends = ['张学友', '彭于晏']
    }
    Person.prototype = {
      constructor: Person,
      sayName: function () {
        console.log(this.name)
      }
    }
    var person1 = new Person('刘德华', 18)
    var person2 = new Person('成龙', 18)
    person1.friends.push('郭德纲')
    console.log(person1.friends) //["张学友", "彭于晏", "郭德纲"]
    console.log(person2.friends) //["张学友", "彭于晏"]

在这个例子中，实例属性都是在构造函数中定义的，而由所有实例共享的属性constructor和方法sayName则是在原型中定义的。修改了person1中的friends不会影响到person2的friends。