this指向在前端的代码里,是最常见的运用技巧,那么搞清this指向,也就就能梳理更清晰的逻辑,避免bug的产生.
一 this指向大全
1. 全局的this指向window
2. 函数内部的this指向window
3. 对象里的方法中的this指向这个对象
4. ---------以上内容总结为: this指向其调用者------------
5. 箭头函数的this是定义其所在的对象而不是使用其所在的对象
6. 构造函数中的this就是指向其实例化的对象
二 练习题
2.1 普通函数调用
let a = 1;
var b = 1;
//普通函数
function fn() {
console.log(this.a)
console.log(this.b)
}
//对象
let obj = {a: 2, b: 2, fn}
fn() // undefined 1
obj.fn() // 2 2
解析如下:
-
当fn作为普通函数调用的时候,this指向是window,由于let声明的变量并不会挂载到window上而var可以挂载到window上,所以this.a的值就是undefined,那么this.b的值就是var变量声明的值;
-
当fn作为对象里的方法调用时,this指向这个对象obj;那么this.a的值应为obj.a的值,this.b的值同理
2.2 箭头函数调用
let a = 1
var b = 1
let fn = () => {
console.log(this.a)
console.log(this.b)
}
let obj = { a: 2, b:2, fn }
fn() // undefined 1
obj.fn() // undefined 1
解析如下:
- 当作为箭头函数调用时,原理与上面的普通函数调用一样
- 当作为对象里的方法调用时, 因为箭头函数的声明是在最外层(箭头函数的this是定义其所在的对象而不是使用其所在的对象),this指向window,那么this.a的值就是window.a的值,this.b的值同理
2.3 函数作为参数传递时的this指向
var length = 10
function fn() {
console.log(this.length)
}
var obj = {
length: 5,
methods: function(fn) {
console.log(this) //指向obj
fn() //指向window对象
}
}
obj.methods(fn)
解析如下:
- 这里的this指向其实其调用者,在fn()的上方我们打印了this的指向,此时this指向为obj对象,但是fn()指向的时候,其实相当于window.fn(),因为fn函数的声明是在全局状态下,也只有在全局状态下才能找到这个函数,因此fn函数内部的this指向是window对象
- 如果fn是一个箭头函数,此时的this指向是obj这个对象