Javascript 子类化答案

【问题标题】：Javascript subclassingJavascript 子类化
【发布时间】：2015-02-18 12:23:48
【问题描述】：

我希望这会导致控制台：“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();

【问题讨论】：

因为您使用缓存的self 引用原始对象而不是this，后者将是调用者定义的对象。
@squint 但我不能在回调中使用this。如何处理？
.forEach() 接受第二个参数来定义回调的this 值，因此在回调之后传递this。 ...像这样：jsfiddle.net/17b5ytmq/2
@user1561346：不确定你的意思。接受第二个参数的是.forEach()。查看演示。 this._protectedArr.forEach(function(element, index, array) { console.log(element + this.publicFunc2()); }, this); // <---
如果您的意思是在另一种情况下您不能以这种方式设置回调的this 值，那么您可以使用.bind() 或只创建您的self 变量内部 this.publicFunc() 像这样：this.publicFunc() { var self = this; this._protectedArr.forEach(func...

标签： javascript oop prototype subclass

【解决方案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

【讨论】：

当通过“超级”MyClass.call(this) 调用构造函数时，self1 也将是 MyClassChild 实例。您通常只需要selfs 之一。