原型及原型链

原型与原型链作为JavaScript的一个核心知识点，很重要！！！！！！！！

原型

通常，我们写一个构造函数都是这样：

function Person () {
    //...
}
​

我们不在这个构造函数里写任何代码，当我们在浏览器控制台通过console.dir打印出这个构造函数时，可以看到它被添加了一个属性prototype。

构造函数Person通过prototype属性就能访问到它的原型对象，Person.prototype就是原型对象

当我们需要通过Person构造函数创建一个实例时，通常是这么写：

function Person () {
    //...
}
const person = new Person() // 通过new操作符创建一个实例
console.log(person instanceof Person) // true

那么person实例可以访问Person构造函数的原型对象吗? 显然是可以的。

通过new创建的实例上有一个__proto__属性（注意⚠前后是两个下划线）可以直接访问原型对象Person.prototype。通常，我们将__proto__属性称为隐式原型属性。

如下图所示

在原型上定义的属性和方法，在实例上能够继承这些属性和方法。

function Person () {
    //...
}
Person.prototype.sayHi = 'Hi'
const person = new Person() // 通过new操作符创建一个实例
console.log(person.sayHi)   // Hi
console.log(person.__proto__ === Person.prototype) // true
复制代码

此外，如果原型对象Person.prototype需要访问它原来的构造函数可以通过constructor属性，如下图所示

function Person () {
    //...
}
Person.prototype.sayHi = 'Hi'
const person = new Person() // 通过new操作符创建一个实例
console.log(person.sayHi)   // Hi
console.log(person.__proto__ === Person.prototype)   // true
console.log(Person.prototype.constructor === Person) // true
复制代码

原型链

当我们需要读取实例上的属性时，JS会先在当前实例上查找是否有该属性，如果没有则通过__proto__访问原型去查找是否有该属性，如果有的话就可以直接使用，没有的话，就会再通过__proto__去访问原型的原型，因为原型也是一个对象嘛。

Person.prototype可以看做是Object的实例，这样的话Person.prototype通过__proto__访问的是Object的原型Object.prototype，Object.prototype也有一个__proto__属性，只不过这次不套娃了，它指向的是null。

总结一下：当我们访问一个实例（例如person）的属性或方法时，会先在当前实例上查找，若查找不到，会到原型上查找，若原型上查找不到，就到原型的原型上查找，若还是查找不到就指向null。

如下图所示：

上面提到的：Person.prototype可以看做是Object的实例。

其实我们在JS中创建的对象都是Object的实例，他们都会继承Object原型对象上的属性和方法，并且 创建的对象.__proto__ === Object.prototype

const obj = {}
console.log(obj.__proto__ === Object.prototype) // true
console.log(obj.toString)  // ƒ toString() { [native code] }，toString是继承Object.prototype上的方法
​
const obj2 = new Object()
console.log(obj2.__proto__ === Object.prototype) // true
console.log(obj2.toString) // ƒ toString() { [native code] }
复制代码

既然Person.prototype可以看做是Object的实例。那么就可以在Object处引出一个箭头指向Person.prototype，表示通过new创建一个实例对象。

最后，再把节点和连线调整一下，最终得到的图如下所示