JSHint "Possible strict violation." when using `bind`

JavascriptJshint

Javascript Problem Overview


Consider this simple code:

"use strict";

var obj = {
    f: function() {
        this.prop = 'value';
        g.bind( this )();
    }
};

function g() {
    console.log( this.prop );
}

If I try to validate this code, jshint gives me the error Possible strict violation. where I call console.log( this.prop );. This is because this is undefined in strict mode in a function.

But I'm binding this function before calling it, so this is the correct object.

I'm using this "design pattern" to avoid cluttering the main object. Passing the properties in the parameters will also clutter the function, so I refuse to do this. Besides, this is exactly what bind is for.

Is there a way for JSHint to let me do this?

Javascript Solutions


Solution 1 - Javascript

It is extremely hard to detect this case without running the code. You can use option validthis to suppress this warning:

"use strict";

var obj = {
    f: function() {
        this.prop = 'value';
        g.bind( this )();
    }
};

function g() {
    /*jshint validthis:true */
    console.log( this.prop );
}

It is to be noted that jshint comments are function scoped. So the comment will work for the function g and its inner functions, not just the next line.

Solution 2 - Javascript

You can also achieve the same effect if you modify your code to the following to avoid using this all together.

"use strict";

var obj = {
    f: function() {
        this.prop = 'value';
        g.bind( null, this )();
    }
};

function g(self) {
    console.log( self.prop );
}

Solution 3 - Javascript

Here's a simpler solution that doesn't require any change of pattern or specific markup for jshint:

"use strict";

var obj = {
    f: function() {
        this.prop = 'value';
        G.bind( this )();
    }
};

function G() {
    console.log( this.prop );
}

jshint assumes that you're following the convention that functions starting with an uppercase letter are classes which will be instantiated and always having this available.

Solution 4 - Javascript

Try:

"use strict";

var obj = {
    f: function() {
        this.prop = 'value';
        g.bind( this )();
    }
};

var g = function() {
    console.log( this.prop );
}

Solution 5 - Javascript

This is a different "design pattern" as you put it, it achieves the same thing, but avoids the problem entirely.

"use strict";

function obj() {
    this.prop = '';
}

obj.prototype.f = function obj_f() {
    this.prop = 'value';
    this.g();
};

obj.prototype.g = function obj_g() {
    console.log( this.prop );
};

you would invoke it like thus:

var myO = new obj();
myO.f();

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionFlorian MargaineView Question on Stackoverflow
Solution 1 - JavascriptAnton KovalyovView Answer on Stackoverflow
Solution 2 - JavascriptGeorgeView Answer on Stackoverflow
Solution 3 - JavascriptxgrtlView Answer on Stackoverflow
Solution 4 - JavascriptMichał WojasView Answer on Stackoverflow
Solution 5 - JavascriptGeorgeView Answer on Stackoverflow