快速读懂 JS 原型链

最近参加了公司内部技术分享，分享同窗提到了 Js 原型链的问题，并从 V8 的视角展开发散，刷新了我以前对原型链的认识，听完后决定重学一下原型链，巩固一下基础。前端

理解原型链
深刻原型链
总结与思考

理解原型链

Js 中的原型链是一个比较有意思的话题，它采用了一套巧妙的方法，解决了 Js 中的继承问题。web

按个人理解，原型链能够拆分红：微信

原型（prototype）
链（ __proto__）

原型（prototype）

原型（prototype）是一个普通的对象，它为构造函数的实例共享了属性和方法。在全部的实例中，引用到的原型都是同一个对象。编辑器

例如：函数

function Student(name) {
  this.name = name;
  this.study = function () {
    console.log("study js");
  };
}
// 建立 2 个实例
const student1 = new Student("xiaoming");
const student2 = new Student("xiaohong");
student1.study();
student2.study();

上面的代码中，咱们建立了 2 个 Student 实例，每一个实例都有一个 study 方法，用来打印 "study js"。flex

这样写会有个问题：2 个实例中的 study 方法都是独立的，虽然功能相同，但在系统中占用的是 2 分内存，若是我建立 100 个 Student 实例，就得占用 100 分内存，这样算下去，将会形成大量的内存浪费。this

因此 Js 创造了 prototype。spa

function Student(name) {
  this.name = name;
}
Student.prototype.study = function () {
  console.log("study js");
};
// 建立 2 个实例
const student1 = new Student("xiaoming");
const student2 = new Student("xiaohong");
student1.study();
student2.study();

使用 prototype 以后， study 方法存放在 Student 的原型中，内存中只会存放一份，全部 Student 实例都会共享它，内存问题就迎刃而解了。.net

但这里还存在一个问题。prototype

为何 student1 可以访问到 Student 原型上的属性和方法？

答案在 __proto__ 中，咱们接着往下看。

链（`proto`）

链（__proto__）能够理解为一个指针，它是实例对象中的一个属性，指向了构造函数的原型（prototype）。

咱们来看一个案例：

function Student(name) {
  this.name = name;
}
Student.prototype.study = function () {
  console.log("study js");
};

const student = new Student("xiaoming");
student.study(); // study js
console.log(student.__proto__ === Student.prototype); // true

从打印结果能够得出：函数实例的 __proto__ 指向了构造函数的 prototype，上文中遗留的问题也就解决了。

但不少同窗可能有这个疑问。

为何调用 student.study 时，访问到的倒是 Student.prototype.study 呢？

答案在原型链中，咱们接着往下看。

原型链

原型链指的是：一个实例对象，在调用属性或方法时，会依次从实例自己、构造函数原型、构造函数原型的原型... 上去寻找，查看是否有对应的属性或方法。这样的寻找方式就好像一个链条同样，从实例对象，一直找到 Object.prototype ，专业上称之为原型链。

仍是来看一个案例：

function Student(name) {
  this.name = name;
}
Student.prototype.study = function () {
  console.log("study js");
};

const student = new Student("xiaoming");
student.study(); // study js。
// 在实例中没找到，在构造函数的原型上找到了。
// 实际调用的是：student.__proto__.say 也就是 Student.prototype.say。

student.toString(); // "[object Object]"
// 在实例中没找到。
// 在构造函数的原型上也没找到。
// 在构造函数的原型的原型上找到了。
// 实际调用的是 student.__proto__.__proto__.toString 也就是 Object.prototype.toString。

能够看到， __proto__ 就像一个链同样，串联起了实例对象和原型。

一样，上面代码中还会存在如下疑问。

为何 Student.prototype.__proto__ 是 Object.prototype？

这里提供一个推导步骤：

先找 __proto__ 前面的对象，也就是 Student.prototype 的构造函数。

判断 Student.prototype 类型， typeof Student.prototype 是 object。
object 的构造函数是 Object。
得出 Student.prototype 的构造函数是 Object。

因此 Student.prototype.__proto__ 是 Object.prototype。

这个推导方法很实用，除了自定义构造函数对象以外，其余对象均可以推导出正确答案。

原型链常见问题

原型链中的问题不少，这里再列举几个常见的问题。

Function.__proto__ 是什么？

找 Function 的构造函数。

判断 Function 类型， typeof Function 是 function。
函数类型的构造函数就是 Function。
得出 Function 的构造函数是 Function。

因此 Function.__proto__ = Function.prototype。

Number.__proto__ 是什么？

这里只是稍微变了一下，不少同窗就不知道了，其实和上面的问题是同样的。

找 Number 的构造函数。

判断 Number 类型， typeof Number 是 function。
函数类型的构造函数就是 Function。
得出 Number 的构造函数是 Function。

因此 Number.__proto__ = Function.prototype。

Object.prototype.__proto__ 是什么？

这是个特例，若是按照常理去推导，Object.prototype.__proto__ 是 Object.prototype，但这是不对的，这样下去原型链就在 Object 处无限循环了。

为了解决这个问题，Js 的造物主就直接在规定了 Object.prototype.__proto__ 为 null，打破了原型链的无线循环。

明白了这些问题以后，看一下这张经典的图，咱们应该都能理解了。

深刻原型链

介绍完传统的原型链判断，咱们再从 V8 的层面理解一下。

V8 是怎么建立对象的

Js 代码在执行时，会被 V8 引擎解析，这时 V8 会用不一样的模板来处理 Js 中的对象和函数。

例如：

ObjectTemplate 用来建立对象
FunctionTemplate 用来建立函数
PrototypeTemplate 用来建立函数原型

细品一下 V8 中的定义，咱们能够获得如下结论。

Js 中的函数都是 FunctionTemplate 建立出来的，返回值的是 FunctionTemplate 实例。
Js 中的对象都是 ObjectTemplate 建立出来的，返回值的是 ObjectTemplate 实例。
Js 中函数的原型（prototype）都是经过 PrototypeTemplate 建立出来的，返回值是 ObjectTemplate 实例。

因此 Js 中的对象的原型能够这样判断：

全部的对象的原型都是 Object.prototype，自定义构造函数的实例除外。
自定义构造函数的实例，它的原型是对应的构造函数原型。

在 Js 中的函数原型判断就更加简单了。

全部的函数原型，都是 Function.prototype。

下图展现了全部的内置构造函数，他们的原型都是 Function.prototype。

看到这里，你是否也能够一看就看出任何对象的原型呢？

附：V8 中的函数解析案例

了解完原型链以后，咱们看一下 V8 中的函数解析。

function Student(name) {
  this.name = name;
}
Student.prototype.study = function () {
  console.log("study js");
};
const student = new Student('xiaoming')

这段代码在 V8 中会这样执行：

// 建立一个函数
v8::Local<v8::FunctionTemplate> Student = v8::FunctionTemplate::New();
// 获取函数原型
v8::Local<v8::Template> proto_Student = Student->PrototypeTemplate();
// 设置原型上的方法
proto_Student->Set("study", v8::FunctionTemplate::New(InvokeCallback));
// 获取函数实例
v8::Local<v8::ObjectTemplate> instance_Student = Student->InstanceTemplate();
// 设置实例的属性
instance_Student->Set("name", String::New('xiaoming'));
// 返回构造函数
v8::Local<v8::Function> function = Student->GetFunction();
// 返回构造函数实例
v8::Local<v8::Object> instance = function->NewInstance();

以上代码能够分为 4 个步骤：

建立函数模板。
在函数模板中，拿到函数原型，并赋值。
在函数模板中，拿到函数实例，并赋值。
返回构造函数。
返回构造函数实例。

V8 中的总体执行流程是符合正常预期的，这里了解一下便可。

总结与思考

本文分别从传统 Js 方面、V8 层面组件剖析了原型链的本质，但愿你们都能有所收获。

最后，若是你对此有任何想法，欢迎留言评论！

本文分享自微信公众号 - 前端日志（gh_12dcc43e6039）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。