美文网首页
javascript - 如何优雅的实现继承

javascript - 如何优雅的实现继承

作者: 冯走心 | 来源:发表于2016-04-07 16:11 被阅读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继承详解
还有这里作者不清楚名字但是也很厉害哦

相关文章

  • javascript - 如何优雅的实现继承

    这篇文章不好开篇 , 在学习继承的路上挖的一个坑。在此记录。 参考 三生石的js继承详解还有这里作者不清楚名字但是...

  • 面试题

    1.JavaScript中面向对象中继承的实现 2.能描述下渐进增强和优雅降级之间的不同吗? 优雅降级:Web站点...

  • 005|JavaScript ES6新特性之Classes

    在过去,需要像 053|JavaScript 继承详解 那样实现继承。JavaScript这种继承实现方式与其它面...

  • javascript代码积累

    一、javascript实现继承 1.基于原型链实现继承 2.基于属性和方法复制实现继承 二、javascript...

  • Web前端经典面试试题及答案2

    javascript面向对象中继承实现? 面向对象的基本特征有:封闭、继承、多态。在JavaScript中实现继承...

  • Javascript如何实现继承

    构造函数继承 原型构造函数组合继承

  • javascript 如何实现继承

    js既然要实现继承,那么首先我们得有一个父类,代码如下: 1、原型链继承 核心: 将父类的实例作为子类的原型 2、...

  • JavaScript如何实现继承?

    JS 中的继承主要分为两种:原型继承和非原型继承,非原型继承又分为寄生方式继承、借用或伪造构造函数方式继承、组合方...

  • Javascript如何实现继承

    一、是什么 继承(inheritance)是面向对象软件技术当中的一个概念。 如果一个类别B“继承自”另一个类别A...

  • js实现继承的几种方式

    如何实现继承? js中实现继承的方式主要是通过原型链完成的。了解原型链的相关信息可以点这里 javascript中...

网友评论

      本文标题:javascript - 如何优雅的实现继承

      本文链接:https://www.haomeiwen.com/subject/gsomlttx.html