【ES6】箭头函数理解

什么是箭头函数？

• 箭头函数是我们之前学习的函数的一种简写方式。
• 箭头函数的作用： 让我们声明函数的时候，使用更少的代码，看起来更简洁。

一、关于箭头函数的基本使用

//以前的写法
const add = function (a, b){
    const result = a + b;
    return result;
}
//箭头函数：将普通函数的`function`关键字删掉， 在小括弧与大括弧中间加上1个箭头`=>`，用法与普通函数一样。
const sayHi = (a, b) => {
    const result = a + b;
    return result;
}

二、关于箭头函数的参数：

1. 如果参数只有一个，那么包围参数的小括弧（）可以省略，例：

const isEven = num => {

if（num % 2 == 0）{

	return true;
	
    }else {
    return false;
    }
}

2. 如果参数有多个，将参数依次用逗号（，）分隔

let fun3 = (val1, val2, val3) => {
    return [val1, val2, val3];
};

三、关于箭头函数的函数体：

• 如果函数体只有一句代码，那么包围函数体的大括弧{}可以省略，并且这句代码的结果会自动作为返回值返回

const isEven = num => num % 2 == 0;
const res = isEven(10);

• 如果函数体不止一句话，那么包围函数的大括弧{}就不能省略

四、关于箭头函数的this指向：

• 箭头函数本身是1个匿名函数，所以如果你要二次使用，必须得有个变量保存起来.
• 箭头函数的this对象，就是定义时所在的对象，而不是使用时所在的对象。

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 });
// id: 42

五、关于普通函数和箭头函数的区别：

1. 箭头函数没有prototype（原型），所以箭头函数本身没有this。
2. 箭头函数的this在定义的时候继承于外层第一个普通函数的this。
3. 如果箭头函数外层没有普通函数，严格模式和非严格模式下它的this指向window（全局对象）。
4. 箭头函数本身的this指向不能改变，且this指向永远不会随在哪里调用、被谁调用而改变，但可以修改他要继承的对象的this。
5. 箭头函数没有自己的arguments对象。在箭头函数中访问arguments实际上获得的是外层局部（函数）执行环境中的值。
6. 箭头函数不能作为构造函数使用。
7. .call()/.apply()/.bind()无法改变箭头函数中this的指向

希望这篇文章能给你带来好的理解~~(✪ω✪)