函数中的this指向问题一直是js中的重点也是一个难点,下面就让我们一起来总结一下吧!
1.普通函数
// 普通函数
function fn() {
console.log(this);
}
fn(); // 打印结果为: window{...}
结论: 普通函数内部this指向Window
特别提醒:
‘use strict’严格模式下this指向undefined
2.对象的方法
// 对象的方法
var obj = {
age: 20,
sayHi: function() {
console.log(this);
}
}
obj.sayHi(); // 打印结果为: {age: 20, say: ƒ}
结论: 对象的方法的this指向obj对象
3.构造函数
// 构造函数
function Star() {
console.log(this); // Star {}
};
var andy = new Star();
结论: 构造函数this指向andy这个实例对象
特别提醒:
严格模式下,如果 构造函数不加new调用, this 指向的是undefined,如果给他赋值则会报错!
4.绑定事件函数
// 绑定事件函数
var btn = document.querySelector('button');
btn.onclick = function() {
console.dir(this);
}; // 打印结果: button
结论: 绑定事件函数this指向的是函数的调用者 也就是btn这个按钮对象
5.定时器函数
// 定时器函数
window.setTimeout(function() {
console.log(this);
}, 1000); // 打印结果: window
结论: 定时器函数中this指向也是window
6.立即执行函数
// 立即执行函数
(function() {
console.log(this);
})(); // 打印结果: window
结论: 立即执行函数中的this也是指向window
7.箭头函数
// 箭头函数
var obj = {
sayHi: () => {
console.log(this.age);
}
}
obj.sayHi(); // window
结论: 箭头函数没有自己的this，看其外层的是否有函数，如果有，外层函数的this就是内部箭头函数的this，如果没有，则this是window.
8.如何寻找函数中的this
关于如何寻找函数中的this,我用一张图来说明!
