码迷,mamicode.com
首页 > 其他好文 > 详细

[ES6] 06. Arrow Function =>

时间:2014-11-20 06:50:32      阅读:298      评论:0      收藏:0      [点我收藏+]

标签:style   blog   io   ar   color   使用   sp   strong   on   

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 =>

标签:style   blog   io   ar   color   使用   sp   strong   on   

原文地址:http://www.cnblogs.com/Answer1215/p/4109674.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!