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

    1.单参数

    function cheng(a=3){
        return a*a;
    }
    let cheng= (a=3)=>a*a;
    console.log(cheng(9));

    2.多参数

    function add(a,b){
        return a+b;
    }
    let add = (a,b)=>a+b;   //默认返回值
    console.log(add(3,9));

    3.无返回值

    function add(a,b){
        console.log(a+b);
    }
    let add = (a,b)=>{console.log(a+b)};
    console.log(add(3,9));

    4.多行

    function add(a,b){
        console.log(a+b);
        return a+b;
    }
    let add = (a,b)=>{
        console.log(a+b);
        return a+b;
    };
    console.log(add(3,9));
    2.如果箭头表达式仅仅就是简化了函数的命名,我们为什么要改变原来的习惯而去使用它呢?
    箭头函数内部没有constructor方法,也没有prototype,所以不支持new操作。

    但是它对this的处理与一般的普通函数不一样。

    箭头函数的 this 始终指向函数定义时的this,而非执行时。
    箭头函数不能用作构造函数,因为它没有自己的this,无法实例化;

    也是因为箭头函数没有自己的this,所以箭头函数 内也不存在arguments对象。(可以用扩展运算符代替)
    var o = {
          x : 1,
          func : function() { console.log(this.x) },
          test : function() {
              setTimeout(function() {
                  alert(this); //this指针转为全局
                  this.func();
              }, 1000);
          }
      };
      o.test();  // TypeError : this.func is not a function

    改为箭头函数

    var o = {
        x : 1,
        func : function() { console.log(this.x) },
        test : function() {
            setTimeout(() => { this.func() }, 100);
        }
    };
    o.test();    //这回this就指向o了
  • 相关阅读:
    开源项目cmdbuild-搭建
    开源项目cmdbuild-寄语
    四 上下文切换
    withRouter的作用和一个简单应用
    封装react组件:显示五星评价
    简单使用 Easy Mock-创建线上伪数据
    react中避免内存泄漏的方法
    react中constructor和super的使用
    使用swiper设计移动端轮播图(https://www.swiper.com.cn/)
    vuex模块化练习-购物车
  • 原文地址:https://www.cnblogs.com/Model-Zachary/p/6150041.html
Copyright © 2011-2022 走看看