Javascript this keyword detailed explanation_basic knowledge

1. this points to the object instantiated by the constructor

In the previous article, we mentioned the difference between calling the constructor using new and not using new, as shown in the following example:

Copy code The code is as follows:

function Benjamin(username, sex) {
This.username = username;
This.sex = sex;
}
var benjamin = new Benjamin("zuojj", "male");
//Outputs: Benjamin{sex: "male",username: "zuojj"}
console.log(benjamin);
var ben = Benjamin("zhangsan", "female");
//Outputs: undefined
console.log(ben);

When the constructor is called as a normal function, there is no return value, and this points to the global object. So how do we avoid problems caused by the lack of new keyword?

Copy code The code is as follows:

function Benjamin(username, sex) {
//Check whether "this" is a "Benjamin" object
if(this instanceof Benjamin) {
This.username = username;
This.sex = sex;
}else {
Return new Benjamin(username, sex);
}
}
var benjamin = new Benjamin("zuojj", "male");
//Outputs: Benjamin{sex: "male",username: "zuojj"}
console.log(benjamin);
var ben = Benjamin("zhangsan", "female");
//Outputs: Benjamin {username: "zhangsan", sex: "female"}
console.log(ben);

In the above example, we first check whether this is an instance of Benjamin. If not, use new to automatically call the constructor and instantiate it. This means that we no longer need to worry about missing the new keyword to instantiate the constructor. . Of course, we may develop a bad habit. What if we avoid this phenomenon? We can throw an error like this:

Copy code The code is as follows:

function Benjamin(username, sex) {
//Check whether "this" is a "Benjamin" object
if(this instanceof Benjamin) {
This.username = username;
This.sex = sex;
}else {
// If not, throw error.
throw new Error("`Benjamin` invoked without `new`");
}
}

2. this points to the object that calls the function

Look at the example below:

Copy code The code is as follows:

var x = 10;
var obj = {
x: 10,
output: function() {
//Outputs: true
console.log(this === obj);
Return this.x;
},
innerobj: {
x: 30,
Output: function() {
//Outputs: true
console.log(this === obj.innerobj);
Return this.x;
}
}
};
//Outputs: 10
console.log(obj.output());
//Outputs: 30
console.log(obj.innerobj.output());

3. this points to the global object

When we discussed the constructor above, we also discussed that when new is not applicable, this will point to the global object. Let’s take a look at two common examples of easy mistakes:

Copy code The code is as follows:

var x = 100;
var obj = {
x: 10,
output: function() {
(function() {
//Outputs: true
console.log(this === window);
//Outputs: Inner: 100
console.log("Inner:" this.x);
})();

Return this.x;
}
};
//Outputs: 10
console.log(obj.output());

When using closure, the scope changes and this points to window (in the browser).

Copy code The code is as follows:

var x = 100;
var obj = {
x: 10,
output: function() {
Return this.x;
}
};
var output = obj.output;
//Outputs: 10
console.log(obj.output());
//Outputs: 100
console.log(output());
var obj2 = {
x: 30,
output: obj.output
}
//Outputs: 30
console.log(obj2.output());

At this time this always points to the object when the function is called.

4. this points to the object assigned by the apply/call() method

Copy code The code is as follows:

var x = 100;
var obj = {
x: 10,
output: function() {
Return this.x;
}
};
//Outputs: 10
console.log(obj.output());
var obj2 = {
x: 40,
output: obj.output
}
//Outputs: 40
console.log(obj.output.call(obj2));
//Outputs: 10
console.log(obj2.output.apply(obj));

5. This in the callback function points to the object pointed to by this in the function that calls the callback

Copy code The code is as follows:

//
$("#username").on("click", function() {
console.log(this.value);
});

6. this

in Function.prototype.bind

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
Example 1:

Copy code The code is as follows:

function person() {
return this.name;
}
//Function.prototype.bind
var per = person.bind({
name: "zuojj"
});
console.log(per);
var obj = {
name: "Ben",
person: person,
per: per
};
//Outputs: Ben, zuojj
console.log(obj.person(), obj.per());

Example 2:

Copy code The code is as follows:

this.x = 9;
var module = {
x: 81,
getX: function() { return this.x; }
};
//Outputs: 81
console.log(module.getX());
var getX = module.getX;
//Outputs: 9, because in this case, "this" refers to the global object
console.log(getX);
// create a new function with 'this' bound to module
var boundGetX = getX.bind(module);
//Outputs: 81
console.log(boundGetX());