JS基础(三)-不绑定this的箭头函数

箭头函数不绑定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 深入

另外，工作中用到的一些技术和完成的功能，我们也会及时总结更新在这里

如文章有错误或表述不清晰，欢迎各位留言反馈~~