What is this

This represents the context object of the current execution environment, which is a proxy.

For example, if the class director of Class A says, “This class has the worst class I’ve ever managed,” “This class” refers to Class A, because the context is class A.

Now that this is based on the execution environment, what are the common environments?

This common scenario

1. As a method call on an object, this refers to the object on which it was called

let obj={
  a:1.fn(){
    console.log(this.a)
  }
}
obj.fn() // obj calls fn(), the context object of the current execution environment is obj, so this is 1
Copy the code

2. Function direct call and call,apply

var obj={a:1};
function test(){
  console.log(this)
  function fn(){
    console.log(this)
  }
  fn()
  return fn
}
test() // window window
test.call(obj) // obj window
test().call() //window window window
test().call(obj) //window window obj
Copy the code
var a=1; // window.a = 1
window.b=1;
let b=2 // Exists in script scope and does not hang on the window property
let fn2=function(){  // Exists in script scope and does not hang on the window property
  console.log(this.a,this.b)
}
function fn(){ // widow.fn = function fn(){}
  console.log(this.a,this.b)
} 

fn() / / 1, 1
fn2() / / 1, 1
window.fn() / / 1, 1
window.fn2() // Error: Window has no fn2 method
Copy the code

Explanation:

  1. Call and apply specify the context object, so this refers to the context object.
  2. Function directly called,fn()Can be understood asfn.call()That is, the context object is not specified,
  3. fn.call()In non-strict mode, this would point to the window,
  4. fn.call()In strict mode, this refers to undefined.

4. Constructor this

This refers to the instance coming out of new and has the highest precedence over bind,call, and apply

5. Use this inside the arrow function

Arrow functions do not have their own this, call, apply, bind are invalid, and use as constructors will report an error.

But just remember that this in the arrow function is already bound to this in the parent scope, so it points to whoever this points to in the parent scope

The node environment

Node implements the CommonJS specification (which regulates module references, module definitions, and module identification), ensures that every JS file is a module, and imports and exports modules through require and module.exports. What’s special about this in the node JS file?

  1. Exports refers to module. Exports, but if module.exports refers to an object, this and module.exports refer to two objects.
  2. In node, the globalThis object points to global, not window, so fn.call() refers to global in non-strict mode and undefined in strict mode. Strict mode is enabled by default for the ES6 module
console.log(this) // module. Exports ={}
var a=1
console.log(a) / / 1
console.log(this.a) // undefined
exports.a=2 // module.exports. A =2
console.log(this) // {a:2}

module.exports={a:3} // module.exports points to new objects that are not the same as this
console.log(module.exports) // {a:3}
console.log(this) // {a:2}
function fn(){
  console.log(this)
}
fn() // global object equivalent to fn.call(global)
fn.call(this) // {a:2}
Copy the code

conclusion

Judge this pointing rule:

  1. Whether the current running environment is browser or Node;
  2. Is it inside the arrow function? If yes, see article 4;
  3. Is it inside a constructor? If so, see article 3;
  4. Whether it is called as a method, see article 1;
  5. Otherwise, look at article 2 and distinguish strict mode