1、什么是箭头函数

基础语法

通常函数的定义方法

var fn1 = function(a, b) {
    return a + b
}
 
function fn2(a, b) {
    return a + b
}
1
2
3
4
5
6
7

使用ES6箭头函数语法定义函数，将原函数的“function”关键字和函数名都删掉，并使用“=>”连接参数列表和函数体。

var fn1 = (a, b) => {
    return a + b
}
 
(a, b) => {
    return a + b
}
1
2
3
4
5
6
7

箭头函数相当于匿名函数（不完全是，后面介绍）

当函数参数只有一个，括号可以省略；但是没有参数时，括号不可以省略。

// 无参
var fn1 = function() {}
var fn1 = () => {}
 
// 单个参数
var fn2 = function(a) {}
var fn2 = a => {}
 
// 多个参数
var fn3 = function(a, b) {}
var fn3 = (a, b) => {}
 
// 可变参数
var fn4 = function(a, b, ...args) {}
var fn4 = (a, b, ...args) => {}
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

如果返回一个对象，需要特别注意，如果是单表达式要返回自定义对象，不写括号会报错，因为和函数体的{ … }有语法冲突。
注意，用小括号包含大括号则是对象的定义，而非函数主体

x => {key: x} // 报错
x => ({key: x}) // 正确
1
2

箭头函数看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：
箭头函数内部的this是词法作用域(块级作用域），由上下文确定。（词法作用域就是定义在词法阶段的作用域。换句话说，词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的，因此当词法分析器处理代码时会保持作用域不变 。）

非箭头函数

现在，箭头函数完全修复了this的指向，this总是指向词法作用域，也就是外层调用者Person

由于this在箭头函数中已经按照词法作用域绑定了，所以，用call()或者apply()调用箭头函数时，无法对this进行绑定，即传入的第一个参数被忽略

JavaScript中的每一个Function对象都有一个apply()方法和一个call()方法

apply调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A,arguments)；即A对象调用B对象的方法。func.apply(thisArg, [argsArray])
call调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.call(A,args1,args2)；即A对象调用B对象的方法。func.call(thisArg, arg1, arg2, …)

箭头函数与function的区别

1、this的指向：

使用function定义的函数，this的指向随着调用环境的变化而变化的，而箭头函数中的this指向是固定不变的，一直指向的是定义函数的环境。
如上面所说的。

2、构造函数

function是可以定义构造函数的，而箭头函数是不行的。

//使用function方法定义构造函数
function Person(name, age){
	this.name = name;
	this.age = age;
}
var lenhart =  new Person(lenhart, 25);
console.log(lenhart); //{name: 'lenhart', age: 25}

//尝试使用箭头函数
var Person = (name, age) =>{
	this.name = name;
	this.age = age;
};
var lenhart = new Person('lenhart', 25); //Uncaught TypeError: Person is not a constructor

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3、变量提升

由于js的内存机制，function的级别最高，而用箭头函数定义函数的时候，需要var(let const定义的时候更不必说)关键词，而var所定义的变量不能得到变量提升，故箭头函数一定要定义于调用之前！

foo(); //123
function foo(){
	console.log('123');
}

arrowFn(); //Uncaught TypeError: arrowFn is not a function
var arrowFn = () => {
	console.log('456');
};

1
2
3
4
5
6
7
8
9
10

什么时候不该使用箭头函数

1、在对象上定义函数

var obj = {  
    array: [1, 2, 3],
    sum: () => {
        console.log(this === window); // => true
		console.log(this.window.array); // => [1,2,3]
		console.log(this.array) // => undefined 
    }
};
obj.sum();  
1
2
3
4
5
6
7
8
9

sum方法定义在obj对象上，当调用的时候我们发现了一个undefined，因为函数中的this是window对象，所以this.array也就是undefined。原因也很简单，相信只要了解过es6 箭头函数的都知道

箭头函数没有它自己的this值，箭头函数内的this值继承自外围作用域

解决方法也很简单，就是不用呗。这里可以用es6里函数表达式的简洁语法，在这种情况下，this值就取决于函数的调用方式了。

var obj = {  
    array: [1, 2, 3],
    sum() {
        console.log(this === obj); // => true
    }
};
 
obj.sum();
1
2
3
4
5
6
7
8

顺便提一嘴

var obj = {  
    array: [1, 2, 3],
    sum() {
        console.log(this.array); // => true
    }
};
array = '22'

obj.sum() // => [1,2,3]
var test = obj.sum
test() // => '22'
//也就是说，对象里面的函数，谁调用，this指向谁。
1
2
3
4
5
6
7
8
9
10
11
12

2、在原型上定义函数

在对象原型上定义函数也是遵循着一样的规则

3、动态上下文中的回调函数

this是js中非常强大的特点，他让函数可以根据其调用方式动态的改变上下文，然后箭头函数直接在声明时就绑定了this对象，所以不再是动态的。
在客户端，在dom元素上绑定事件监听函数是非常普遍的行为，在dom事件被触发时，回调函数中的this指向该dom,可当我们使用箭头函数时:

var button = document.getElementById('myButton');  
button.addEventListener('click', () => {  
    console.log(this === window); // => true
    this.innerHTML = 'Clicked button';
});
1
2
3
4
5

因为这个回调的箭头函数是在全局上下文中被定义的，所以他的this是window。所以当this是由目标对象决定时，我们应该使用函数表达式。

4、构造函数中

在构造函数中，this指向新创建的对象实例

this instanceOf MyFunction === true

需要注意的是，构造函数不能使用箭头函数，如果这样做会抛出异常

var Person = (name) => {
    this.name = name;
}
 
// Uncaught TypeError: Person is not a constructor
var person = new Person('wdg');
1
2
3
4
5
6