This in JavaScript is very different from this in object-oriented languages such as Java. The bind(), call() and apply() functions further extend this flexibility.
To ensure readability, this article uses free translation rather than literal translation. In addition, the copyright of this article belongs to the original author and the translation is for learning only.
If you don't understand the JavaScript keyword this deeply enough, you will sometimes fall into unexpected pits. Here we have summarized 5 common rules to help you determine what this actually points to. Although all situations are not covered, most daily situations can be used to correctly infer.
The value of this is usually determined by the execution environment of the function, which means it depends on how the function is called;
Every time the same function is called, this may point to a different object;
Global Object
Open the Chrome browser developer panel (Windows: Ctrl + Shift + J) (Mac: Cmd + Option + J) and enter:
(this);
See what is output?
// Window {}
window object! Because under the global scope, this points to the global object. In the browser, the global object is the window object.
To make you more clear about why this points to a window object, let's take another example:
var myName = 'Brandon';
We can access its value by entering myName in the console:
myName // Output 'Brandon'
In fact, all variables defined globally are bound to window objects. Let's do the following test:
// Output 'Brandon' === myName // Output true
Now let's put this inside the function to see what's the effect.
function test(){
return this;
}
test();
You will find that this still points to the global window object. Because this keyword is not inside a declared object, it points to the global window object by default. This may be a bit difficult for most beginners to understand. After reading this article, you will suddenly feel enlightened.
Note: If in strcit mode, this is undefined in the example above.
Declared Object
When this keyword is used inside a declaration object, its value is bound to the nearest parent object of the function calling this. Let's use examples to illustrate this problem:
var person = {
first: 'John',
last: 'Smith',
full: function() {
( + ' ' + );
}
};
();
// Output 'John Smith'
This is used in the full function in the declared object person, so the nearest parent object that calls this full function is the person, so this points to the person.
To better describe this as actually pointing to the person object, you can copy the following code to the browser console and print this out.
var person = {
first: 'John',
last: 'Smith',
full: function() {
(this);
}
};
();
// Output Object {first: "John", last: "Smith", full: function}
Let's look at a more complex example:
var person = {
first: 'John',
last: 'Smith',
full: function() {
( + ' ' + );
},
personTwo: {
first: 'Allison',
last: 'Jones',
full: function() {
( + ' ' + );
}
}
};
Here we have nested objects. At this time, who do this point to? Let's print it out and take a look:
(); // Output 'John Smith'(); // Output 'Allison Jones'
You will find that the rule we described earlier satisfying: its value will be bound to the nearest parent object of the function calling this.
new keywords
When using the new keyword to build a new object, this will bind to this new object. Let's take a look at an example:
function Car(make, model) {
= make;
= model;
};
By the first rule, you might infer that this points to a global object. But if we use the new keyword to declare a new variable, this in the Car function will bind a new empty object and then initialize the sum value.
var myCar = new Car('Ford', 'Escape');
(myCar);
// Output Car {make: "Ford", model: "Escape"}
call, bind, and apply
We can display the binding object of this in call(), bind(), apply(). These three functions are very similar, but we need to pay attention to their slight differences.
<!-- call can receive any number of parameters, the first of which must be a this object, and the rest are all parameters in turn. -->
Let's take a look at an example:
function add(c, d) {
( + + c + d);
}
add(3,4);
// Output NaN
The add function outputs NaN, because the sum is not defined.
Now we introduce the object and use call() and apply() to call:
function add(c, d) {
( + + c + d);
}
var ten = {a: 1, b: 2};
(ten, 3, 4);
// Output 10(ten, [3,4]);
// Output 10
When we use(), the first parameter is the object that this needs to be bound to, and the rest is the original parameters of the add function.
Therefore, point, point. () is similar, except that the second parameter is an array that stores the parameters of the add function.
The bind() function is similar to call(), but the bind() function will not be called immediately. The bind() function will return a function and bind this. Next, we will use examples to help understand the application scenarios of the bind() function:
var small = {
a: 1,
go: function(b,c,d){
(+b+c+d);
}
}
var large = {
a: 100
}
implement:
(2, 3, 4); // Output 10
What if we want to use the value instead? We can use call/apply:
(large, 2, 3, 4); // Output 109
However, what should we do if we don’t know what values should be passed in these three parameters? We can use bind:
var bindTest = (large, 2);
If we print bindTest under the console, we will see:
(bindTest);
// Output function (b,c,d){(+b+c+d);}
Note: This function has bound this to a large object and passed the first parameter b. So, we need to pass in the remaining parameters:
bindTest(3, 4); // Output 109
Arrow function (=>)
Because it takes a lot of space, we will write a blog to introduce it.
in conclusion
When you finish reading this blog, you should be able to understand the object this points to in most cases.
Next, let’s summarize:
The value of this is usually determined by the execution environment of the current function;
In the global scope, this points to the global object (window object);
When declared using the new keyword, this points to the new object;
We can use call(), bind(), apply() to set this;
The arrow function does not bind this.
original:JavaScript: The Keyword ‘This' for Beginners
Translator: Fundebug