Javascript继承和使用super:这可能吗?

时间:2010-12-25 06:32:06

标签: javascript inheritance

if (typeof Object.create !== 'function') {
    Object.create = function (o) {
        function F() {
        }

        F.prototype = o;
        var f = new F();

        if(f.init){
            f.init();
        };

        return f;
    };
}

var inherit = function(P, C) {
    var i;
    for(i in P) {
        // if is the current parent
        if(P.hasOwnProperty(i) === false) {
            continue;
        };

        // define the uper property
        C.uper = {};

        // methods
        if(typeof P[i] === 'function') {
            // set as super
            C.uper[i] = P[i];
            // if child already defined, skip
            if(typeof C[i] === 'function') {
                continue;
            };
            C[i] = P[i];
        }

        // properties 
        else {
            // if child already defined a property, skip
            if(!(typeof C[i] === 'undefined')) {
                continue;
            };
            C[i] = P[i];
        }
    }
    return C;
}


var Parent1 = (function(){
    var that = {};

    // private var
    var _name = 'Parent1';

    // public var
    that.lastName = 'LastName';

    // public method
    that.getName = function(){
        // if this.uper.getName.call(this)
        return _name + this.lastName;
        // else
        // return _name + that.lastName;
    }

    // return the literal object
    return that;
}());

var Parent2 = {
    // fake private var
    _name: 'Parent2',

    // public method
    getName: function(){
        // as we call this method with the call method
        // we can use this
        return this._name;
    }
}

var Child1 = inherit(Parent1, (function(){
    var that = {};

    // overriden public method
    that.getName = function(){
        // how to call the this.uper.getName() like this?
        return 'Child 1\'s name: ' + this.uper.getName.call(this);
    }

    that.init = function(){
        console.log('init');
    }

    // return the literal object
    return that;
}()));

var Child2 = inherit(Parent2, {
    getName: function(){
        // how to call the this.uper.getName() like this?
        return 'Child 2\'s name: ' + this.uper.getName.call(this);
    }
});

var child1 = Object.create(Child1);
// output: Child 1's name: Parent1LastName
console.log(child1.getName());

var child2 = Object.create(Child2);
// output: Child 2's name: Parent2
console.log(child2.getName());
// how to call the this.uper.getName() like this?

如何像这样调用this.uper.getName()?

2 个答案:

答案 0 :(得分:7)

Javascript使用Prototypal inheritance。所以基本上对象继承对象(一切都是对象)

以下是一些应该有助于解决问题的链接。

这是基本的模块模式:

var MODULE = (function (my) { 
    my.anotherMethod = function () { 
        // added method... 
    }; 

    return my; 
}(MODULE));

然后你可以做这样的事情来模仿继承:

var MODULE_TWO = (function (old) { 
    var my = {}, 
        key; 

    for (key in old) { 
        if (old.hasOwnProperty(key)) { 
            my[key] = old[key]; 
        } 
    } 

    var super_moduleMethod = old.moduleMethod; 
    my.moduleMethod = function () { 
        // override method on the clone, access to super through super_moduleMethod 
    }; 

    return my; 
}(MODULE));

这种编码风格需要一些习惯,但我现在肯定更喜欢经典继承。如果此代码没有意义,请查看Douglas Crockford lectures,它应该澄清其中的大部分内容。


解决编辑问题: 您可以使用new运算符创建这些对象的不同实例。

OR

我建议使用这个扩展Object Prototype的小方法(如果没有意义,请参阅Douglas Crockford视频)。我忘记了确切的原因,为什么这是他如此强烈推荐的,但至少它消除了一些混淆,因为new运算符与经典语言略有不同。不用说仅使用new运算符是不够的。

这个函数的作用是使用方法create扩展Object原型。然后......

  1. 在包含的命名空间中定义函数F.
  2. 将函数F的原型分配给传递的对象
  3. 返回新构造的Object。
  4. (douglas crockford在原型继承链接中更好地概述了)

    if (typeof Object.create !== 'function') {
        Object.create = function (o) {
            function F() {}
            F.prototype = o;
            return new F();
        };
    }
    newObject = Object.create(oldObject);
    

    所以使用你的代码...

    var a = Object.create(MODULE_TWO),
    var b = Object.create(MODULE_TWO);
    

答案 1 :(得分:2)

根据您上次编辑回复,您可以使用以下内容:

function Class(ctor, parent) {
    var c = Function.prototype.call;
    function clas() {

        // expose the parent as super
        this.super = parent;
        ctor.apply(this, arguments);
    }

    // save the constructor
    clas.constructor = ctor;

    // provide a static constructor
    clas.init = function() {
        c.apply(parent.constructor, arguments);
    };

    // Setup the prototype
    clas.prototype = parent ? parent.prototype : {};

    // provide an extend method
    clas.extend = function(methods) {
        for(var i in methods) {
            if (methods.hasOwnProperty(i)) {
                clas.prototype[i] = methods[i];
            }
        }
        return clas;
    };
    return clas;
}

示例:

var Animal = Class(function(name) {
    this.name = name;
});

var Cat = Class(function(name) {
    this.super(name);

}, Animal).extend({
    meow: function() {
        console.log('Meow! My name is ' + this.name + '.');
    }
});

new Cat('Neko').meow();

在JavaScript中实现“类”至少有一万种不同的方法,你想要隐藏内部越多,代码变得越“神奇”,但上面的内容非常简单。

您可以(也可能需要)自定义此选项以满足您的需求。但请记住,可能存在完整的类仿真方法可能不是最好的方法。

我已经发布了它作为评论,但是如果你想把所有东西都隐藏起来,我写了一个非常丰富的功能,但仍然很快,我自己的类库:
https://github.com/BonsaiDen/neko.js