JSHint “可能严格违规。” 使用`bind`时

Question

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?

Answer 1

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.

Answer 2

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 );
}

Answer 3

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.

Answer 4

Try:

"use strict";

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

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

Answer 5

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();