Let’s first look at what is this?

In traditional object-oriented languages, such as Java, the this keyword is used to represent the current object itself, or an instance of the current object, and can be used to obtain properties and invoke methods of the current object. In JS, this behaves slightly differently. ThisBinding. MDN: In most cases, how a function is called determines the value of this. In JS, the orientation of this is determined at call time, not creation time, which reverses the orientation of this. Briefly, this has run-time binding properties. For reference: developer.mozilla.org/zh-CN/docs/…

1, call location need to first understand the call location, call location is the function in the code is called, rather than declared location, by analyzing the call stack to reach the current location of all the functions called, can find the call location.

function kkb(){
	console.log('kkb');
	kkb2();
}
	
function kkb2(){
	console.log('kkb2');
	kkb3();
}
function kkb3(){
	console.log('kkb3');
}
kkb();
Copy the code

When we call KKB (), it calls KKB ()\ kkB2 ()\kkb3(); For kkb3 (); The call location is in kkB2 (), for kkB2 (); The call location is in KKB (), for KKB (); Global scope when calling a location; As you can see, the call location should be in the previous call of the currently executing function.

Global yamashita

In the context of global execution this refers to the global object.

Var === this. ===window

console.log(window === this); // true var A = 2; this.B = 4; window.C = 6; console.log(A + B + C); / / 12Copy the code

Function context Inside a function, the value of this depends on how the function is called;

1. Direct call

This points to the global variable

function kkb(){
    return this;
}
console.log(kkb() === window);
//true
Copy the code

Call (), the apply ()

This refers to the bound object;

var persons = {
    name:"kkb",
    age:8
}
function per(sex){
    console.log(this.name,this.age,sex)
}
per.call(persons,"girl");
per.apply(persons,["girl"])

Copy the code

As you can see, we define a per function to print name\age\sex, which has no name,age property. We bind this function to the Person object, and print the property of person, indicating that this refers to the object person. If you pass a primitive value (string, Boolean, or number type) as a binding object to this, the primitive value will be converted to its object form. Call and apply are the same in terms of the binding of this, except for their second argument

bind()

This will be permanently bound to the first argument of bind

Bind is similar to call and apply, but actually returns a modified function.

Bind can also have multiple arguments, and the arguments can be added as they are executed, but note that the arguments are in the order of the parameters.

Var a = {function(e,d,f){console.log(this.user); var a = {function(e,d,f){console.log(this.user); // Angela console.log(e,d,f); //1,2,3}} var b = a.f; var c = b.bind(a,1); C (2, 3);Copy the code

Arrow function

None of the arrow functions have their own this, pointing to the outer layer. Specific official website example: developer.mozilla.org/zh-CN/docs/…

3. As a method of an object

This refers to the object calling the function.

var person = {
  name: "kkb",
  getName: function(){
    return this.name;
  }
}
console.log(person.getName()); // kkb
Copy the code

4. As a constructor

This is bound to the new object being constructed.

Creating an object using a constructor actually performs several steps:

  1. Create a new object
  2. Point this to this object
  3. Assigning values to objects (properties, methods)
  4. Return this

So this is pointing to the object that we created.

As a DOM event handler

This refers to the element that triggered the event, which is the DOM node to which the initial event handler is bound.

var ele = document.getElementById("id");
ele.addEventListener("click",function(e){
  console.log(this);
  console.log(this === e.target); // true
})

Copy the code

HTML tags inline event handlers

This refers to the DOM element

Click Me

In many cases, jQuery’s this refers to DOM element nodes.

$(".btn").on("click",function(){
  console.log(this); 
});
Copy the code

To sum up:

If you want to determine a function’s this binding, you need to find where the function is called directly. We can then determine the binding object of this by following four rules in order:

Called by new: binds to the newly created object

Called by call or apply or bind: binds to the specified object

Called by context object: Binds to context object

Default: global object

Note: The arrow function does not use the above binding rules and determines this based on the outer scope, inheriting the this binding of the outer function call.