访问父类中的变量

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();
}

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

未捕获的类型错误：无法读取未定义的属性“固定交叉”

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

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

其他人看到错误了吗？

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

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

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

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

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

Answer 1

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

为了使这个小提琴有用，请在单击运行之前打开控制台并设置一个断点。 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);