Yesterday I was asked about the direction of this in the interview, and I actually said that I was a little bit depressed. It is also true that I care less and less about basic things for half a year after graduation, and I write pages endlessly every day. Later I will learn to record a little bit ~ today I will start from this.

  1. This refers to the object (non-arrow function) on which the function is called. {1. Global: window; 2. Function calls. }
  2. Under the constructor,this is bound to the new object being created.
  3. The arrow function has no this at all, and its this point depends on what this points to when it is defined. (Pointing to the environment)

Explicit binding Implicit binding new operation default binding arrow function.

1. Specific case analysis

Function a(){var x = 'c '; console.log(this.x); // undefined console.log(this); // print window} a();Copy the code

In the first case,this refers to the object calling its function. In this case, the object calling function A is Window.

Var a ={var x = 1; Function (){console.log(this.x)}} a.f (){console.log(this.x)}} a.f ()Copy the code

This refers to the object on which the function is called, and the object on which this is called is a.

Var a = {var x = 1; Fn :function(){console.log(this.x)}} window.a.n ()Copy the code
Var a= {x= 0; B :{x=' x '; Fn: function () {the console. The log (this. X) / / output small white}}} A.B.F n ()Copy the code

In non-strict mode, if a function has this but is not called by a parent object, then this refers to window(in strict mode, this is undefined). 2. If a function has this and the function is called by a parent object, then this refers to the parent object. 3. If a function has this and more than one object in it, even if this is called by the outermost object, this refers only to the object above it.

Var a = {x= 0; B: {/ / x = 'white' fn: funciton () {the console. The log output (this. X) / / undefined}}} A.B.F n ()Copy the code

The outermost object a is called, but this is undefined because there is no definition of x in the object b above this.

Var a ={x= 0; B :{x=' x '; fn:function(){ console.log(this.x)//undefined console.log(this)//window } } } var i =a.b.fn i()Copy the code

Fn is referenced by B first, but!! There is no direct execution, so the last execution points to the window.

2. Constructor

Function Fn(){var x = 'x '; } var a = new Fn() console.log(a.xCopy the code

For constructors,new can change the direction of this to point to object A. The new keyword actually creates an instance of an object. It’s just created, it’s not executed, and the call to Fn is on object A, so this refers to a. (A has the user in Fn because using the new keyword is equivalent to copying into a.)

When this encounters return

Function Fn(){this.x =' this.x '; return{}; } var a =new Fn(); console.log(a.x) //undefinedCopy the code
Function Fn(){this.x= 'this.x '; return function(){} } var a = new Fn(); console.log(a.x) //undefinedCopy the code
Function Fn(){this.x =' this.x '; return undefined } var a = new Fn(); The console. The log (a.x) / / whiteCopy the code

Summary: If the return value is an object, then this only wants that object; If it is not an object, then this still refers to the function instance. In addition, null is special. Although null is also an object, if return null, this points to the function instance.

The apply and call

The internal this binds to the first object specified by Call&Apply and attempts to convert to an object if it is not.

function Fn(a,b){ return this.a+this.b+c+d; } var c={a:1,b:3}; Fn. Call (c, 3, 4) / / 1 + 3 + 3 + 4 = 11 Fn. Apply (c [3, 4]), / / 1 + 3 + 3 + 4 = 11Copy the code

bind

Bind was introduced in ES5, on the prototype of functions, function.prototype.bind. With bind, a function will always be bound to its first argument object, no matter when it is called.

Arrow function

  1. The call/apply/bind methods do not change the orientation of this for arrow functions.
  2. The arrow function does not bind its own this; it captures the context’s this as its own this value.
Function Fun(){setTimeout(()=>{console.log('id:',this.id),1000})} var id =1; Fun.call({id:2}); // The environment in which the arrow function is definedCopy the code