javascript - 访问父类中的变量

Question

我已经被这个问题难住了几个小时了，我似乎找不到解决方案。我有一个扩展父类的类，但我似乎无法访问在父类的构造函数中声明的变量。

我borrowed my inheritance technique .它只是使用“扩展”函数来创建子类:

//In functions.js
function extend(base, sub, methods) {
    sub.prototype = Object.create(sub.prototype);
    sub.prototype.constructor = sub;
    sub.base = base.prototype;

    for(var name in methods) { sub.prototype[name] = methods[name]; }

    return sub;
}

我创建了一个名为 Stimulus 的类作为一个函数:

//In classes.js
function Stimulus(module_id, unit_id, attributes) {
    this.attributes = attributes;
    this.module_id = module_id;
    this.unit_id = unit_id;
    //create some other class variables based on this.attributes, this.module_id, and this.unit_id
}

Stimulus.prototype = {
    _getStimulus: function() { //retrieve from database }
    //other functions here
}

最后我有了子类。我用来创建它的技术也借鉴了上面的链接:

//In classes.js
ImageStimulus = (function() {
    var $this = function(module_id, unit_id, attributes) {
        $this.base.constructor.call(this, module_id, unit_id, attributes);
    };

    extend(Stimulus, $this, {
        initialize: function() {
            this.fixation_cross = this.attributes['Fixation Cross'] ? this.attributes['Fixation Cross'] : false;
            //do other stuff
        }
        //other functions here
    });

    return $this;
})();

这一切看起来都很简单。但是，在我的主脚本中，当我尝试运行它时，我创建了对象，然后尝试运行 initialize() 函数，但一切都崩溃了:

//In main.js
var stimulus_objects = [];

for(var i = 0; i < someLimit; i++) {
    //module_id is passed directly to this function
    var unit_id = //some source;
    var stimulus_attributes = //some source;

    stimulus_objects[i] = new ImageStimulus(module_id, unit_id, stimulus_attributes);
    stimulus_objects[i].initialize();
}

如果我检查控制台，我会看到上面写着

Uncaught TypeError: Cannot read property 'Fixation Cross' of undefined

它对应于 ImageStimulus.initialize() 中我尝试调用 this.attributes['Fixation Cross'] 的行。

似乎在使 Stimulus 成为 ImageStimulus 的原型(prototype)时出了问题，因为 ImageStimulus.initialize() 无法访问 >this.attributes 在构造函数中为 Stimulus 类创建的变量。

其他人是否看到错误？

我有相当多的 Java、C++ 甚至 PHP 面向对象编程经验，但这是我第一次尝试 JavaScript 面向对象编程，所以我觉得我可能犯了一些简单的错误。

编辑:以某种方式解决了问题。

所以似乎有一个相当简单的解决方案。 Stimulus 函数从未被调用，它应该在 $this.base.constructor.call() 行中被调用。在 Stimulus.prototype 对象中，我添加了 constructor: Stimulus，现在可以正确调用 Stimulus。我不得不这样做似乎很奇怪(Stimulus() 不应该是它自己的构造函数吗？)，但它有效!

Stimulus.prototype = {
     constructor: Stimulus,
     _getStimulus: function() {...

有谁知道为什么会发生这种情况以及为什么我的修复有效？我试图理解我做了什么。

Answer 1

我明白了。您正在替换整个原型(prototype)，因此它正在杀死构造函数。通过显式设置构造函数，您将把它放回去。另一种方法是直接设置原型(prototype)方法而不是设置整个原型(prototype)。

为了让这个 fiddle 有用，请调出控制台并在单击“运行”之前设置一个断点。 http://jsfiddle.net/x2v7wv6j/

//In functions.js
function extend(base, sub, methods) {
    sub.prototype = Object.create(sub.prototype);
    sub.prototype.constructor = sub;
    sub.base = base.prototype;

    for(var name in methods) { sub.prototype[name] = methods[name]; }

    return sub;
}

//In classes.js
function Stimulus(module_id, unit_id, attributes) {
    this.attributes = attributes;
    this.module_id = module_id;
    this.unit_id = unit_id;
    //create some other class variables based on this.attributes, this.module_id, and this.unit_id
}

Stimulus.prototype._getStimulus = function() { //retrieve from database 
}
//other functions here

//In classes.js
ImageStimulus = (function() {
    var $this = function(module_id, unit_id, attributes) {
        $this.base.constructor.call(this, module_id, unit_id, attributes);
    };

    extend(Stimulus, $this, {
        initialize: function() {
            this.fixation_cross = this.attributes['Fixation Cross'] ? this.attributes['Fixation Cross'] : false;
            //do other stuff
        }
        //other functions here
    });

    return $this;
})();


var foo = function (module_id) {
    var stimulus_objects = [];

    var someLimit = 10;

    for(var i = 0; i < someLimit; i++) {
        //module_id is passed directly to this function
        var unit_id = "some source";//some source;
        var stimulus_attributes = "some source"; //some source;

        stimulus_objects[i] = new ImageStimulus(module_id, unit_id, stimulus_attributes);
        stimulus_objects[i].initialize();
    }
}

foo(1);