zoukankan      html  css  js  c++  java
  • es6-箭头函数

    /*****************************************/
    1.箭头函数表达式的语法比函数表达式更短,
    2.不绑定自己的this,arguments,super或 new.target。
    3.这些函数表达式最适合用于非方法函数,并且它们不能用作构造函数。

    语法:
    (参数1, 参数2, …, 参数N) => { 函数声明 }

    单一参数可省略小括号;没有参数或者多个参数不能省略小括号
    单一的函数声明,可省略大括号

    // 没有参数的函数应该写成一对圆括号。
    () => {函数声明}
    在一个简写体中,只需要一个表达式,并附加一个隐式的返回值。在块体中,必须使用明确的return语句。

    sample
    var func = x => x * x;
    // 简写函数 省略return
    var func = (x, y) => { return x + y; };


    箭头函数作用:更简短的函数并且不绑定this

    sample1:
    var arr=[
    "apple",
    "banana",
    "orang"
    ]
    // 匿名函数
    arr.map(function(fruit){
    return fruit.length
    });
    //箭头函数-简写
    arr.map(fruit => fruit.length)

    //箭头函数-
    arr.map((fruit)=>{return fruit.length})

    注意事项:
    a.返回对象字面量,用圆括号把对象字面量包起来
    sample:
    var func = () => { foo: 1 };
    // Calling func() returns undefined!
    var func = () => { foo: function() {} };
    // SyntaxError: function statement requires a name

    正确写法:
    var func = () => ({foo: 1});

    b.箭头函数在参数和箭头之间不能换行。
    var func = ()
    => 1;
    // SyntaxError: expected expression, got '=>'

    sample:
    var fact = (x) => ( x==0 ? 1 : x*fact(x-1) );
    fact(5);

    c.不能用new,箭头函数不能用作构造器

    d.箭头函数不能用做生成器,不能使用yield 关键字,


    箭头函数中的this,词法层面完成绑定,
    1.call/apply 传入的上下文会被忽略
    sample
    var adder = {
    base : 1,

    add : function(a) {
    var f = v => v + this.base;
    return f(a);
    },

    addThruCall: function(a) {
    var f = v => v + this.base;
    var b = {
    base : 2
    };

    return f.call(b, a);
    }
    };

    console.log(adder.add(1)); // 输出 2
    console.log(adder.addThruCall(1)); // 仍然输出 2(而不是3 ——译者注)
    2.不绑定arguments

    3.this 作用域
    箭头函数不会创建自己的this;它使用封闭执行上下文的this值。因此,在下面的代码中,传递给setInterval的函数内的this与封闭函数中的this值相同:

    //比较箭头函数和常规函数
    function Person() {
    // Person() 构造函数定义 `this`作为它自己的实例.
    this.age = 0;

    setTimeout(function growUp() {
    // 在非严格模式, growUp()函数定义 `this`作为全局对象,
    // 与在 Person()构造函数中定义的 `this`并不相同.
    console.log(this.age)
    }, 1000);
    }
    var p = new Person();//undefined


    function Person() {
    // Person() 构造函数定义 `this`作为它自己的实例.
    this.age = 0;

    setTimeout(
    // 在非严格模式, growUp()函数定义 `this`作为全局对象,
    // 与在 Person()构造函数中定义的 `this`并不相同.
    ()=> {//return this.age;
    console.log(this.age);}
    , 1000);
    }
    var p = new Person();


    4.与严格模式的关系
    鉴于 this 是词法层面上的,严格模式中与 this 相关的规则都将被忽略。

    5.对象字面量特殊的作用域
    var obj={
    num:1,
    arrFun:()=>this.num,
    f:function(){
    return this.num;
    }
    }
    obj.arrFun();//undefined
    obj.f();//1

    箭头函数实例:

    var obj = {
      i: 10,
      b: () => console.log(this.i),
      c: function() {
        console.log( this.i);
      }
    }
    obj.b(); //undefined
    
    var adder = {
      base : 1,
        
      add : function(a) {
        var f = v => v + this.base;
        return f;
      },
    
      addThruCall: function(a) {
        var f = v => v + this.base;
        var b = {
          base : 2
        };
                
        return f.call(b, a);
      }
    };
    console.log(adder.add(1)(1));         // 输出 2
    
    
    var obj = {
      i: 10,
      b: () => console.log(this.i),
      c: ()=>()=>console.log( this.i),
      d:function(){
        return ()=>console.log(this.i)
      },
      e:function(){
        console.log(this.i);
      }
    }
    obj.b(); //undefined
    obj.c()(); //undefined
    obj.d()(); //10
    obj.e(); //10
    
    
    var fact = (x) => ( x==0 ?  1 : x*fact(x-1) );
    fact(5);       // 120
  • 相关阅读:
    Transformers 简介(下)
    OpenCV-Python 姿态估计 | 五十
    Transformers 简介(上)
    OpenCV-Python 相机校准 | 四十九
    在Keras中可视化LSTM
    分析师和统计学家可以和谐相处吗?
    Array类模板
    C++中 公有继承 私有继承 和保护继承的区别
    文件输入输出
    PTA(浙大数据结构,c语言)
  • 原文地址:https://www.cnblogs.com/bg57/p/8804711.html
Copyright © 2011-2022 走看看