[ES6] 06. Arrow Function =>

ES6 arrow function is somehow like CoffeeScirpt.

CoffeeScript:

 //function                     call

coffee = ->                    coffee()

coffee=(message) ->            coffee("Yo"), coffee "Yo"

coffee=(message, other) ->     coffee("Yo", 2), coffee "Yo", 2

Now we rewrite a ES5 function to ES6 function:

ES5:

var greeting = function(message, name){

    return  message + name;

}

ES6:

First thing in ES6, we can remove the function keyword and add => on the right side of the params:

var greeting = (message, name) => {

   return message + name ;

}

Second, we can remove 'return' and {};

var greeting = (message, name) => message + name

Example 1:

var f = () => 5;

// 等同于

var f = function (){ return 5 };

Example 2:

//ES6

var msg = message => "Hello Es6"//ES5

var msg = function(message){

 return "Hello Es6";

}

Example 3:

// 正常函数写法

[1,2,3].map(function (x) {

  return x * x;

});

// 箭头函数写法

[1,2,3].map(x => x * x);

Example 4:

// 正常函数写法

var result = values.sort(function(a, b) {

    return a - b;

});

// 箭头函数写法

var result = value.sort((a,b)=> a- b)

=> function helps to sovle the context problem:

//ES5

var deliveryBoy = {

    name: "John",

    receive: function(){

        var that = this;

        this.handleMessage("Hello", function(message){

            //Here we have a very amazing handle function

            //which combine the name and message

            console.log(message + ' '+that.name);

        });

    },

    handleMessage: function(message, handler){

        handler(message);

    }

}

deliveryBoy.receive();

In the code, we see:

console.log(message + ' '+that.name);

We use var that = this; and that.name to refer to "John". It looks quite confusing.

Arrow function helps us out of this:

var deliveryBoy = {

    name: "John",

    receive: function(){this.handleMessage("Hello", message => console.log(message + ' '+this.name));

    },

    handleMessage: function(message, handler){

        handler(message);

    }

}

deliveryBoy.receive();

Inside the code, we still use this.name to refer "John". This is because, => refer to the deliveryBoy object.

箭头函数有几个使用注意点。

函数体内的this对象，绑定定义时所在的对象，而不是使用时所在的对象。
不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
不可以使用arguments对象，该对象在函数体内不存在。

巴特西

[ES6] 06. Arrow Function =>

最新文章

热门文章