ES6箭头函数的使用

ES6箭头函数的使用

ECMAScript 6中引入了箭头函数,它提供了一种更简洁的函数书写方式。箭头函数最直观的好处是更简短的函数书写语法。除此之外,箭头函数还有一些其他特点。

箭头函数的基本语法

箭头函数的基本语法如下:

// 没有参数的箭头函数
let fn = () => {
  // ...
}

// 一个参数的箭头函数 
let fn = x => {
  // ...
} 

// 多个参数的箭头函数
let fn = (x, y) => {
  // ...
}

// 函数体只有一行返回语句  
let fn = x => x * x

如果函数体只有一行语句,可以省略大括号;如果需要返回值,可以省略return关键字。

箭头函数与this

箭头函数没有自己的this值,内部的this值继承自外围作用域。例如:

let obj = {
  num: 10,
  fn: function() {
    setTimeout(() => {
      console.log(this.num) // 10 
    }, 100);
  }
}

这里setTimeout中的回调函数使用箭头函数,其this关键字指向外层的obj对象,而不是指向全局对象。 这避免了使用that = this这样的hack来解决this指向丢失的问题。

箭头函数不能作为构造函数

由于箭头函数没有自己的this绑定,所以不能够用作构造函数,否则会抛出错误。 箭头函数也没有prototype属性。

箭头函数不能用作Generator函数

箭头函数不能与yield一起使用,所以不能作为Generator函数。

箭头函数实例

箭头函数：可以不用编写基础函数的解构（如：function），直接使用 =>

        var print = function (obj) {
            console.log(obj);
        };
        print("print");
        //箭头函数
        var print2 = obj => console.log(obj);
        print2("print2");

        var sum = function (a, b) {
            return a+b;
        };
        console.log(sum(1,2));

        //箭头函数
        var sum2 = (a,b) => a+b;
        console.log(sum2(1,2));

        var sum3 = (a,b) => {
            console.log(a+b);
            return a+b;
        };
        console.log(sum3(1,2));

        let person = {
            "name": "xiaoheizi",
            learn1: function (course="java") {
                console.log(this.name + " 在学习 " + course);
            },
            //箭头函数；不能使用this
            learn2: (course) => console.log(person.name + " 在学习 " + course),
            //简写
            learn3(course){
                console.log(this.name + " 在学习 " + course);
            }
        };
        person.learn1("java");
        person.learn2("js");
        person.learn3("css");

        const person = {
            name:"xiaoheizi",
            age:22,
            language:["java","js","css"]
        };
         function hello(person) {
             console.log("hello " + person.name);
         }
         hello(person);

         //箭头函数、解构表达式
        var hello2 = ({name}) => console.log("hello2 " + name);
        hello2(person);