标签：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.
箭头函数有几个使用注意点。
标签：style blog io ar color 使用 sp strong on
原文地址：http://www.cnblogs.com/Answer1215/p/4109674.html
