[BetterScroll 源码]javascript类的继承的实现
首先需要知道两个概念:
- 构造函数的
prototype
属性是实例的原型,这个属性的值是一个对象,可以被重新赋值,比如有时候为了简便会把prototype
属性重新赋值为一个对象字面量; - 每个对象都有一个
__proto__
内部属性,指向自己的原型,虽然是非标准的,但是各大浏览器都实现了他,在mdn文档中提到的[[Prototype]]
就是__proto__
。比如实例的__proto__
属性就是指向了构造函数的prototype
;
下面的代码来自@better-scroll/core实现了类的继承。
// extendStatics函数的作用是实现类静态方法的继承,构造函数原型继承,最终结果是d可以访问b的属性和方法。
var extendStatics = function (d, b) {
// Object.setPrototypeOf() 方法设置一个指定的对象的原型(即,内部 [[Prototype]] 属性)到另一个对象或 null。是Object.prototype.__proto__ 的替代
extendStatics = Object.setPrototypeOf ||
(
// 这里的逻辑是:如果当前环境支持 __proto__关键字, 就用__proto__修改原型的指向
{
__proto__: []
}
// instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。
instanceof Array && function (d, b) {
d.__proto__ = b; // 把d的原型指向b
}
) ||
/* 如果以上两者修改原型指向的方法都不支持那么手动将b上的属性添加到d上 */
function (d, b) {
for (var p in b) {
// 如果p是对象b自身的属性,那么将属性p添加到对象d上
if (Object.prototype.hasOwnProperty.call(b, p)) {
d[p] = b[p];
}
}
};
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
// 这里 __ 函数的作用是: 1. 保证d的构造函数指向正确;2.通过 __ 的实例实现继承;
function __() {
this.constructor = d;
}
__.prototype = b.prototype;
//Object.create() 方法创建一个新对象,使用现有的对象来提供新创建的对象的 __proto__
// 如果b不是null, d.prototype = new __(); d.prototype.__proto__ = b.prototype;
d.prototype = b === null ? Object.create(b) : new __();
}
对于__extends
函数中的如下代码:
function __() {
this.constructor = d;
}
__.prototype = b.prototype;
d.prototype = new __();
其实这段逻辑用Object.create()
也能实现,用Object.create()
实现后的__extends
如下:
function __extends(d, b) {
extendStatics(d, b);
d.prototype = Object.create(b.prototype);
d.prototype.constructor = d;
}