一个系列： 一个列子看尽一个知识点
1. 首先我们来个简单的，ES6中写一个继承
是不是非常的开心，这是在写C#吗？JS的继承也如此简单哦，那还看尽啥呢
class father {
}
class child extends father {
}
2. 但是这是ES6呢，在babel转成ES5后的代码呢，如下，我们来好好看下呢
"use strict";
// 获取对象上面的属性
var _get = function get(_x, _x2, _x3) {
var _again = true;
// 循环往上查找属性
_function: while (_again) {
var object = _x, property = _x2, receiver = _x3;
_again = false;
if (object === null) // 为空就变回原来的亲生父母Function调用
object = Function.prototype;
var desc = Object.getOwnPropertyDescriptor(object, property); // 获取属性的描述，比如constructor的描述
if (desc === undefined) { // 没有属性描述，则往原型上找，就是小蝌蚪找妈妈
var parent = Object.getPrototypeOf(object);
if (parent === null) {
return undefined;
} else {
_x = parent;
_x2 = property;
_x3 = receiver;
_again = true;
desc = parent = undefined;
continue _function;
}
} else if ("value" in desc) { // 属性描述里面的value就是这个属性的指向，返回
return desc.value;
} else {
var getter = desc.get;
if (getter === undefined) {
return undefined;
}
return getter.call(receiver);
}
}
};
// 类的继承
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);
}
// 作为一个函数的原型属性继承！！！
// 以父类原型属性为模板，创建对象给子类的原型属性，同时把函数的constructor指向了自己
// 这样子类通过这种方式继承了父类的原型属性，有上面的东西啦
// Object.create标明这里子类和父类的原型属性不是同一个，新创建了一个
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: { // 更改原有函数的constructor的指向，以后我生出的孩儿，都要知道我才是他们妈妈
value: subClass, // 你看，指向了自己了吧
enumerable: false, // 不可枚举
writable: true, // 可写
configurable: true // 可配置
}
});
// 作为一个对象的原型指向继承！！！
// 彻底改变子类原型，指向父类，标明我是父类创建哒， Object.setPrototypeOf这个是ES6的语法，等同于subClass.__proto__
// 那么如果这里不设置的话，我们可以看到subClass.__proto__ === Function.prototype, 还是由原生Function创建的
// 所以这里的作用就是彻底撇清和亲生父母Function的关系，彻底投靠给了养父母SuperClass， 你通过__proto__查户口本我也是superClass的儿子
// 当然subClass.__proto__.__proto__ === superClass.__proto__ === Function.prototype 这下你爷爷变成Function了
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}
// 判断是否是继承此类的实例
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
// 1. 父类的函数声明
var father = function father() {
_classCallCheck(this, father);
};
// 2. 子类的函数声明
var child = (function (_father) {
// 3. 继承
_inherits(child, _father);
// 4. 返回真实函数声明
function child() {
// 5. 判断调用者是否是当前实例
_classCallCheck(this, child);
// 6. 调用父类上的constructor构造函数来创建实例，就是调用父类函数创建对象
// Object.getPrototypeOf(child.prototype) === child.prototype.__proto__ ：这里是找原型属性的原型，找到father啦
// 为什么能找到呢， Object.setPrototypeOf(subClass, superClass) ， 就是这句话的效果撒
// 一开始以为是自己的原型，都快被绕晕了
_get(Object.getPrototypeOf(child.prototype), "constructor", this).apply(this, arguments);
}
return child;
})(father);
- 哇，好长，这个代码还是得从最后看起,注意大概步骤分为6步,仔细看源码注释哦!
- 父类的函数声明,这里很简单了，原来类就是一个function啊，虽然我早就知道了，里面只有一句来验证用father来创建对象的时候，this是不是father的实例
var father = function father() {
_classCallCheck(this, father);
};
- 子类的函数声明,我们看最外面，变成一个闭包了哟，传入的参数是father,因为我们指定是继承father的嘛，所以在new Child()的时候需要father, 这里就把father先存起来
var child = (function (_father) {
_inherits(child, _father);
function child() {
_classCallCheck(this, child);
_get(Object.getPrototypeOf(child.prototype), "constructor", this).apply(this, arguments);
}
return child;
})(father);
- 继承：上面说存起了father的嘛，存起来就是为了继承的哟，就是这句
_inherits(child, _father);小小一句话是怎么实现的呢，看这个函数如下
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: { // 更改原有函数的constructor的指向，以后我生出的孩儿，都要知道我才是他们妈妈
value: subClass, // 你看，指向了自己了吧
enumerable: false, // 不可枚举
writable: true, // 可写
configurable: true // 可配置
}
});
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}
这里最重要的两步，
- 作为一个函数的原型属性继承！！！
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: { // 更改原有函数的constructor的指向，以后我生出的孩儿，都要知道我才是他们妈妈
value: subClass, // 你看，指向了自己了吧
enumerable: false, // 不可枚举
writable: true, // 可写
configurable: true // 可配置
}
});
以父类原型属性为模板，创建对象给子类的原型属性，同时把函数的constructor指向了自己,这样子类通过这种方式继承了父类的原型属性，有上面的东西啦,Object.create标明这里子类和父类的原型属性不是同一个，新创建了一个
- 作为一个对象的原型指向继承！！！
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
彻底改变子类原型，指向父类，标明我是父类创建哒， Object.setPrototypeOf这个是ES6的语法，等同于subClass.proto ,那么如果这里不设置的话，我们可以看到subClass.proto === Function.prototype, 还是由原生Function创建的,所以这里的作用就是彻底撇清和亲生父母Function的关系，彻底投靠给了养父母SuperClass， 你通过proto查户口本我也是superClass的儿子.当然subClass.proto.proto === superClass.proto === Function.prototype 这下你爷爷变成Function了
-
返回真实函数声明，这句简单，返回了child函数，跟father一样，还是一个函数呀
-
判断调用者是否是当前实例，同样跟父类一样
-
调用父类上的constructor构造函数来创建实例，就是调用父类函数创建对象
_get(Object.getPrototypeOf(child.prototype), "constructor", this).apply(this, arguments);
注意这里的Object.getPrototypeOf(child.prototype) 等价于 child.prototype.__proto__ 等价于 father.prototype , 这句明白了才好理解呢，想用this调用父类上的构造函数来创建象，所以继承后你创建一个对象，真正是一层一层往上调用构造函数来给你创建对象滴，具体_get里怎么拿到构造函数就看源码啦，
3. 最后附上博主幸幸苦苦画的继承关系图呢，是不是很清晰明了了呢，对了，这里还有js深层的继承关系呢，所谓一生二，二生三，三生万物，这里的一就是null啊，喜欢给个赞哟！！！
Javascript继承详解.jpg
网友评论