JavaScript 原型与原型链

在JavaScript中是使用构造函数来新建一个对象的，每一个构造函数的内部都有一个 prototype 属性，它的属性值是一个对象，这个对象包含了可以由该构造函数的所有实例共享的属性和方法。当使用构造函数新建一个对象后，在这个对象的内部将包含一个指针，这个指针指向构造函数的 prototype 属性对应的值，在 ES5 中这个指针被称为对象的原型。一般来说不应该能够获取到这个值的，但是现在浏览器中都实现了 __proto__ 属性来访问这个属性，但是最好不要使用这个属性，因为它不是规范中规定的。ES5 中新增了一个 Object.getPrototypeOf() 方法，可以通过这个方法来获取对象的原型。

当访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有自己的原型，于是就这样一直找下去，也就是原型链的概念。原型链的尽头一般来说都是 Object.prototype 所以这就是新建的对象为什么能够使用 toString() 等方法的原因。

1. 构造函数

function Person(name) {
  this.name = name
}
let person = new Person('Alan')

一般情况下，我们将构造函数的首字母大写。
这里的Person就是person的构造函数

2. prototype和__proto__

person.__proto__和Person.prototype指向同一个对象，这个对象包含了该构造函数的所有实例共享的属性和方法。
而Person.prototype也是一个对象，所以他也存在一个__proto__属性，指向他的原型。
我们观察下面的代码：

function Person(name) {
  this.name = name
}
let p = new Person('hello')
console.log(p.__proto__ === Person.prototype)        // true

值得注意的是，一个原型对象被该构造函数的所有实例共享，所以，当我们写了p.__proto__.age=19，会给所有Person对象都增加了一个属性值为19的age属性。

3. constructor

每个原型对象中包含了共享属性和方法，共享属性中有一个constructor属性，这个属性是构造函数的一个引用。

console.log(p.constructor)	//[Function: Person]

值得注意的是，虽然我们可以通过p.constructor获取到构造函数，但是constructor是存在于p的原型中作为共享属性而存在的。
所以下面的输出就很明确了：

console.log(p.hasOwnProperty('constructor'))	//false
console.log(p.__proto__.hasOwnProperty('constructor'))	//true

4. 更改原型

Person.prototype.getName = function() { return this.name }	//增加方法
p.__proto__.age = 19	//增加属性

注意，当我们在原型上增加了age属性之后，此时的age=19可以说是每个Person实例的默认age属性值，观察下面代码：

p.__proto__.age = 19
console.log(p.hasOwnProperty('age'))	//false
p.age = 20
console.log(p.hasOwnProperty('age'))	//true
console.log(p.age, p.__proto__.age)		//20 19

这里的p.age = 20其实并不是更新了p的age值，而是为p增加了一个age属性，其属性值为20。

再次观察下面的代码：

function Person(name) {
  this.name = name
}
let p = new Person('Alan')
// 修改原型
Person.prototype = {
  age: 19,
  setAge: function (age) {
    this.age = age
  }
}

console.log(p.age)

这里会输出什么呢？
我们以对象字面量的方式给Person.prototype赋值，这时就不再会影响p.__ptoto__指向的值了：

所以，下面的代码该如何输出呢？

console.log(p.__proto__ === Person.prototype)	//false
console.log(p.__proto__.constructor)			//[Function: Person]
console.log(Person.prototype.constructor)		//[Function: Object]

此时的Person.prototype和p.__proto__就不再指向同一个原型了，这种情况是很危险的，但是，某些情况，我们需要向Person.prototype直接赋值，这时候，我们还需要重新设置Person.prototype.constructor=Person，实例化对象需要在这一步之后再进行！