amit
amit

Reputation: 10261

Managing this scope in javascript

I am trying to get this function to get the correct scope for its "this" operator, but no luck. Inside the AssetName = function(options){ code block, I want the "this" to point to the class AssetName. What is it that I am missing? The scope of this right from the beginning is window.

Assetname: function(options){

    var Base = WM.Utility.GenericFilter()
    options = options;

    if (typeof Object.create !== "function") { 
        // For older browsers that don't support object.create
        Object.create = function (o) {
            function F() {}
            F.prototype = o;
            return new F();
        };
    }       

    var AssetName = {};
    AssetName = function(options){
        return function(){
            var self = this;

            debugger;
            // Call the super constructor.
            Base.call(this, options);

            this.$mod.on('change', '#asset-name-quick-search', self, 
                this.search);
            this.$mod.on('click', '.close', self,  this.remove);

            this.initTypeAhead();
            this.$selectionList = this.$mod.find("#asset-name-selection-list");

            this.assetListItems = [];

            return this;    
        }(options, AssetName);

    }

    // The AssetName class extends the base GenericFilter class.
    AssetName.prototype = Object.create(Base.prototype);

    AssetName.prototype.initTypeAhead = function(){
        var options = {};
        options.source = _.pluck(this.collection, 'asset_name');
        options.items = 8;
        this.$mod.find('#asset-name-quick-search').typeahead(options);    
    };

    AssetName(options);
    return AssetName;
},

Upvotes: 0

Views: 158

Answers (2)

pktangyue
pktangyue

Reputation: 8524

AssetName = function(options){
        return function(){
            var self = this;

            debugger;
            // Call the super constructor.
            Base.call(this, options);

            this.$mod.on('change', '#asset-name-quick-search', self,  this.search);
            this.$mod.on('click', '.close', self,  this.remove);

            this.initTypeAhead();
            this.$selectionList = this.$mod.find("#asset-name-selection-list");

            this.assetListItems = [];

            return this;    
        }(options, AssetName);

    }

change to

AssetName = function(options){
        var aa =  function(){
            var self = this;

            debugger;
            // Call the super constructor.
            Base.call(this, options);

            this.$mod.on('change', '#asset-name-quick-search', self,  this.search);
            this.$mod.on('click', '.close', self,  this.remove);

            this.initTypeAhead();
            this.$selectionList = this.$mod.find("#asset-name-selection-list");

            this.assetListItems = [];

            return this;    
        };
        aa.call(AssetName,options);

    }

In your code, the function aa is called as aa(options); so this is window.

[update]

I fix the bug with the following code:

AssetName =  function (options) {
    AssetName = function (options) {
        var aa = function () {
            alert(this);
            return this;
        };
        aa.call(this, options);
    }
    AssetName.prototype.initTypeAhead = function () {
        alert(1);
    }

    return new AssetName(options);;
};
var test = AssetName();
test.initTypeAhead();

But I suggest how about writing the code like bellow:

AssetName =  function (options) {
    AssetName = function (options) {
            alert(this);
    }
    AssetName.prototype.initTypeAhead = function () {
        alert(1);
    }

    return  new AssetName();
};
var test =  AssetName();
test.initTypeAhead();

Upvotes: 1

ericponto
ericponto

Reputation: 736

You cam just move your var self = this out side of the anonymous returned function. Then you can use just use self.

Upvotes: 0

Related Questions