一个例子看尽 - JS继承

一个系列：一个列子看尽一个知识点

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

转载于:https://www.jianshu.com/p/0ff7b7d73758