This points to a detailed solution

The direction of this is not determined during function definition, but only when the function is executed

Normally this refers to the object on which it is called

Let’s look at five cases where this can be called

Mind mapping

​

Analysis of the

1. Called as an object method

This refers to the object when the function is called as an object method

var obj = { age: 18, fn: function () { console.log(this === obj); //true console.log(this.age); //18 } } console.log(obj.fn());Copy the code

2. When called as a normal function

This refers to the global object Window

In strict mode this is specified not to refer to the whole world or undefined

window.age = 18; function fn() { console.log(this.age); //18 } fn()Copy the code

When called as a constructor

The “this” part of the constructor is a bit special. First, let’s look at the difference between a constructor and a normal function

// The constructor is used to initialize an object to assign initial values to its member variables. It is always used with new

What new does in the constructor

Create a new object in memory

//2. Make this point to the new object

//3. The code inside the constructor adds attributes and methods to the new object

//4. Return the new object, so we usually don’t need a return inside the constructor

With that in mind, let’s look at this inside the constructor

This in the constructor refers to the instantiated object created by new (without return)

If there is a return inside the constructor and it is an object, the final result returns that object

As long as the constructor does not return data or returns the primitive data type this still points to the instance

function Fn() { this.age = 18; 20 return {age: 20}} let a = new Fn(); console.log(a.age); / / 20Copy the code

4. This in the arrow function

The arrow function doesn’t have its own this it just inherits this from one level up its scope chain

this.age = 20; var obj = { age: 18, fn: () => { console.log(this.age); //20 } } obj.fn()Copy the code

Call or apply calls

Call and apply can change this reference compared to normal functions

The only difference for apply is that the format of the pass parameter is different

Function fn(x, y) {console.log(x, y); console.log(this); //this points to window console.log(x + y); } var o = {name: 'Andy'} fn.call()//call can call the function fn.call(o, 1, 2)// the first value is this, followed by the argumentCopy the code

Of course, you can change this to refer to bind but bind doesn’t execute a function and I won’t expand on that

conclusion

The function this points to

  1. In normal functions this is window and in strict mode undefined
  2. The object or method this points to the caller
  3. This in the constructor refers to the instance object. (This in the prototype object also refers to the instance object. This is not expanded in this article.)
  4. Arrow functions do not have their own this
  5. Call and apply can change the this reference

Just a few more things

  1. The this in the bind click event refers to the caller
  2. The this in the timer points to the window
  3. This in the function immediately points to the window

When the function executes, see if it has a dot in front of it. If it does, this is the same as the dot. If not, this is the window

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — – end scattering flowers — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — –

— — — — — — — — — — — — — — — – accept bosses corrections and advice, welcome to leave a message — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — –

​