背景:
很多刚刚入行的小伙伴遇到 this
相关的小问题,甚至还不知道是因为this
引起的问题。虽然这是JavaScript
的基础知识,但情况太多了很多人都没有掌握好各种常见情况下的this
指向,这就容易"指错方向"导致出现BUG
,所以空闲想自己整理一下几种常见 this
指向并且附带例子代码说明。
在JavaScript中this的概念:
- 在
JavaScript
中,this
的意思就是“当前”的意思,它是一个指针型变量,它动态指向当前的运行环境。 所以区分各种this
指向是前端的基本功了。- 在不同的使用场景中如果调用同一个函数,
this
的指向也可能会不同,但是它永远指向其所在函数的真实调用者;如果没有调用者,就指向全局对象,即window
。
-
以下说明几种场景的
this
指向:1、在全局环境下直接使用的
this
指向
2、在对象中的this
3、函数内部的this
4、箭头函数的this
5、构造函数中的this
一、在全局环境下直接使用的this指向
console.log(this); // window
注意: congsole.log()
完整的写法其实是 window.console.log()
,所以window
调用了 console.log()
方法,所以此时 this
直接指向 window
二、 在对象中的this
对象中的方法, this
指向调用这些方法的对象, 例如:
let testObj = {
name: '天天鸭',
testEvent:function(){
name: '方法里面的name';
console.log(this.name);
},
testObj2:{
name: '内层对象天天鸭',
testEvent2:function(){
name: '两层嵌套里面的name';
console.log(this.name);
},
}
}
testObj.testEvent() // 天天鸭
testObj..testObj2.testEvent2() // 内层对象天天鸭
像上述所示,对象嵌套了对象但最终都是指向调用这些方法的对象:
说明:
-
testObj.testEvent()
中testObj
调用了testEvent
,所以指向testObj
-
testObj.testObj2.testEvent2()
最终其实是对象testObj2
调用了testEvent2
,所以最终指向testObj2
三、函数内部的this
如下所示,默认指向window
function test(){
console.log(this); // window
}
注意: 严格模式中this
会指向undefined
,要用window.test()
调用才会指向window
,如下所示。
'use strict';
function test() {
console.log(this.name);
}
test(); // 打印出 "undefined"
四、箭头函数的this
箭头函数没有自己的this
, 在箭头函数中,this
的指向是由外层(函数或者全局)作用域来决定,如果往外层作用域查找 this
的指向,只要没有非箭头函数(普通函数)的包裹,就 一直往外层查找,直到最外层的全局作用域。(大白话:箭头函数根本没有自己的this
,内部的this
就是外层代码块的this
。)
例一(有外层时): 箭头函数指向了外层fn
方法的this
,所以输出“天天”
var name = 'window'
let obj = {
name: '天天',
fn: function () {
return () => {
console.log(this.name) // 输出天天
}
}
}
obj.fn()()
例二(没有外层时): 外层没有方法时,一直往上找,直到window
(node
环境中输出undefined
,浏览器中输出window
)
var name = 'window'
let obj = {
name: '天天',
fn: () => {
console.log(this.name) // node环境中输出undefined,浏览器中输出window
}
}
obj.fn()
五、 构造函数中的this
构造函数中的this
关键字指向当前创建的实例对象。 当我们使用new
调用构造函数时,this
指向当前创建的对象。这使得构造函数能够在实例化对象时将属性和方法绑定到新创建的对象上。
例子:
function Person(name, age) {
this.name = name;
this.age = age;
this.greet = function() {
return this.name + this.age ;
};
}
let personTest = new Person('天天', 30);
console.log(personTest.greet()); // 天天30
在上面的代码,当使用new Person( '天天', 30)
创建personTest
实例时,构造函数
Person
中的this
指向新创建的personTest
对象。
小结:
上面就是我大概整理总结出来的五种场景的this
指向,只要理解了在各种业务场景应该都够用了。好啦,如有更多补充或者建议,欢迎大佬指点指点啊