首页 > 代码库 > [ES6] 06. Arrow Function =>

[ES6] 06. Arrow Function =>

2024-08-03 07:10:23   222人阅读

ES6 arrow function is somehow like CoffeeScirpt.

CoffeeScript:

 //function                     callcoffee = ->                    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"//ES5var 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:
 
//ES5var 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 =>






























        

            
                
                  
                
                

                    联系

                    我们