this指向问题

一 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

解析如下:

1. 当fn作为普通函数调用的时候,this指向是window,由于let声明的变量并不会挂载到window上而var可以挂载到window上,所以this.a的值就是undefined,那么this.b的值就是var变量声明的值;

2. 当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

解析如下:

1. 当作为箭头函数调用时,原理与上面的普通函数调用一样
2. 当作为对象里的方法调用时, 因为箭头函数的声明是在最外层(箭头函数的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)

 

解析如下:

1. 这里的this指向其实其调用者,在fn()的上方我们打印了this的指向,此时this指向为obj对象,但是fn()指向的时候,其实相当于window.fn(),因为fn函数的声明是在全局状态下,也只有在全局状态下才能找到这个函数,因此fn函数内部的this指向是window对象
2. 如果fn是一个箭头函数,此时的this指向是obj这个对象