In-depth explanation of JavaScript this keyword

1. Introduction

The this keyword is one of the most complex mechanisms in JavaScript. It is a very special keyword that is automatically defined in the scope of all functions. For JavaScript developers who have not invested the time to learn the this mechanism, this binding has always been a very confusing thing.

2. Understand this

The first step to learning this is to understand that this refers neither to the function itself nor to the lexical scope of the function. You may have been misled by such explanations, but in fact they are all wrong. The value of this will change depending on where the function is used. But there is always a principle that this in JS represents the subject of the current behavior execution. In JS, the main research is on this in the function, but it does not mean that this only exists in the function. This is actually a binding that occurs when the function is called. What it points to depends entirely on where the function is called. How to distinguish this?

3. Who is this?

This depends on the situation. There are five common situations:

1. When a function is executed, first check whether there is a "." in front of the function name. If there is, the person in front of the "." is this person; if not, this is window

function fn(){
 console.log(this);
}
var obj={fn:fn};
fn();//this->window
obj.fn();//this->obj
function sum(){
 fn();//this->window
}
sum();
var oo = {
 sum:function(){
 console.log(this);//this->oo
 fn(); //this->window
 }
};
oo.sum();

2. This in a self-executing function is always window

(function(){ //this->window })();
 ~function(){ //this->window }();

3. Bind a method to an event of an element. When the event is triggered, execute the corresponding method. The this in the method is the current element, except for IE6~8, which uses attachEvent (a famous bug in IE)

DOM zero-level event binding

oDiv.onclick=function(){
 //this->oDiv
 };

DOM secondary event binding

oDiv.addEventListener("click",function(){
 //this->oDiv
 },false);

When using attachEvent in IE6~8, the default this refers to the window object

oDiv.attachEvent("click",function(){
 //this->window
 });

Most of the time, we encounter event binding, such as the following example. For IE6~8, you don't need to be too serious about using attachEvent.

function fn(){
 console.log(this);
}
document.getElementById("div1").onclick=fn; //this in fn is #div1
document.getElementById("div1").onclick=function(){
console.log(this);//this->#div1
fn();//this->window
};

4. In the constructor mode, the this in this.xxx=xxx that appears in the class (function body) is an instance of the current class

function CreateJsPerson(name,age){
//The object created by the browser by default is our instance p1->this
this.name=name;//->p1.name=name
this.age=age;
this.writeJs = function() {
console.log("my name is"+this.name +",i can write Js");
 };
//The browser returns the created instance by default}
var p1=new CreateJsPerson("尹华芝",48);

One thing must be noted: for a property value (method) in a class, the this in the method needs to be checked to see whether there is ".", in front of it when the method is executed, in order to know who this is. You may wish to take a look at the following example to understand what it means.

function Fn(){
this.x = 100; //this->f1
this.getX=function(){
console.log(this.x); //this->need to see when getX is executed}
}
var f1=new Fn;
f1.getX(); //-> this in the method is f1, so f1.x=100
var ss=f1.getX;
ss(); //->this in the method is window->undefined

5.call, apply and bind

Let's first look at a problem. How do we bind this to obj in the following example?

var obj={name:"Boat in the waves"};
function fn(){
console.log(this);//this=>window
}
fn();
obj.fn(); //->Uncaught TypeError: obj.fn is not a function

If you bind obj.fn() directly, the program will report an error. Here we should use fn.call(obj) to implement this binding obj. Next, we will introduce the call method in detail:

The function of call method:

①First, we execute the call method on the prototype. When executing the call method, we change the this in the fn method to the first parameter value obj; then we execute the fn function.

②Call can also pass values. The values ​​obtained in strict mode and non-strict mode are different.

//In non-strict mode var obj={name:"浪里行舟"};
function fn(num1,num2){
console.log(num1+num2);
console.log(this);
}
fn.call(100,200);//this->100 num1=200 num2=undefined
fn.call(obj,100,200);//this->obj num1=100 num2=200
fn.call();//this->window
fn.call(null);//this->window
fn.call(undefined);//this->window

//fn.call() in strict mode; //this->undefined in strict mode
fn.call(null); // in strict mode this->null
fn.call(undefined); // in strict mode this->undefined

**The functions of the apply and call methods are exactly the same, both are used to change the this keyword of the method and

Executed, and the rules for the case where the first parameter is null/undefined in strict mode and non-strict mode

The same is true for the law. **

The only difference between the two is that call passes parameters to fn one by one, while apply does not pass them one by one, but puts the parameter values ​​to be passed to fn in an array for operation. But it is also equivalent to assigning values ​​to the parameters of fn one by one. To sum up, the second parameter of call starts to accept a parameter list, and the second parameter of apply starts to accept a parameter array

fn.call(obj,100,200);
fn.apply(obj,[100,200]);

bind: This method is not compatible with IE6-8. It is similar to call/apply in that it is used to change the this keyword, but it is significantly different from the two:
fn.call(obj,1,2); //->Changing this and executing fn function are done together

fn.bind(obj,1,2);//-> just changes this in fn to obj, and passes two parameter values ​​1 and 2 to fn.
 But at this time, the fn function is not executed var tempFn=fn.bind(obj,1,2);
tempFn(); //This is how the fn function is executed

Bind embodies the idea of ​​preprocessing: change the this of fn to the result we want in advance, and prepare the corresponding parameter values ​​​​as well, so that when we need them in the future, we can execute them directly.

Call and apply execute the function directly, while bind requires another call.

var a = {
 name : "Cherry",
 fn : function (a,b) {
 console.log( a + b )
 }
 }
 var b = a.fn;
 b.bind(a,1,2)

The above code is not executed. Bind returns a function that changes the context. We have to call it manually:

b.bind(a,1,2)() //3

One thing must be stated: when encountering the fifth situation (call apply and bind), the first four situations all give way.

4. Arrow function this points to

Arrow function is a new syntax to define functions using an "arrow" (=>) as the name suggests, but it is superior to traditional functions in two ways: it is shorter and does not bind this.

var obj = {
 birth: 1990,
 getAge: function () {
 var b = this.birth; // 1990
 var fn = function () {
 return new Date().getFullYear() - this.birth; // this refers to window or undefined
 };
 return fn();
 }
};

Now, the arrow function completely fixes the direction of this. The arrow function does not have its own this. The this of the arrow function is not determined when it is called, but the object in which it is defined is its this.

In other words, the this of the arrow function depends on whether there is a function in the outer layer. If so, the this of the outer function is the this of the inner arrow function. If not, this is window.

<button id="btn1">Test arrow function this_1</button>
 <button id="btn2">Test arrow function this_2</button>
 <script type="text/javascript"> 
 let btn1 = document.getElementById('btn1');
 let obj = {
 name: 'kobe',
 age: 39,
 getName: function () {
 btn1.onclick = () => {
 console.log(this);//obj
 };
 }
 };
 obj.getName();
 </script>

In the above example, since the arrow function does not create its own this, it only inherits this from the previous level of its scope chain. In fact, it can be simplified to the following code:

let btn1 = document.getElementById('btn1');
 let obj = {
 name: 'kobe',
 age: 39,
 getName: function () {
 console.log(this)
 }
 };
 obj.getName();

What if there is no function in the previous layer, who does this point to?

<button id="btn1">Test arrow function this_1</button>
 <button id="btn2">Test arrow function this_2</button>
 <script type="text/javascript"> 
 let btn2 = document.getElementById('btn2');
 let obj = {
 name: 'kobe',
 age: 39,
 getName: () => {
 btn2.onclick = () => {
 console.log(this);//window
 };
 }
 };
 obj.getName();
 </script>

In the above example, although there are two arrow functions, this actually depends on the outermost arrow function. Since obj is an object rather than a function, this points to the Window object.

Since this is bound in the arrow function according to the lexical scope, this cannot be bound when calling the arrow function with call() or apply(), that is, the first parameter passed in is ignored:

var obj = {
 birth: 1990,
 getAge: function (year) {
 var b = this.birth; // 1990
 var fn = (y) => y - this.birth; // this.birth is still 1990
 return fn.call({birth:2000}, year);
 }
};
obj.getAge(2018); // 28

Further reading

Arrow Function-Liao Xuefeng

Arrow functions and this in JS

this, apply, call, bind

Summarize

This is the end of this article on the in-depth explanation of the JavaScript this keyword. For more relevant JavaScript this keyword content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!