箭头函数不绑定this,它的this来自上一层作用域链的this。由此可见,想要判断this的指向,重点是理清函数执行时的作用域链。用几个示例说明这件事情。 PS:示例代码的运行环境为浏览器。
示例1
1. 普通函数风格
var name = 'name of global'
var obj = {
name: 'name of obj',
getName: function () {
console.log(this.name)
}
}
obj.getName() // name of obj
// getName函数执行后的作用域链 全局 -> getName
2.箭头函数风格
var name = 'name of global'
var obj = {
name: 'name of obj',
getName: () => {
console.log(this.name)
}
}
obj.getName() // name of global
// getName函数执行时的作用域链 全局 -> getName
示例2
1. 普通函数风格
普通函数执行时会绑定this。this是动态指定的。
var name = 'name of global'
var obj = {
name: 'name of obj',
getName: function () {
let age = 18
setTimeout(function test() {
console.log(age)
console.log(this.name)
}, 1000)
}
}
obj.getName() // 18 name of global
getName执行时的作用域链情况: 全局(this为window) -> getName(this为obj) -> test(this为window) PS: 之所在setTimeout中能打印出age的值,是因为函数的作用域是在定义的时候确定的,而不是执行的时候。
2. 箭头函数风格
(1) 只有一个箭头函数
var name = 'name of global'
var obj = {
name: 'name of obj',
getName: function () {
let age = 18
setTimeout(() => {
console.log(age)
console.log(this.name)
}, 1000)
}
}
obj.getName() // 18 name of obj
getName执行时的作用域链: 全局(this为window) -> getName(this为obj) -> setTimeout中的函数(this为上一层的this)
(2)有两个箭头函数
var name = 'name of global'
var obj = {
name: 'name of obj',
getName: () => {
let age = 18
setTimeout(() => {
console.log(age)
console.log(this.name)
}, 1000)
}
}
obj.getName() // 18 name of global
getName执行时的作用域链: 全局(this为window) -> getName(this为上一层的this) -> setTimeout中的函数(this为上一层的this)

<关于我们>
我们是来自帝都的一枚前端程序猿 + 一枚前端程序媛。
这里发布的文章是我们对学习内容的总结,预计会每周至少会更新一篇。
目前我们学习计划是: 小程序实战 => vue 进阶用法 => vue 原理 => css 基础 => es6 => js 深入
另外,工作中用到的一些技术和完成的功能,我们也会及时总结更新在这里
如文章有错误或表述不清晰,欢迎各位留言反馈~~