原型与原型链作为JavaScript的一个核心知识点，其重要性不用多说了。但我注意到很多文档教程或是书本，对原型与原型链的描述虽多但不是很清晰，个人觉得不太容易梳理和理解。

这篇文章主要是通过图解的方式去把原型与原型链的基础内容给描述清楚，OK，接下来就开始吧~

原型

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

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创建一个实例对象。

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

下面来看一段代码来加深一下对上图的理解吧

// 父类：相当于上图中的Person构造函数
function Father() {
    this.property = true
}
Father.prototype.getFatherValue = function () {
    return this.property
}
// 子类：相当于上图中的延伸部分...
function Son() {
    this.sonProperty = false
}
//继承 Father
Son.prototype = new Father()  
Son.prototype.getSonVaule = function () {
    return this.sonProperty
}

var instance = new Son()
console.log(instance.getFatherValue()) // true   继承父类Father上的方法
console.log(instance.toString) // ? toString() { [native code] }  继承Object原型上的方法
复制代码

对应的图如下：

把这张图理解并记忆，相信80%的原型和原型链的问题也就难不倒你啦

最后，这篇文章讲解的只是原型和原型链的基础但又最核心的知识点，关于继承相关的知识点没有讲解太多，因为打算单独放在下一篇文章中。

如果文章若有不正确的地方，欢迎指出，共同探讨

原文来自：https://juejin.cn/post/7053331458101887007