zoukankan      html  css  js  c++  java
  • javascript模拟继承

    javascript作为前端开发的标配技能,如果不掌握好它的三大特点:1.原型 2.作用域 3. 闭包 ,又怎么可以说你学好了这门语言呢?如果标配的技能都没有撑握好,怎么可以任性的玩耍呢?怎么验证自己学好了以上三个基本点呢,我找到一段不错的代码,稍加改动,如果能够读懂它,那么你就可以任性了。

    function jClass(baseClass, prop) {
    
         // 只接受一个参数的情况 - jClass(prop)
         if (typeof(baseClass) === "object") {
             prop = baseClass;
             baseClass = null;
         }
    
         // 本次调用所创建的类(构造函数)
         function F() {
            // 调用init原型函数
            this.init.apply(this, arguments);
         }
    
         // 如果此类需要从其它类扩展
         if (baseClass) {
            F.prototype = Object.create(baseClass.prototype);
            //重置构造函数的指向
            F.prototype.constructor = F;
         }
    
         // 覆盖父类的同名函数
    
        for (var name in prop) {
            if (prop.hasOwnProperty(name)) {
                 // 如果此类继承自父类baseClass并且父类原型中存在同名函数name
                if (baseClass && typeof(prop[name]) === "function" &&
                    typeof(F.prototype[name]) === "function") {
    
                     // 重定义函数name - 
                     // 首先在函数上下文设置this.base指向父类原型中的同名函数
                     // 然后调用函数prop[name],返回函数结果
                     // 注意:这里的自执行函数创建了一个上下文,这个上下文返回另一个函数,
                     // 此函数中可以应用此上下文中的变量,这就是闭包(Closure)。
                     // 这是JavaScript框架开发中常用的技巧。
    
                    F.prototype[name] = (function(name, fn) {
                        return function() {
                            this.base = baseClass.prototype[name];
                            return fn.apply(this, arguments);
                        };
                    })(name, prop[name]);
                    
                } else {
                    F.prototype[name] = prop[name];
                }
            }
        }
        return F;
     };
    
      var Person = jClass({
    
          init: function(name) {
            this.name = name;
          },
    
          getName: function() {
              return this.name;
    
          }
    
      });
    
        var Employee = jClass(Person, {
    
          init: function(name, employeeID) {
            this.base(name);
            this.employeeID = employeeID;
          },
    
          getEmployeeID: function() {
            return this.employeeID;
          },
    
          getName: function() {
            return "Employee name: " + this.base();
        }
    
    });
    
    //----------------------------------------------------------
    var zhang = new Employee("ZhangSan", "1234"); console.log(zhang.getName()); // "Employee name: ZhangSan"

    这与我上次写的mini-extend.js相比,它的特点在于可以在子类中访问父类中的同名方法,其它并没有太多区别。关于上述代码,如果有任何疑问,欢迎与我一同探讨!

  • 相关阅读:
    POJ 1611 The Suspects
    POJ 2001 Shortest Prefixes(字典树)
    HDU 1251 统计难题(字典树 裸题 链表做法)
    G++ C++之区别
    PAT 乙级 1013. 数素数 (20)
    PAT 乙级 1012. 数字分类 (20)
    PAT 乙级 1009. 说反话 (20)
    PAT 乙级 1008. 数组元素循环右移问题 (20)
    HDU 6063 17多校3 RXD and math(暴力打表题)
    HDU 6066 17多校3 RXD's date(超水题)
  • 原文地址:https://www.cnblogs.com/afrog/p/4225055.html
Copyright © 2011-2022 走看看