函数语法

# 1 箭头函数

ES6 中定义函数的简写方式

示例

省略 function, 改用一个箭头, 代码不止一行，使用{}括起来

const fn = function(obj) {
  console.log(obj)
}
// 简写为：
const fn2 = (obj) => {
  console.log(obj)
}

1
2
3
4
5
6
7

多个参数的情况

const sum = (a, b) => {
  // todo
  console.log('test')
  return a + b
}

1
2
3
4
5

如果只有一句 return, 可以将{}和 return 都省略

// 两个参数的情况：
const sum1 = function(a, b) {
  return a + b
}
// 简写为：
const sum2 = (a, b) => a + b

1
2
3
4
5
6

# 2 对象的函数属性简写

比如一个 Person 对象，里面有 eat 方法：

let person = {
  name: 'jack',
  // 以前：
  eat: function(food) {
    console.log(this.name + '在吃' + food)
  },
  // 简写版：
  eat2(food) {
    console.log(this.name + '在吃' + food)
  },
}
person.eat2('apple')

1
2
3
4
5
6
7
8
9
10
11
12

# 3 箭头函数 this 指向问题

箭头函数里的 this 指向上一级作用域中的 this

示例

ES5 中的实现

有 3 个 div
当点击某一个 div, 过 1s 后, 将里面的文本改成 in timer

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>1</div>
    <div>2</div>
    <div>3</div>

    <script>
      const divs = document.querySelectorAll('div')
      divs.forEach((div) => {
        div.addEventListener('click', function() {
          console.log(this.innerHTML)
          setTimeout(
            function() {
              console.log('in timer')
              this.innerHTML = 'hello'
            }.bind(this),
            1000
          )
        })
      })
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

ES6 使用箭头函数实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>1</div>
    <div>2</div>
    <div>3</div>

    <script>
      const divs = document.querySelectorAll('div')
      divs.forEach((div) => {
        div.addEventListener('click', function() {
          console.log(this.innerHTML)
          setTimeout(() => {
            console.log('in timer')
            this.innerHTML = 'hello'
          }, 1000)
        })
      })
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

如果觉得有帮助, 可以微信扫码, 请杰哥喝杯咖啡~

#ES6

上次更新: 2021/09/03, 15:32:17

← 解构赋值 Promise→