使用JavaScript原型并访问基类字段。

时间:2013-04-24 18:28:09

标签: javascript

我是JavaScript中的伪类和原型的新手,我在实现它时遇到了一些困难。我想要做的是有一个带有一些字段的基类'class'然后用我定义为对象文字的方法创建该基类的原型。我在这样做之间挣扎,只是在我的基类中使用单例作为我的方法。我认为虽然这样做的方式更优雅,但我认为每次创建新对象时我都不会创建每个方法。

无论如何,我遇到的小问题是在我的方法中引用我的基类的字段。因为当我尝试将它们作为this.field引用时,这是指当前的函数/范围,但我希望它引用新创建的对象。有没有解决这个问题,或者我应该改变我创建方法的方式。

下面是一些代码,我认为这些代码会让我更清楚我在做什么以及我遇到的问题。

function BaseClass() {
    this.items[];
    this.fieldOne = "asdasd";
}

BaseClass.prototype = {
    methodOne: function (input) {
        function addElement(a. b) {
            var element = {};
            element.prop1 = a;
            element.prop2 = b;
            //The issue I am having is that items is undefined, how can I refernce the parent class object. 
            this.items.push(element);
        }
        function traverse() {
            //go through a list and add a bunch of elements
            addElement("ASdasd", 324);
        }
    },
    methodTwo: function () {
        //see now fieldOne is asdasd
        console.log("fieldOne" + fieldOne);
    }
}

var forTest = new BaseClass();
forTest.methodTwo();

所以是的,我希望在父类中有一些我可以从任何方法访问的字段,但我宁愿不只是将函数放在我的基类中,这样我每次创建新对象时都不创建每个方法来自BaseClass。是否有解决方法或更好的方法来实现这一点?

提前感谢您的帮助。

2 个答案:

答案 0 :(得分:2)

您在嵌套函数中失去对this的引用。你可以用以下方法解决这个问题:

methodOne: function (input) {
    var self = this;
    function addElement(a. b) {
        var element = {};
        element.prop1 = a;
        element.prop2 = b;
        //The issue I am having is that items is undefined, how can I refernce the parent class object. 
        self.items.push(element);
    }
    function traverse() {
        //go through a list and add a bunch of elements
        addElement("ASdasd", 324);
    }

    // You never called anything?
    // is traverse() what you wanted?
    traverse();
},

答案 1 :(得分:1)

 methodOne: function (input) {
    function addElement(a. b) {
        var element = {};
        element.prop1 = a;
        element.prop2 = b;
        //The issue I am having is that items is undefined, how can I refernce the parent class object. 
        this.items.push(element);
    }

这里的问题是您遇到了javascript设计错误,即子this中的function绑定到了错误的对象。对此的使用解决方法如下:

methodOne: function (input) {
  var that = this;
  function addElement(a, b) {
    ...
    that.items.push(element);
  }
}

实际上它与全局对象绑定在一起:

var o = {
  f : function(){
    var g = function(){
      this.name = "test";
    };
    g();
  }
};
o.f();
console.log(name); // "test"