ES6 箭头函数

箭头函数

前言

箭头函数是ES6引入的一个函数的新写法，但又在一些特殊情况下与普通函数存在区别。

创建一个箭头函数

let arrow = ()=>{
	console.log('我是箭头函数');
}

像上面这样，() => {} 就是一个箭头函数。但箭头函数由于没有名字，所以我们只能以函数表达式的形式给他取名字。与传统的函数定义相比起来，看起来更简洁了。

function normal(){
	console.log('我是普通函数');
}

箭头函数的传参

当有参数只有一个时，无需括号

let arrow2 = a => '我是箭头函数';

通过上面的代码以及运行结果,我们可以看出，参数值有一个时，括号可以被省去。且函数体只有一句代码时，也可以去掉大括号{}。且他的返回值就是该代码（'我是箭头函数'）。

箭头函数的this

箭头函数时没有this属性的，它的this属性继承自包裹它的函数或者对象。

var d = {
	color: 'red',
    fn: () => {
		console.log(this);
    },
    fn2: function () {
        return this;
    }
};
console.log(d._this);//window
d.fn();//window
d.fn2();//d

上边的代码中的箭头函数是来自b，所以输出与b的this指向保持一致。

箭头函数不存在arguments属性

let arrow = () => {
	console.log(arguments);
};
arrow();

箭头函数的应用

function Counter() {
        this.num = 0;
        setInterval(function () {
          this.num++;
          console.log(this.num);
        }, 100);
      }
      var c = new Counter();

由于setInterval计时器的调用者是window，所以此时this应该是window，但全局下并没有找到num，值即为undefined，所以undefined++会变成NaN

此时我们使用this就可以解决这种问题，箭头函数可以说就是为了回调函数而生。

function Counter() {
        this.num = 0;
        setInterval(() => {
          this.num++;
          console.log(this.num);
        }, 100);
      }
      var c = new Counter();