Detailed explanation of the usage of this keyword in JavaScript

Let me give you a life example:

Xiao Ming is running, he looks very happy

Xiao Ming here issubject, without this subject, the subsequent pronoun "he" will be meaningless. Only with the subject can pronouns have things that can be referred to.

Analogize to the world of JavaScript, when we call an object's method, we need to specify the object first and then specify the method to be called.

var xiaoming = {
  name: 'Xiao Ming',
  run: function() {
    (`${} seems happy`);
  },
};

();

In the example above, in line 8xiaomingDesignatedrunThe subject of the method runtime. Therefore, inrunWe can only use itthisLet's replacexiaomingThis object. Can seethisIt plays the role of a pronoun.

Similarly, for a JavaScript class, after initializing it, we can also use a similar method to understand: when an instance of the class calls its method, it will be used as the subject, and thethisIt naturally becomes a pronoun that refers to the subject.

class People {
  constructor(name) {
    // When instantiating an object with the new keyword, it is equivalent to saying,    // "Create a People class instance (subject) and its (this) name is..."    // So this is the newly created People class instance     = name;
  }
  
  run() {
    (`${} seems happy.`)  
  }
}

// Instantiate a class with new keywordvar xiaoming = new People('xiaoming');
();

This is what I think this keyword is designed wonderfully! If the method is called statementvar xiaoming = new People('xiaoming');It is actually completely smooth to connect with the code of the method itself and read it like in English.

This binding

The subject of a sentence can be changed, for example, in the following scenario,runAssigned to Xiaofang (xiaofang) after the body, call, the subject becomes Xiaofang!

var xiaofang = {
  name: 'Xiao Fang',
};

var xiaoming = {
  name: 'Xiao Ming',
  run: function() {
    (`${} seems happy`);
  },
};

 = ;
// The subject becomes Xiaofang();

But if Xiao Ming is very stingy and unwilling torunAfter lending it to Xiaofang,thisIt became Xiaofang's words, so what should Xiao Ming do? He can makerunRuntimethisAlways be for Xiao Ming himself.

var xiaofang = {
  name: 'Xiao Fang',
};

var xiaoming = {
  name: 'Xiao Ming',
  run: function() {
    (`${} seems happy`);
  },
};

// After binding Xiao Ming's run method (bind), the returned one// Function, but when this function is called later, even if the subject is not Xiao Ming,// Its this is still Xiao Ming = (xiaoming);

 = ;
// Although the subject is Xiaofang, this is still Xiao Ming in the end();

Then the same function is multiple timesbindAfter that, the endthisWhich time was itbindWhat is the object of? You can try it yourself.

call and apply

Allows you to specify a function when calling itthisvalue.

var xiaoming = {
    name: 'Xiao Ming'
};

function run(today, mood) {
    (`Today is ${today}, ${} seems ${mood}`);
}

// The first parameter of the function's call method is the value of this// In the future, just pass the parameters in the order of function parameters.(xiaoming, 'Monday', 'happy')

andThe functions are exactly the same, the difference is thatapplyPut all the parameters required for the function call into an array.

var xiaoming = {
    name: 'Xiao Ming'
};

function run(today, mood) {
    (`Today is ${today}, ${} seems ${mood}`);
}

// apply only accepts two parameters// The second parameter is an array, and the elements of this array are in order// as a parameter for run call(xiaoming, ['Monday', 'happy'])

Socall/applyAnd the abovebindWhat kind of behavior does it do when mixed? This is also left to everyone to verify. But in general, we should avoid mixing them, otherwise it will make it difficult to track when checking or debugging codesthisThe value of the problem.

When the method loses the subject, does this no longer exist?

In fact, you can find my words, asfunctionWhen called, there is a subject, it is amethod; when onefunctionWhen called, there is no subject, it is afunction. When a function runs, although it has no subject,thisThe value of the sequel will be a global object. In the browser, that'swindow. Of course, the premise is that the function is notbindIt's not that it'sapplyorcallCalled.

SofunctionWhat are the scenarios as functions?

First of all, the call to a global function is the simplest one.

function bar() {
  (this === window); // Output: true}
bar();

The function expression called immediately (IIFE, Immediately-Invoked Function Expression) also has no subject, so when it is calledthisIt is also a global object.

(function() {
  (this === window); // Output: true})();

However, when the function is executed in strict mode, this is when the function is calledundefinedNow. This is a very noteworthy point.

function bar() {
  'use strict';
  ('Case 2 ' + String(this === undefined)); // Output: undefined}
bar();

Invisible calls

Sometimes, you have no way to see how the function you define is called. Therefore, you have no way of knowing its subject. Here is an example of adding event listeners with jQuery.

 = 'window val';

var obj = {
  val: 'obj val',
  foo: function() {
    $('#text').bind('click', function() {
      ();
    });
  }
};

();

In the event's callback function (anonymous function defined at line 6),thisThe value ofwindow, notobj, but on the pageidfortextHTML elements.

var obj = {
  foo: function() {
    $('#text').bind('click', function() {
      (this === ('text')); // Output: true    });
  }
};

();

This is because anonymous functions are called internally by jQuery. We don't know what the subject is when it is called, or whether it isbindWait for the function to be modifiedthisvalue. Therefore, when you hand over anonymous functions to other parts of the program, you need to be extra careful.

If we want to use obj in the above callback functionvalValue, except for writing directlyIn addition, you can also use a new variable in the foo methodthatCome and savefooRuntimethisvalue. This is a bit of a twist, let’s see it by looking at the examples.

 = 'window val';

var obj = {
  val: 'obj val',
  foo: function() {
    var that = this; // Save this reference to that, this here is actually obj    $('#text').bind('click', function() {
      (); // Output: obj val    });
  }
};

();

Another way is to make the anonymous functionbindNow.

 = 'window val';

var obj = {
  val: 'obj val',
  foo: function() {
    $('#text').bind('click', function() {
      (); // Output: obj val    }.bind(this));
  }
};

();

Summarize

In JavaScriptthisThe usage is indeed strange, but if you use natural language to understand it, everything will be natural. I wonder if you understood this article when you finished reading it?

The above is a detailed explanation of the usage of this keyword in JavaScript. For more information about JavaScript this keyword, please follow my other related articles!