图文并茂🌈聊聊原型与原型链

Rockky
2,718 阅读5分钟

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

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

原型

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

function Person () {
    //...
}

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

image.png

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

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

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

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

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

如下图所示 image.png

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

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属性，如下图所示

image.png

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。

如下图所示： image.png

上面提到的：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创建一个实例对象。

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

image.png

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

// 父类：相当于上图中的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原型上的方法

对应的图如下：

image.png

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

补充：

所有的构造器都是函数对象，函数对象都是 Function构造产生的：

Person.__proto__ === Function.prototype

Object.__proto__ === Function.prototype

instanceof / isPrototypeOf

使用原型链后, 我们怎么去判断原型和实例的这种继承关系呢? 方法一般有两种

第一种是使用 instanceof 操作符, 只要用这个操作符来测试实例(instance)与原型链中出现过的构造函数。

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()
alert(instance.getFatherValue())    //true

alert(instance instanceof Object)   //true
alert(instance instanceof Father)   //true
alert(instance instanceof Son)      //true

由于原型链的关系, 我们可以说instance 是 Object, Father 或 Son中任何一个类型的实例. 因此, 这三个构造函数的结果都返回了true.

第二种是使用 isPrototypeOf() 方法, isPrototypeOf() 方法用于测试一个对象是否存在于另一个对象的原型链上。同样只要是原型链中出现过的原型,isPrototypeOf() 方法就会返回true, 如下所示.

alert(Object.prototype.isPrototypeOf(instance)) //true
alert(Father.prototype.isPrototypeOf(instance)) //true
alert(Son.prototype.isPrototypeOf(instance))    //true

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

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

参考

图解原型和原型链

往期JS好文

详解JavaScript作用域和作用域链🔗
彻底搞懂作用域、执行上下文、词法环境🔎
精选30+案例与10道题目带你彻底掌握this👊
一文总结Promise/async/await✨【精选输出题与手写题】
三段代码就能理解的闭包，为什么要讲得那么复杂？

avatar
文章
阅读
粉丝