Javascript子类化

时间:2014-12-19 14:37:52

标签: javascript oop prototype subclass

我希望这会导致控制台:" 2"和" 11"。但相反,它给了我" 2"和" 2"。为什么publicFunc2没有被覆盖? http://jsfiddle.net/17b5ytmq/1/。我想我不了解Javascript中的子类化。

function MyClass() {
    var self = this;
    this._protectedArr = [1];
    this.publicFunc = function() {
        this._protectedArr.forEach(function(element, index, array) {
            console.log(element + self.publicFunc2());
        });
    }
    this.publicFunc2 = function () {
        return 1;
    }
}

function MyClassChild() {
    this.publicFunc2 = function () {
        return 10;
    }
}

var myClass = new MyClass();
myClass.publicFunc();

MyClassChild.prototype = myClass;
var myClassChild = new MyClassChild()
myClassChild.publicFunc();

1 个答案:

答案 0 :(得分:1)

你应该继承原型而不是像这样的实例:

MyClassChild.prototype = Object.create(MyClass.prototype);

你也应该调用构造函数来真正继承所有的类

function MyClassChild() {
    MyClass.call(this);

    this.publicFunc2 = function () {
        return 10;
    }
}

MyClassChild.prototype = Object.create(MyClass.prototype);

最后,this关键字是在方法中使用时对当前实例的动态引用。

当您为变量指定this时,您可以创建对当前实例的静态引用,该引用可以像对任何其他对象的引用一样使用。

以下是一个解释性示例:

function MyClass() {
    var self1 = this;
    this.id = 'MyClass';

    this.publicFunc = function() {
        var self2 = this;
        asyncAction(function () {
            // self1 - MyClass
            // self2 - MyClass or MyClassChild - depends on the calling object
        });

        return self1.id + ' - ' + this.id;
    };

    this.publicFunc2 = function () {
        return 1;
    };
}

function MyClassChild() {
    MyClass.call(this);
    this.id = 'MyClassChild';

    this.publicFunc2 = function () {
        return 10;
    }
}
MyClassChild.prototype = Object.create(MyClass.prototype);

var myClass = new MyClass();
var myClassChild = new MyClassChild();

myClass.publicFunc(); // MyClass - MyClass
myClassChild.publicFunc(); // MyClass - MyClassChild

myClass.publicFunc2(); // 1
myClassChild.publicFunc2(); // 10