JavaScript This points to, do you understand it? You will regret it if you don’t read it.
I believe that many front-end friends are still very confused and confused about This pointing. Today I will take you to review the This pointing issue~
My only explanation for This is: "Whoever calls this will point to this" Of course, this statement is not very correct. Let me give you an example below!
Global this points to Window
// 例 1->
console.log(this); // window
function test() {
console.log(this); // window
}
test(); // 因为函数是在Script里面执行时调用所以默认指向的是Window
This in the event points to the event triggering object
// 例 2->
document.querySelector("dom").onclick = function () {
console.log(this); // 因为函数是div onClick触发的，所以this指向事件触发对象，也就是 dom
};
Self-calling function this refers to window
// 例 3->
(function () {
console.log(this); // Window
})(); // 与例1类似，因为函数是在Script里面执行时调用所以默认指向的是Window
The object method this refers to the object itself
In the following example, I assign the test function to the obj object, and then call the test method through the object form. At this time, the method belongs to the obj object. So at this time, This points to obj
// 例 4->
function test() {
console.log(this); // obj
}
var obj = {
test,
};
obj.test();
A special example (it’s almost nailed...)
This is a self-calling function, which is also called when the Script is executed. It is just an assignment operation inside and does not change this. Pointing, so this here still points to Window
// 例 5->
function foo() {
console.log(this); // Window
}
var obj = {
foo,
};
var obj2 = {
};
(obj2.foo = obj.foo)(); // 自调用函数
This in the constructor points to
This in the constructor and This in the constructor prototype method both point to the future new instance object, so in this example, This points to Person.
// 例 6->
//
function Person(name) {
this.name = name;
}
Person.prototype.say = function () {
console.log(this,'Person00' );
};
console.log(new Person("lisi").say()); // Person {name: 'lisi'}
Special case of constructor This points to
Unowned local functionThis points toWindow
var cat = {
name: "liLy",
say: function () {
function getList() {
console.log(this); // Window
}
getList(); // getName这个方法没有归属的，所以就是window
},
};
cat.say();
The This of the arrow function points to
Since the arrow function does not have its own This, it will look up for This by itself
var cat = {
name: "liLy",
say: function () {
var getList = () => {
console.log(this); // 这里的This指向的就是 cat 对象
}
getList();
},
};
cat.say();
(testArrow = () => {
console.log(this, "this arrow");
// 这里为自调用函数，箭头函数向上找 This 也只有 Window 了，所以这里打印出来也一定是 Window
})();
After reading so much, please give K a like and a follow~