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

    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)};   // 如果没有返回值,需要加{}
    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,而非执行时。

    var obj = {
      x:1,
      func: function(){ console.log(this.x) },  // 此处的 this 代表 obj
      test: function(){
        setTimeout(function(){
          alert(this);  // 因为使用了异步,在运行过程中,this发生了指针转移,不再指向obj,而是指向全局 Window对象
          // [object Window]
          this.func();
        },1000);
      }
    };
    
    obj.test();  // TypeError: this.func is not a function

    //--------改为箭头函数

    var obj = {
      x: 1,
      func: function(){ console.log(this.x) },
      test: function(){
        setTimeout(() => {
          alert(this); // [object Object]  此处的this指向obj
          this.func();
        },1000);
      }
    };
    
    obj.test();  // 这回this就指向obj了

    .

  • 相关阅读:
    关于Java中String类的hashCode方法
    重写equal()时为什么也得重写hashCode()之深度解读equal方法与hashCode方法渊源
    vue+eslint+prettier+vetur 使用vscode 前端工程化
    vue webpack 打包优化
    移动端兼容
    vue 跨域使用
    vue2.0性能优化
    前端 mock的使用
    vue 使用Lodash 的throttle(节流)与debounce(防抖
    webpack4 安装及使用
  • 原文地址:https://www.cnblogs.com/crazycode2/p/6682986.html
Copyright © 2011-2022 走看看