箭头函数

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了

.

原文地址:https://www.cnblogs.com/crazycode2/p/6682986.html