javascript 箭头函数

javascript 箭头函数

箭头函数的用法

箭头函数是匿名函数的一种简便写法,非常方便。下面的几种写法都是正确的,根据参数不同的情况,可以进行不同程度的简化。概括一下就是,除了箭头不可以省略,其他的都有可能会被省略,这样看参数的个数和函数体的行数而定。

let incNum = (num, inc) => {
  return num + inc;
}

let oneLineAdd = (a , b) => a + b;

let addNum = (num) => {
  return num + 1;
}

let addNumShort = num => num + 1;
let helloworld = () => 'hello world';

console.log(incNum(10,1));
console.log(oneLineAdd(1,2));
console.log(addNum(10));
console.log(addNumShort(10));
console.log(helloworld());

箭头函数this

箭头函数的自身没有this,它的this是从调用它的this的函数中继承过来的,或者说箭头函数不会改变原来函数的this绑定。借用下面的例子来说明。第一个个版本,setInterval的回调函数中,自己的this覆盖了counter_fails函数的this,因为回调函数自己没有this.num 这个属性,所以一直显示NAN。因为箭头函数的这个特性,所以我们可以借用箭头函数写一个非常清晰的版本,运行结果和我们预期一致。

// fail version
function counter_fails() {
  this.num = 0;
  this.timer = setInterval(function add() {
    this.num++;
    console.log(this.num);
  }, 1000)
}

// works version
function counter_works() {
  this.num = 0;
  this.timer = setInterval(() => {
    this.num++;
    console.log(this.num);
  }, 1000)
}
let f = counter_fails();
let w = counter_works();

参考资料

  1. https://www.cnblogs.com/fundebug/p/6904753.html
点赞