简单易懂的谈谈 javascript 中的继承
Anshiii opened this issue · comments
知识储备
ECMAScript 2015 中引入的 JavaScript 类实质上是 JavaScript 现有的基于原型的继承的语法糖。类语法不会为JavaScript引入新的面向对象的继承模型。
我们知道 js 并没有类的概念,所谓的类是在原型链的基础之上。例如我们通常所使用的 function 实际上是继承于 Function 类的对象。
function fool(a, b) {
return a + b
}
var fool = new Function("a, b", "return a+b");
两者所做的事情是相同的,函数 fool 其实是 Function 的一个实例,也就是说 fool.__proto__ === Function.prototype
的返回值是 true。
于是问题来了,Function 的构造函数是如何生成的呢?
同时我们知道 Function
并不是这一条原型链的终点,Function
是继承于 Object
的。
那么问题又来了 Object 的构造函数是如何生成的呢?
是内置对象 %Object%
,同样的 Function 的 constructor 也是内置对象 %Function%
,事实上这个问题也不重要。我们只需要知道 这两个 constructor 都不是 Function 的实例即可。
原型继承
有对象的概念,就会有子类的概念。在 ES2015 中,新增了 关键字 extends
。
class ChildClass extends ParentClass { ... }
我们只知道 extends 的作用相当于从 ChildClass 的原型链上可以获取 ParentClass 的原型对象,但是具体做了什么事情呢?
首先我们要明白,如何创建子类。
核心内容: B的实例继承自B.prototype,后者同样也要继承自A.prototype。
我们知道 B.prototype 和 A.prototype 究其根本 都是 对象(Object),那对象的继承概念是什么?
于是我们自然而然的写下两行代码,
B.prototype = new A();
B.prototype.constructor = B;
此时我们开始起草我们的 继承方法 inherit。
function inherit(SuperClass, ChildClass) {
ChildClass.prototype = new SuperClass();
ChildClass.prototype.constructor = ChildClass;
return ChildClass
}
我们再看看 babel 里对 extends 的实现:
function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass)
:
subClass.__proto__ = superClass;
}
这里使用了Object.create方法。
这里其实和以下代码类似,只不过回避了对父类构造函数的调用(父类构造函数内如果有生成实例属性的话,也将在原型链继承了)不至于产生多余的属性。
let obj = new superClass();
obj.constructor = subClass
subClass.prototype = obj
如果要在继承时回避对父类构造函数的调用又不使用 Object.create 方法,可以使用过桥函数,如下代码。
function inherit2(SuperClass, ChildClass) {
function F() {
}
F.prototype = SuperClass.prototype;
ChildClass.prototype = new F();
ChildClass.prototype.constructor = ChildClass;
return ChildClass;
}
总结: 其实构造函数的 prototype 就是个普通的对象,只不过他具有特殊意义,同时这个对象 有个 constructor 属性(不是必须的),这个属性指向构造函数本身。
对象的
__proto__
属性是 非标准 但许多浏览器实现了的用于访问对象原型的属性,现在可以通过Object.getPrototypeOf()
和Object.setPrototypeOf()
访问器来访问。