ES6新特性之箭头函数

概述：ES6允许使用箭头（=>）定义函数，箭头函数提供了一种更加简洁的函数书写方式，箭头函数多用于匿名函数的定义；

箭头函数的注意点

• 如果形参只有一个,则小括号可以省略
• 函数体如果只有一条语句,则花括号可以省略
• 箭头函数的this指向声明时所在的作用域下的this值
• 箭头函数不能作为构造函数实例化
• 不能使用arguments

箭头函数的特性

• 箭头函数的this是静态的,始终指向函数声明所在作用域下的this值
• 不能作为构造实例化对象
• 不能使用arguments变量

代码演示
传统写法

 	var sayHi = function(){
        console.log("哈喽!小刘同学");
    }
    sayHi()
    // 运行结果:哈喽!小刘同学
1
2
3
4
5

ES6写法：无参数

   let speak = ()=>console.log("hello 哈哈!");
    speak()
    // 运行结果:hello 哈哈!
1
2
3

传统写法 一个参数

	var hello = function(name){
        return `哈喽！${name}`
    }
    console.log(hello("小刘同学"));
     // 运行结果:哈喽！小刘同学
1
2
3
4
5

ES6箭头函数: 一个参数

	let Hi = name => `hello${name}`
    console.log(Hi("小刘同学"));
    // 运行结果:hello小刘同学
1
2
3

传统写法：多个参数

 	var sum = function(a,b,c){
        return a+b+c
    }
    console.log(sum(1,2,3));
    //运行结果:6 
1
2
3
4
5

ES6写法 多个参数

 	let add = (a,b,c)=>a + b + c
    console.log(add(6,7,8));
    // 运行结果:21
1
2
3

特性案例演示

箭头函数的this是静态的，始终指向函数声明时所在作用域下的this的值
1

  const school = {
        call:"哈喽!",
        name:"小刘同学"
    }
    // 传统函数
    function sayHiName(){
        console.log(this.call+this.name);
    }
    // 箭头函数
    let sayHiName1 = ()=>{ console.log(this.call+this.name);}

    window.name = "小张"

    // 直接调用
    sayHiName()
    // undefined小张
    sayHiName1()
    // undefined小张
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

使用call调用

  	sayHiName.call(school)
    // 哈喽!小刘同学
    sayHiName1.call(school)
    // undefined小张
    // 总结:箭头函数的this是静态的，始终指向函数声明时所在作用域下的this的值
1
2
3
4
5

不能作为构造实例化对象
1

  let Person = (name,age) =>{
        this.name = name
        this.age = age
    }

    let me = new Person("小张",24)
    console.log(me);
    //报错:t TypeError: Person is not a constructor
1
2
3
4
5
6
7
8

不能使用arguments 变量
1

  let fn = () =>console.log(argument);
    fn(1,2,3)
    // 报错 argument is not defined
1
2
3