7.ES6 箭头函数

Posted on Edited on In

 

箭头函数

ES6 允许使用「箭头」 （=>）定义函数。

箭头函数的注意点:

  1. 如果形参只有一个，则小括号可以省略
  2. 函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果
  3. 箭头函数 this 指向声明时所在作用域下 this 的值
  4. 箭头函数不能作为构造函数实例化
  5. 不能使用 arguments
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
// 箭头函数的定义和调用
let sumFun = (a, b) => {
    return a + b;
}

let result = sumFun(1, 2);
console.log(result);
3

// 1. this 是静态的. this 始终指向函数声明时所在作用域下的 this 的值
function getName() {
    console.log(this.name);
}
let getName2 = () => {
    console.log(this.name);
}
window.name = 'MyWindow';
const school = {
    name: "MIT"
}
getName();
// MyWindow
getName2();
// MyWindow

// call()方法可以修改函数内部this的值
getName.call(school);
// MIT
getName2.call(school);
// MyWindow

// 2. 不能作为构造函数实例化对象
let Person = (name, age) => {
    this.name = name;
    this.age = age;
}
let xiaoming = new Person('xiaoming', 20);
console.log(xiaoming);
// Uncaught TypeError: Person is not a constructor

// 3. 不能使用 arguments 变量
let fn = () => {
    console.log(arguments);
}
fn(1,2,3);
// Uncaught ReferenceError: arguments is not defined

let fn2 = function() {
    console.log(arguments);
}
fn2(1,2,3);
// Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]

// 4. 箭头函数的简写
// 1) 省略小括号, 当形参有且只有一个的时候
let add = n => {
    return n + n;
}
console.log(add(10));
// 20

// 2) 省略花括号, 当代码体只有一条语句的时候, 此时 return 必须省略，而且语句的执行结果就是函数的返回值
let pow = (n) => n * n;
let pow = n => n * n;
console.log(pow(8));
// 64

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数实践</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: #58a;
        }
    </style>
</head>
<body>
    <div id="ad"></div>
    <script>
        
        // 案例1：点击 div 2s 后颜色变成『粉色』
        let ad = document.getElementById("ad");
        // 方法一
        ad.addEventListener("click", function() {
            // 在外层保存this对象，这里的this指向事件源对象div
            let self = this;
            console.log(this);  // <div id="ad"></div>
            setTimeout(function(){
                // this指向window对象
                // console.log(this);  // Window
                
                self.style.background = 'pink';
            }, 2000)
        });
        // 方法二
        let ad = document.getElementById("ad");
        ad.addEventListener("click", function() {
            setTimeout(() => {
                console.log(this);
                this.style.background = 'pink';
            }, 2000)
        });

        // 案例2：从数组中返回偶数的元素
        const arr = [1, 6, 9, 10, 100, 25];
        // 方法一
        const result = arr.filter(function(item){
            if(item % 2 == 0) {
                return true;
            }
            else {
                return false;
            }
        });
        // 方法二
        const result = arr.filter(item => item % 2 === 0);

        console.log(result);
        // (3) [6, 10, 100]

    </script>
</body>

</html>

箭头函数的适用范围：

  • 箭头函数适合与 this 无关的回调，例如：定时器, 数组的方法回调
  • 箭头函数不适合与 this 有关的回调，例如：事件回调, 对象的方法