JS: Javascript closure issue in prototype instance

Question

As for a JS-newbie, I'm struggling with JS-closure. Googled enough, though can't understand why "this" is not available in "store" function. Any help will be appreciated:

;(function (win) {
var _af = function(storeObjectName, storeObjectValue) {
    var self;
    if (_af.prototype.instance) {
        self = _af.prototype.instance;
    } else {
        self = Object.create(_af.prototype);
        _af.prototype.instance = self;
        self._init();
    }
    if (arguments.length == 1) return self.fire(storeObjectName);
    if (arguments.length == 2) self.store(storeObjectName, storeObjectValue);
    return self;
};

_af.prototype = {
    afVariable: '_af',
    afObject: {},

    _init : function(){
        this.afObject = this.get(self.afVariable);
    },

    store : (storeObjectName, storeObjectValue)=>{
        // This throws the error, that this.get is not defined
        this.get('_af');
    },

    get : storageObject=>{
        if (!storageObject)
            this.afObject = '_af';
        else
            this.afObject = '_someother'
    }
}
win._af = _af;
}(window));

What is your test? Are you calling new _af and then running .store()? Or are you just trying _af.store()? — somethinghere
– somethinghere, Commented Jan 5, 2017 at 14:22
Related Arrow function vs function declaration / expressions: Are they equivalent / exchangeable? — Felix Kling
– Felix Kling, Commented Jan 5, 2017 at 14:27

Ovidiu Dolha · Accepted Answer · 2017-01-05 14:56:51Z

2

It's because you use a lambda expression ((...) => ...) instead of function() { ....

In JS this depends a lot on the context. In your case, since the prototype is an object, whenever you want to use this to refer to that object, you must do it in a function defined in the object like:

store : function(storeObjectName, storeObjectValue) {
    // This throws the error, that this.get is not defined
    this.get('_af');
},

or (also correct):

store(storeObjectName, storeObjectValue) {
    // This throws the error, that this.get is not defined
    this.get('_af');
},

Note you are doing it correctly for _init, but not for store and get

When you use the lambda syntax, this will refer to the current this, when a function is created, so it will be window.

Also avoid using get as a function / or any other name because it is used for defining getters.

edited Jan 5, 2017 at 14:56

answered Jan 5, 2017 at 14:23

Ovidiu Dolha

5,4132 gold badges24 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Max Koretskyi Over a year ago

that's correct, the only thing is that When you use the lambda syntax, this will refer to the outer object (in this case function (win)) - it will refer to the current this, when a function is created, so it will be window, not function (win)

Felix Kling Over a year ago

FWIW, the official term is "arrow function". Also, get is not a keyword.

SmileCold Over a year ago

Thanks, changing the lambda expression to regular function worked.

Collectives™ on Stack Overflow

JS: Javascript closure issue in prototype instance

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related