zoukankan      html  css  js  c++  java
  • JavaScript一个类继承中实现

    JavaScript类是默认原型对象继承:

    var Person = function() {
        this.name = "people";
        this.hello = function() {
          console.log("hello user:" + this.name);
        }
    }
    
    var User = function() {
        this.name = "user";
        this.hello = function() {
          User.prototype.hello.call(this, arguments);
          console.log("hello user:" + this.name);
        }
    }
    
    User.prototype = new Person();
    new User().hello();
    有没有一种方法。可以让JavaScript的类像Java那样,通过一个superkeyword即调用父类的方法,于是我这样扩展了Function:

    (function() {
        Function.prototype.extend = function(baseClass) {
    
            // this is a function object.
            var oldPrototype = this.prototype, newPrototype = {}, _super = new baseClass();
    
            //inherits all properties and methods.
            for ( var name in _super) {
                newPrototype[name] = _super[name];
            }
    
            for ( var name in oldPrototype) {
                // only override properties in this new Class.
                if (oldPrototype.hasOwnProperty(name)) {
                    // only function need _super.
                    if (typeof oldPrototype[name] == "function" && typeof _super[name] == "function") {
                        newPrototype[name] =  (function(name, fn) {
                                return function() {
                                    var tmp = this._super;
                                    
                                    // set super method
                                    this._super = _super[name];
    
                                    var ret = fn.apply(this, arguments);
                
                                    this._super = tmp;
                
                                    return ret;
                                };
                            })(name, oldPrototype[name]);
                    }
                }
            }
    
            this.prototype = newPrototype;
            
            return this;
        };
    })();
    測试代码
    var A = function() {
        this.hello = function() {
            console.log("hello, I'm A");
        }
    };
    
    var B = function() {};
    
    B.prototype = {
        hello : function() {
            this._super();
    
            console.log("hello, I'm B");
        }
    };
    
    B.extend(A);
    
    var C = function() {};
    
    C.prototype = {
        hello : function() {
            this._super();
    
            console.log("hello, I'm C");
        }
    };
    
    C.extend(B);
    
    var b = new B();
    var c = new C();
    
    //b.hello();
    c.hello();

    结果

    hello, I'm A
    hello, I'm B
    hello, I'm C




    版权声明:本文博客原创文章。博客,未经同意,不得转载。

  • 相关阅读:
    CSS实现元素居中原理解析
    Windows 下 Ionic 开发环境搭建
    JavaScript实现简单的双向数据绑定
    JavaScript之Promise对象
    前端工程师的进阶之路
    前端开发必备之chrome插件
    Javascript之Event Loop
    CentOS7 如何挂载网络设备
    mysql 全量备份以及增量备份
    zabbix 内网监控云服务器
  • 原文地址:https://www.cnblogs.com/mengfanrong/p/4623705.html
Copyright © 2011-2022 走看看