javascript - 如何优雅的实现继承

2016-04-07  本文已影响36人  冯走心

这篇文章不好开篇 , 在学习继承的路上挖的一个坑。在此记录。

// 先写出调用的方式
//父类 Person
var Person = Base({
    init: function(name, age) {
        this.name = name;
        this.age = age;
    },
    getName: function() {
        return this.name;
    },
    getAge: function(age) {
        eturn this.age;
    }
});
//子类
var Employee = Base(Person, {
    init: function(name, age, emid) {
        this.base(name, age);
        this.emid = emid;
    },
    getEmid: function() {
        return this.emid;
    },
    getName: function() {
        return 'Employee name: ' + this.base();
    },
    getAge: function(age) {
        return 'Employee age: ' + this.base();
    }
});
    var zhang = new Employee('ZhangSan', 25, '1234');
    console.log(zhang.getName);
    console.log(zhang.getAge);
// 这样的继承看起来很美,利用init来构造对象.
// this.base 很方面的调用父类中的相同的方法实现方法的重写
//下面是Base 基类的源码
var Base = (function(undefined) {
      //创建一个全局的状态标示 - 当前是否处于类的构造阶段
    var initializing = false;
        //baseClass= 父类,prop是子类构造时传入的属性和方法的对象字面量
    return function(baseClass, prop) {
        //如果是object 就是只有一个参数,baseClass无用
        if (typeof baseClass === 'object') {
            prop = baseClass;
            baseClass = null;
        }
        function F() {
         //如果false 则处于构造阶段
            if (!initializing) {
                if (baseClass) {
                    this.baseprototype = baseClass.prototype;
                }
                this.init.apply(this, arguments);
            }
        }
        if (baseClass) {
        //处于创建阶段不会调用init
            initializing = true;
            F.prototype = new baseClass();
            F.prototype.constructor = F;
            initializing = false;
        }
        for (var n in prop) {
            if (prop.hasOwnProperty(n)) {
                 //如果当前子类的方法与父类中的方法一致
                 //则将子类中的方法添加一层闭包,添加一个base属性指向父类中的同一个名字的方法
                 //在闭包中 baseClass是外层闭包空间中的私有变量,因为下面的闭包内没有该变量则向上寻找.
                //闭包中的n 和fn 都是被保存的变量 
                //所以在函数调用时this.base会动态的调用当前的方法
                if (baseClass && typeof prop[n] === 'function' && typeof F.prototype[n] === 'function') {
                    F.prototype[n] =(function(n, fn) {
                            function() {
                                //baseClass 和 n 都被保存  闭包机制
                                this.base = baseClass.prototype[n];
                                return fn.apply(this, arguments);
                            };
                        })(n, prop[n]);
                } else {
                    F.prototype[n] = prop[n];
                }
            }
        }
        return F;
    };
})();

参考

三生石的js继承详解
还有这里作者不清楚名字但是也很厉害哦

上一篇 下一篇

猜你喜欢

热点阅读