No matter in work or interview, this pointing question is often encountered. So this article lists common pointing problems for you to avoid stepping on pits. First of all, the value of this in a function is determined when the function is called, not when the function is defined. In other words, the point of this depends entirely on where the function is called. Because the value of this is part of the scope, every time a function is called, it is in a different scope.

1: in the global environment

In browser strict mode (as opposed to Node), this points to Window by default. Immediate execution function, default timer function, this also refers to window.

    console.log(this === window) // true
    function fn(){
        console.log(this === window)
    }
    fn() // true
    (function(){
        console.log(this === window) // true
    })()
    setTimeout(function() {
      console.log(this === window); //true
    }, 500)
Copy the code
2: in object functions

If a function is called as a property of an object, this in the function refers to that object.

Function (){console.log(this.x)}, function(){console.log(this.x)}, s: Function (){console.log(this.x) // 20 function fn(){console.log(this.x)} return fn But it is still a normal function, this still refers to window}} var fn = obj.f fn() // 10 obj.f() // 20 obj.s()() // 10 obj.s() executes return fn, and then fn() has a value of 10Copy the code

Function (){console.log(this.x)} = function(){console.log(this.x)} = function(){console.log(this.x)} = function(){console.log(this.x)} = function(){console.log(this.x)} = function(){console.log(this.x)}); In obj.f(), this refers to obj, so this.x = obj.x, and the output is 20.

3: in the constructor

The properties of the instance created by the constructor point to the constructor’s prototype.

Function Man(name){this.name = name} man.prototype.getName = function(){// this points to the prototype object of Man Tom = new Man(' Tom ') console.log(tom.getName()) // 'Tom' // Do not modify the return value of the constructor, it will change the default pointer, Function Man(name){this.name = name return {name: Prototype = function(){return this.name} const Tom = new Man(' Tom ') console.log(tom.name) // 'lily'Copy the code
4: arrow function

The arrow function’s this is bound when the function is defined, not during execution; the arrow function’s this depends on the scope in which the function was created.

Var x= 10 var obj ={x: 20, f1: function(){console.log(this.x)}, f2: function(){console.log(this.x)}, f2: () => {console.log(this.x) // No this, pointing to the upper level of this, Var name = "jack" var man = {name: 'Tom ', f1: {name:' Tom ', f1: {name: 'Tom ', f1: Var that = this setTimeout(()=>{console.log(this.name, console.log)) that === this) // 'tom' true }, 0) }, f2: Function (){// This is not equal to this under the setTimeout arrow function, Var that = this setTimeout(function(){console.log(this.name, that === this) // 'jack' false console.log(that.name, that === this) // 'tom' false }, 0) } } man.f1() // 'tom' true man.f2() // 'jack' falseCopy the code

SetTimeout points to window by default, but in the arrow function, the scope of this is in man, so this points to man. In other words, this can ignore the surrounding setTimeout timer function and look at the scope of the layer and.

5: in the DOM node

Especially in the React JSX syntax, we usually have to change the this pointer to the DOM to get the specified handler function. So you usually need to use the bind event in the function declaration.

// html <button id="btn">myBtn</button> // js var name = 'window' var btn = document.getElementById('btn') btn.name = 'dom' var fn = function (){console.log(this.name)} btn.addEventListener('click', F ()) // this points to BTN btn.adDeventListener ('click', f.bind(obj)) // this points to windowCopy the code

6. References:

  • Js to this
  • Understand this thoroughly
  • Thoroughly understand the js this pointing problem

The case mentioned in this article is relatively common. If you want to understand this more deeply, you can refer to an article called Portal in Github