Detailed explanation of this pointing in JavaScript

foreword

The problem of pointing in JavaScript thishas always been a long-standing problem. Every time I encounter it, I basically rely on it. When I rarely get it right, the reason is that my understanding of the pointing is not in place this. Today, I will take everyone to analyze thispointing together. question.
Before the analysis, we need to understand the two terms call stack and call locationthis . Only by understanding these two terms can we understand the problem.
The call stack is all the functions that need to be executed first to execute the function, and the calling location is the calling location of the previous executing function of the current executing function. Let's see an example

function fn1(){  // 调用栈fn1
  console.log('fn1')  
  fn2()  // fn2调用
}
function fn2(){  // 调用栈fn1->fn2
  console.log('fn2')
  fn3() // fn3调用
}
function fn3(){ // 调用栈fn1->fn2->fn3
  console.log('fn3')
}
fn1() // fn1调用

fn1You only need to execute yourself, so the calling location is the global object window.
fn2The call will go through fn1->fn2, so the call location is fn1in.
fn3The call will go through fn1->fn2->fn3, so the call location is fn2in.

this binding rules

After understanding the calling location, let's talk about thisthe binding rules.
1. Default binding
If the function is executed without any modification, it is the default binding.

var a = 1
function fn(){
  console.log(this.a)
}
fn() // 1

fnThere is no modification when calling, so it is bound to the global object by default this. It should be noted that the default binding cannot be performed in strict mode, and the function output is undefined
2. Implicit binding
. Implicit binding needs to determine whether there is a context object at the calling location , that is contained by an object.

var a = 1;
function fn(){
  console.log(this.a)
}
const obj = {
  a:2,
  fn:fn
}
obj.fn() // 2

The call site uses objthe context to refer to the function, so the end result is 2 instead of 1.

function fn(){
  console.log(this.a)
}
var obj = {
   a: 2,
   fn: fn
}
var fn1 = obj.fn
var a = 1;
fn1() // 1

In the above example, although fnthere is a context object, it can be understood as a function directly declared here after obj.fnassigning to it . There is no context object, so the final result is 1, which is implicit loss. 3. Display binding Display binding is to use keywords to specify the binding object for the function. The display binding point cannot be modified, no matter how it is called, it points to the binding content.fn1fn1

apply、call、bindthisthis

function fn(){
  console.log(this.a)
}
var obj = {
  a:2
}
var fn1 = function(){
  fn.apply(obj) // 使用call、bind结果一样
}
fn1() // 2
fn1.call(window)  // 无法更改

4. new binding
new binding will create a new object; this object will execute the [Prototype] link; this object will be bound to the function call this; if the function has no return value, the new operation will automatically return the object

function fn(){
  console.log(this.a)
}
var fn1 = new fn(2)
console.log(fn1.a) // 2

Summarize

1. newIf there is binding, thisbind the returned object.
2. If there is bind、call、apply, thisbind the specified object.
3. If there is a context object, bind the context object.
4. If there is none, it will be bound by default.