JSLint does not like .bind(this), but without it, this.obj cannot be accessed

Question

I am optimizing my code for user with JSlint, i came to a small issue that i am trying to find a solution to. In the code below which works, JSlint complains about .bind(this). If i remove .bind(this), then the code does not know what is "this.selectorCache.get()" nor "this.someFunc()".

Is there a way to get this code working by removing .bind(this)?

/*jslint this:true, devel: true */
/*global jQuery, $, window, SelectorCache */
"use strict";

$(function () {
    window.myApp = (function () {
        var _this = this;
        this.selectorCache = new SelectorCache();// selector cache function

        this.someFunc = function () {
            return 0;
        };

        this.selectorCache.get('#someID').click(function () {
            if (_this.this.selectorCache.get('#someOtherID').val() === 1){
                console.log(_this.someFunc());
            }
        }.bind(this));
    }.bind(this));
}.bind(this));

This is due to PhantomJS. https://www.npmjs.com/package/phantomjs-polyfill https://stackoverflow.com/questions/27659514/phantomjs-function-prototype-bind — evolutionxbox, Jul 18 '17 at 16:11
When I run your code thru jslint I get many comments but nothing to do with bind, so, what is the problem? — James, Jul 18 '17 at 16:14
@James I have updated the code that will show the .bind issue if you copy an paste it into editor with JSlint. If i remove all .bind(this) Jslint now errors out on : `window.myApp = (function () {` `[jslint] Don't wrap function literals in parens. (unexpected_parens)` — Alex D, Jul 19 '17 at 00:29
was able to get rid of "[jslint] Don't wrap function literals in parens" by changing second last closing bracket to `}());` will test some more as i will have access to my main code. — Alex D, Jul 19 '17 at 00:53
When .bind(this) is removed, this within window.myApp is undefined. I probably should ask a separate question regarding this. — Alex D, Jul 19 '17 at 17:48

Erazihel · Accepted Answer · 2017-07-18T19:54:14.427

2

Store the this context to another variable and use it in the callback.

I'd recommend you to use the bind(this) though and to find out why exactly JSLint complains.

window.myApp = (function () {
    var _this = this;

    this.selectorCache = new selectorCache();// selector cache function

    this.someFunc = function () {
        return 0;
    }

    this.selectorCache.get('#someID').click(function () {
        if _this.selectorCache.get('#someOtherID').val() === 1{
            console.log(_this.someFunc());
        }
    });
}

edited Jul 18 '17 at 19:54

answered Jul 18 '17 at 16:09

Erazihel

7,295
6
30
53

it complains with "use strict"; and specifically at the (.) part. I will test it out and will let you know. – Alex D Jul 18 '17 at 16:14
was not able to use const since it es6, although var _this = this; did the trick. – Alex D Jul 18 '17 at 19:02

score 0 · Answer 2 · answered Jul 18 '17 at 16:30

The solution @Erazhihel proposed should fix the problem. Another minimal way to fix it is by using ES6's arrow function instead.

/* global jQuery, $, window */
"use strict";

$(function() {
  window.myApp = (function () {

    this.selectorCache = new selectorCache();// selector cache function

    this.someFunc = function (){
        return 0;
    }

    this.selectorCache.get('#someID').click(() => {
      if (this.selectorCache.get('#someOtherID').val() === 1){
        console.log(this.someFunc());
      }
    };
  });
});

Interesting, although my app is in es5. – Alex D Jul 18 '17 at 20:02 — Alex D, Jul 18 '17 at 20:02

JSLint does not like .bind(this), but without it, this.obj cannot be accessed

2 Answers2