面试总结：this到底指向谁？

💡 根据 遗忘曲线：如果没有记录和回顾，6天后便会忘记75%的内容

读书笔记正是帮助你记录和回顾的工具，不必拘泥于形式，其核心是：记录、翻看、思考

面试提问

面试官：请说说js中的this指向问题？谈谈你对this的理解？

我：this指向很简单，就是江湖人称：谁调用指向谁。

面试官：嗯，真简单🤪。

思维导图帮助记忆

this的指向是动态绑定的，与它所处的位置无关。

详细说明

简单的函数调用时

严格模式下：浏览器环境 或者 node环境下，都指向undefined。

非严格模式下：浏览器环境下this指向window；node环境下指向global。

const people = {
	name: '张三',
	get() {
		console.log(this)
	}
}

const get = people.get;
get(); // window

隐式调用

谁调用指向谁

const people = {
	name: '张三',
	get() {
		console.log(this.name)
	}
}

people.get();// '张三'

显示调用

指向显示绑定的对象。常用方法：call、apply 和 bind

function fn() {
	console.log(this);
}

fn.call(window);
fn.call({name: '张三'})

个别函数内部

setTimeout：执行window；事件绑定：指向绑定事件的元素；new方法调用：指向返回的实例对象；箭头函数：指向上层作用域。

// setTimeout
setTimeout(() => {
	console.log(this) // window
}, 100)

// 事件绑定
document.getElementById('root').onclick = function() {
	console.log(this); // 指向id为root的元素
}

// new
class Foo {
	constructor() {}
	get() {
		console.log(this.name)
	}
}

const foo = new Foo()
foo.name = '张三'
foo.get(); // '张三'

// 箭头函数
const people = {
	name: '张三',
	get: () => {
		console.log(this)
	}
}

people.get(); // window

优先级

简单函数调用 < 隐式绑定 < 显示绑定 这个优先级很好理解。主要是bind优先级为啥是低于new呢？

var name = 'hh'
class Foo {
	constructor() {}
	get() {
		console.log(this.name)
	}
}

const foo = Foo.bind(window)
const fo = new foo()
fo.name = '张三'
fo.get(); // '张三'

从上可以看出：Foo别显示绑定window，但是被new后，this指向了fo实例