使用该类的实例时，我的javascript类中的变量未定义

Question

I have declared this javascript class:

var TablixColumns = function(){
this.g = 'wtf';
this.tablixColumns = []; //[];
return {
    addTablixColumn: function(tablixColumn){
        alert(this.g);
         //this.tablixColumns.push(tablixColumn.getTablixColumn());
    }
}
};

my problem is that when I try this: alert(this.g) the alert comes out undefined of course my initial function definition read: this.tablixColumns.push(tablixColumn.getTablixColumn());

but then I get the error that reads something like "No Method push of undefined"

what's weird is I have this class declaration:

         var TablixColumn = function(){
            columnWidth = '<Width>3.135cm</Width>'; //default width value

            return{
                setColumnWidth: function(width){
                    this.columnWidth = '<Width>' + width + 'cm</Width>';
                },
                getTablixColumn: function(){
                    return '<TablixColumn>' + this.columnWidth + '</TablixColumn>';
                }
            }
        };

and the TablixColumn class works fine, and yes, I have declared this.g and this.tablixColumns without the 'this.' part, but it's just refusing to work! I'm going to kill someone if this doesn't work tonight can someone help me please?

Answer 1

You need to set a reference to the current object ( this ) outside the nested function expression. Here's how your code should look:

var TablixColumns = function() {
    ...
    var self = this;

    return {
        addTablixColumn: function(tablixColumn) {
            alert(self.g);
        }
    };
};

You can even set a property to the returned object literal if you want:

// ...
    return {
        g: 'wtf',
        addTablixColumn: function(tablixColumn) {
        alert(this.g); // 'wtf'
        }
    };
// ...

Note that you shouldn't use TablixColumns as a constructor if you're returning from it like this. You're using two idioms here; prototypal inheritance and the module pattern. Are you going to instantiate the constructor with new ? If so, then don't return the object literal. Rather, set the methods on the prototype of the function:

var TablixColumns = function() {
    this.g = 'wtf';
    this.tablixColumns = [];
};

TablixColumns.prototype.addTablixColumn = function addTablixColumn() { ... };
TablixColumns.prototype./* ... */

...

Otherwise, don't use this inside the constructor. Simply make the properties normal variables.

Answer 2

Okay guys so I figured out my problem:
all the references to variables of the current instance should not have been preceded by the this. keyword so this is how my declaration looks now:

        var TablixColumns = function(){
           g = 'wtf';
           tablixColumns = []; //[];
           return {
               addTablixColumn: function(tablixColumn){
                   alert(g);
                   tablixColumns.push(tablixColumn.getTablixColumn());
               }
           }
        };

Thanks @Bergi for pointing this out