JavaScript 之原型链浅析
原型的应用在 javaScript 中处处可以见到,例如:数组可以调用 split、concat、push 等方法,我们并没有在数组对象中去声明这些方法,那这些方法又从哪里来呢?这都已经在数组的原型对象上定义好了,在调用的时候会顺着原型链向上查找。
先给出几个结论,下面部分会以箭头函数来讲解原型链:
- 每个函数都具有一个 prototype 属性(箭头函数除外),也称作显式原型
- 对象类型都具有可拓展的属性
- 每个对象类型都具有__proto__属性,也称作隐式原型
- 每个原型都有一个 constructor 指向与之相关联的构造函数
- 一个对象变量的隐式原型__proto__指向它的构造函数的显示原型 prototype
以下将基于此对象做讨论:
function Animal(name) {
this.name = name;
this.run = function () {
console.log(`${name} is running!`);
};
}
const dog = new Animal('dog');
prototype
每个函数都具有 prototype 这个属性,但是特别的是箭头函数并不具有这个特性,箭头函数作为一种“纯净版”的函数,在 ES6 规范中定义的时候就移除了 this 指针、arguments、prototype 等属性,也不能被 new 出来创建实例。
__proto__
而每个对象类型都具有__proto__属性,通俗易懂的理解,对象类型指的是都是由相应的构造函数实例化而来的。null 和 undefined 并没有对应的构造函数。对象类型介绍:https://www.w3school.com.cn/js/pro_js_object_types.asp 。对于箭头函数来讲,它也是一个对象类型,是由 Function 实例化而来的,所以也具有__proto__。
constructor 属性
每个对象类型都有一个 constructor 指向与之关联的构造函数。但是在原型链的尽头,Object.prototype 的__proto__指向的是 null,所以并没有构造函数,也就没有 constructor 属性。
原型链基本构成
原型链的形成基于如下一条众所周知的规则:
实例的隐式原型__proto__会指向构造函数的 prototype,在寻找一个对象的属性的时候,比如说在 dog 这个对象中并没有定义 run()这个方法,这时候会按照原型链的规则去逐层向上寻找对应的属性,直至找到返回。
- 由 prototype 的介绍可以知道,Animal 这个对象有一个显式原型属性。
- 由__proto__的介绍可以知道,每个对象类型都有__proto__属性,那么 Animal 的显式原型 prototype 也是一个对象。
- 这个 Animal 的显示原型对象的__proto__属性又指向对象类型的构造函数原型,也就是 Object。
- 这种套娃式链路也得有一个终点,Object.__proto__就指向了 null。
- Animal 这个构造函数也是有隐式原型的,函数都来源于 Function。
一张图更胜于繁琐的文字说明:
箭头函数不能作为构造函数的原因
箭头函数不能继承于 Object,因为它本身并不具备 prototype 属性,向构造函数这一方向的原型链就终止了,所以这就是箭头函数不能作为构造函数的原因。但他自己可以将__proto__属性指向 Function,去继承 Function 原型上的一些方法属性。
Function 的显示原型和隐式原型
Function 算是一种本地对象,它原型的规定可能看上去无限套娃,但是易于读者去理解原型链。