/ javascript

ES6的class 继承 --ES5的实现

es6 如下代码
简单明了,dog继承animal

class animal{
  constructor(age){
 	this.age = age
 }
}
class dog extends animal{
 constructor(name,age){
   super(age);
 	this.name = name
 }
}
var dog1= new dog("tom",22);
console.log(dog1.name);
console.log(dog1.age)

通过babel编译为es5
在线编译地址:
https://www.babeljs.cn/repl/
编译之后,尽管我格式化了一下代码,似乎这不是给人看的;
不过由于少,认真读,基本还是可以读懂;
下面我把一些异常处理,去掉,更简单了:

  "use strict";

    function _possibleConstructorReturn(self, call) {
        if (!self) {
            throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
        }
        return call && (typeof call === "object" || typeof call === "function") ? call : self;
    }

    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;
    }

    function _classCallCheck(instance, Constructor) {
        if (!(instance instanceof Constructor)) {
            throw new TypeError("Cannot call a class as a function");
        }
    }

    var animal = function animal(age) {
        _classCallCheck(this, animal);

        this.age = age;
    };

    var dog = function (_animal) {
        _inherits(dog, _animal);

        function dog(name, age) {
            _classCallCheck(this, dog);

            var _this = _possibleConstructorReturn(this, (dog.__proto__ || Object.getPrototypeOf(dog)).call(this, age));

            _this.name = name;
            return _this;
        }

        return dog;
    }(animal);

    var dog1 = new dog("tom", 22);
    console.log(dog1.name);
    console.log(dog1.age);

我处理过的,加上注释

"use strict";
// 继承
// 注意参数是 类
function _inherits(subClass, superClass) {
    // 原型继承
    subClass.prototype = superClass.prototype;
    // 非原型继承
    // 方便在构造器使用 call 继承非原型属性
    subClass.__proto__ = superClass;
    //还原构造器
    subClass.prototype.constructor = subClass;
}

var animal = function animal(age) {
    this.age = age;
};

var dog = function (_animal) {
    _inherits(dog, _animal);

    function dog(name, age) {
        //由于 _inherits 中__proto__指向了父类,所以 dog.__proto__ 可以得到父类
        //调用父类构造函数
        dog.__proto__.call(this, age);
        this.name = name;
        return this;
    }

    return dog;
}(animal);

var dog1 = new dog("tom", 1);
console.log(dog1.name);
console.log(dog1.age);

可以看到,关键的函数就这个

//寄生组合式继承
function _inherits(subClass, superClass) {
    // 原型继承
    subClass.prototype = superClass.prototype;
    // 非原型继承
    // 方便在构造器使用 call 继承非原型属性
    subClass.__proto__ = superClass;
    //还原构造器
    subClass.prototype.constructor = subClass;
}

//《javascript高级程序设计》 中这样写的
//寄生组合式继承
 function _inherits(subType, superType){
        var prototype = Object(superType.prototype);
        prototype.constructor = subType;
        subType.prototype = prototype;
        subType.__proto__ = superType;
}

备注:
编译之后的代码,有如下等不常用方法与属性,
Object.setPrototypeOf()
Object.getPrototypeOf()
superClass.proto.
在《javascript高级程序设计》第三版,第6章,有详细介绍;