有关函数中 this 的指向问题总结
this 指向的几种情况:
一、 指向 window
- 函数的一般调用,函数名+括号 (备注:非箭头函数)
- 匿名函数自执行
- 定时器直接调用
- 箭头函数暴露在全局
二、 指向点(.)前面的主
- 事件元素
事件触发的元素,事件函数(不能是箭头函数)被触发的时候,事件函数内的this,指向事件元素
<body>
<div id="main"></div>
<script>
let main = document.querySelector("#main");
main.onclick = function () {
console.log(this); // <div id="main"></div>
}
</script>
<body>
- 对象
就是方法名.前面的对象(前提:不被定时器直接调用,不能是箭头函数)
let obj = {
fn: function() {
console.log(this); // {fn: ƒ} 就是 obj
return this;
}
}
let xxx = obj.fn();
console.log(obj === xxx); // true
三、 指向 实例
new 了之后就指向实例(默认 return 是 this),return 上方 this 指向构造函数的实例
构造函数的 return 默认是 this ,如果手动 return 了一个简单类型 ,那 return 的还是 this。如果手动 return 了一个引用类型 ,那 return 的就是这个引用类型。
class father { // 注册一个类
fn = () => {
return this
}
};
let child = new father; // 实例 child 继承 father 这个类
console.log(father === child.fn()); // false
console.log(child === child.fn()); // true => 验证可知 this 指向的地址是这个实例
四、 指向 undefined
- 原来指向 window 的,在严格模式 'use strict' 下, 会指向 undefined
严格模式:1. 声明变量必须使用 var 或 let。2. arguments 是不和形参相映射的。3. this 指向一般是 undefined
五、 指向 父级作用域
- this 指向 箭头函数 的父级,只看定义时父级的域(比如,箭头函数在全局下,this 指向 window)
function fn() {
console.log(this); // Window => fn 函数的一般调用,this 指向 Window
};
let obj = {
fn1: function (fn) {
console.log(this); // {name: 'obj', fn1: ƒ} => obj.fn1()调用,this 指向方法名. 前面的对象 obj
fn();
arguments[0]() // Arguments 对象 => 用 arguments[0]() 调用,this 指向 Arguments 对象
},
fn2: () => {
console.log(this); // Window => 箭头函数,只看被调用时的父级作用域
},
name: "obj"
};
obj.fn1(fn);