Why β€œthis” refers to the global object in closure

var num = 1;

var obj = {

    num: 2,

    getNum: function() {
        return (function() {
            return this.num;
        })();
    }

}

console.log(obj.getNum()); // 1

the result of the JavaScript code is 1. Thus, it thisrefers to a global object, not an object.

+4
source share
4 answers

All things being equal, it thisrefers when it is used directly inside a function, an object whose function is the method (member), when this function is called in the usual way of obj.method(). Straight means straight; use inside the function nested in this method, regardless of whether it is called anonymously or immediately or not .

In your case

return (function() {
    return this.num;
})();

- , this, this - ( ).

, , this, , . , this, .

, :

getNum: function() {
  return (() => this.num)();
}

, this.

, :

getNum: function() {
  var self = this;
  return function() {
    return self.num;
  }();
}

, , , , . - , :, .

:

getNum: function() {
  return function() {
    return this.num;
  }.call(this);
}

this this getNum, call.

. "his" ?.

""

, , "" " ". , , - , , , . :

  • "" () .

  • , .

, " ".

+2

this , , .

this, .

. undefined. , undefined - .

, , obj.getNum(). In , , this.

:

var num = 1;
var obj = {
  num: 2,
  getNum: function() {
    var outerThis = this;
    return (function() {
      return {
        innerThis: this,
        outerThis: outerThis,
        innerNum: this.num,
        outerNum: outerThis.num
      };
    })();
  },
  getNumStrict:function() {
    "use strict"
    var outerThis = this;
    return (function() {
      return {
        innerThis: this,
        outerThis: outerThis,
        outerNum: outerThis.num
      };
    })(outerThis.num);
  }
}
console.log(obj.getNum());
// Object {innerThis: Window, outerThis: Object, innerNum: 1, outerNum: 2}

console.log(obj.getNumStrict());
// Object {innerThis: undefined, outerThis: Object, outerNum: 2}

, this - JavaScript, .

, , :

var num = 1;
var createHaveNum = function(initial) {
  var num = initial;
  var getInterface;
  var setNum = function(x) {
    num = x;
    console.log("setting num");
  };
  var getNum = function() {
    console.log("getting num");
    return num;
  };
  getInterface = function() {
    return {
      getNum: getNum,
      setNum: setNum
    };
  };
  console.log("Instance is initialized.");
  return getInterface;
};

var obj = createHaveNum(2); // create an object, obtain a reference in form of a function

var i = obj(); // obtain an interface
var j = obj(); // do it again, interface to same object
j.setNum = undefined; // does not break internal state, object is intact
console.log(i.getNum());
i.setNum(3);
var getNum = i.getNum; // reference function
console.log(getNum()); // invoke without a scope, no problem
var other = {getNum: i.getNum}; // put in another object
console.log(other.getNum()); // call with another context, no problem - same scope as before.
/*
Instance is initialized.
getting num
2
setting num
getting num
3
getting num
3
*/
0

obj , , . , , .

, obj. ( = ), obj.

, ES , ES5 ( ) -. , .

-1

"" , getName, :

getNum: function() {

    var that = this; //the enclosing object
    return (function() {

        return that['num'];

    })();

}
-1

Source: https://habr.com/ru/post/1607298/


All Articles