我们都知道 this是JavaScript 函数中的一个关键字,也称之为this对象,this是函数中的一个对象,那么这个对象表示什么呢,这个很重要,因我们会经常使用到这个this,如果搞不清楚这个this到底指向谁,就是很大的一个问题
都知道 this是在函数中的,那么肯定跟函数有关系的,那么肯定就跟函数的定义和调用以及是什么函数有关系了
以下,我总结了一句话很好的帮助我们 理解这个this对象(接下来是重点哈)
看看这个函数是什么函数,这个这个问题我分为两个分支(普通函数 和 箭头函数):
1、如果这个函数 是普通函数,那么this的指向跟这个函数定义在什么位置没有关系,而是跟这个函数怎么调用有关系
在普通函数中的话,看以下图片
接下来通过案例看看哈
// 这里是一个普通函数
function aa() {
console.log(this);
}
// 1、使用 new 关键调用
var a1 = new aa(); // aa函数中的this指向 a1这个实例对象
// 2、使用时间驱动调用,事件驱动 调用函数,函数名后面不需要加 ()
btn.onclick = aa; //aa函数中的this指向 btn这个dom元素
// 3、直接调用
aa() //aa函数中的this指向 window
2、如果是箭头函数,那么函数中的this 就指向 定义这个箭头函数定义在什么位置有关系。
看一下案例
// 这里是一个直接定义在 window全局的箭头函数
var bb = () => {
console.log(this);
}
// 1、利用new来调用箭头函数
// var b1 = new bb(); //这个会报错,箭头函数不可以用new来调用哟
// 2、使用事件驱动来调用bb这个箭头函数
btn.onclick = bb; //bb函数中的this 指向 window
// 3、直接调用
bb() // bb函数中的this指向window
通过上面的案例,我们会发现就算我用使用事件驱动来调用箭头函数,但是函数中的this任然指向的 window,因为bb这个箭头函数定义的是一个全局的函数,全局的位置this指向的就是window
但是还有一种情况,就是函数写在对象中或者函数写在函数中,那么这个函数中的this又该是怎么样的指向呢
接下来我们在看看两个案例
1、在对象中写函数
// 这是一个函数写在对象中案例
var obj = {
// 这是对象中的普通函数
fun: function () {
console.log(this);
},
// 这是对象中的 箭头函数
fn: () => {
console.log(this);
}
}
obj.fun(); //this指向的是 obj这个对象
obj.fn(); // this指向的是 window
有同学就疑问了,fn不是 obj这个函数的一个属性吗,this不应该指向 obj吗,为什么指向的是wwindow呢?我们刚刚有介绍了,箭头函数中的this跟定义在哪有关系的,箭头函数中的this 为 箭头函数定义这个位置的this的值
2、在函数中写函数,内部函数的this指向
// 这是一个函数写在函数中案例
var obj = {
//这个位置的this指向的就是window,所以fn函数中的this就是window
// 这是对象中的 箭头函数
fn: () => {
console.log(this);
}
}
obj.fn(); // this指向的是 window
2、在函数中写函数,内部函数的this指向
其实经常看到案例就是 定时器这个案例了
btn.onclick = function () {
setInterval(function () {
console.log(this); //这里的this指向 window
}, 1000)
}
btn.onclick = function () {
setInterval(() => {
console.log(this); //这里的this指向 btn这个元素
}, 1000)
}
为什么结果会不一样呢,这个问题就要涉及到 定时器中回调函数的执行了,这个回调函数属于直接调用的,直接调用对于普通函数来说,函数中的this指向window,也就是句代码执行window的原因
btn.onclick = function () {
setInterval(function () {
console.log(this); //这里的this指向 window
}, 1000)
}
但是对于箭头函数来说,函数中的this跟调用没有关系,就看在哪定义,或者定义这个函数所处位置的this指向有关系
btn.onclick = function () {
//这里的this指向为 这个元素,所以箭头函数定义所处的位置中的this为btn,
//那么箭头函数中的this也就为这个this
setInterval(() => {
console.log(this); //这里的this指向 btn这个元素
}, 1000)
}
好了,上面就是我对函数中this指向问题的讲解,希望对大家有帮助吧,如果不是很明白的可以留言。