JavaScript this keyword
This in object-oriented languages represents a reference to the current object. In js, this is not fixed, it will change as the execution environment changes. No matter what happens to it, the point of this can always only depend on who called this, not where it was defined. Whoever calls the function refers to whom this in the function body refers to .
Note: The following output without special instructions is performed in a browser environment.
This in the method
The method in the current object needs to access the properties in the current object, and this points to the object before the method call.
var student = {
sname:'LiMing',
sage:18,
speak:function(){
console.log(`I am ${
this.sname}`)
}
}
student.speak(); // I am LiMing
Use this globally alone
If this is used globally alone, it points to the global object (nodejs: Global; browser: Window).
Strict mode always refers to the global object.
var that = this;
console.log(that); //Window {parent: Window, opener: Window, top: Window, length: 7, frames: Window, …}
This in the self-tuning of ordinary function or anonymous function
If there is no point in front of a function call, it will thisautomatically point to it window.
Because since it can be called without adding points, it must belong to the whole world window. We didn't add points but the program became automatically window.函数调用.
In ES5 strict mode: the thispoint in the global method is undefined.
function fun (){
console.log(this);
}
fun(); //Window {parent: Window, opener: null, top: Window, length: 4, frames: Window, …}
//------------------------------------------分割线------------------------------------------
"use strict";
function fun (){
console.log(this);
}
fun(); //undefined
This in the constructor
All this in the constructor is attracted by new and points to the new object being created.
function Student(sname,sage){
this.tname = sname;
this.tage = sage;
}
var LiMing = new Student('LiMing',18);
console.log(LiMing); //Student {tname: "LiMing", tage: 18}
This in the method in the prototype object
It points to calling this method in the future. The previous object
function Student(sname,sage){
this.tname = sname;
this.tage = sage;
}
Student.prototype.speak = function(){
console.log(`I am ${
this.tname}`)
}
var LiMing = new Student('LiMing',18);
LiMing.speak(); //I am LiMing
This in the event handler
Points to the element currently triggering the event
btn.onclick=function(){
... } //this->btn
Callback:
When all callback functions are actually called, there is no "object." prefix in front, so this points to window (in strict mode it points to undefined).
Usually, if you want this in the callback function to not refer to window, but to be consistent with the external this, you must change it to an arrow function
setTimeout(function(){
this... });
arr.forEach(function(){
this... })
arr.map(function(){
this... })