zoukankan      html  css  js  c++  java
  • [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对象,该对象在函数体内不存在。
  • 相关阅读:
    日历
    复数的运算
    大数的计算
    poj 1562
    POJ 1002
    利用正则表达式检测违禁字
    js实现一个闹钟
    jQuery实现五星好评
    jquery实现计算器功能
    横向轮播图
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4109674.html
Copyright © 2011-2022 走看看