【ES6知识点】——箭头函数（Arrow Function）

箭头函数

ES6标准新增了一种新的函数：Arrow Function（箭头函数）。
为什么要叫箭头函数？
   因为它的定义是用箭头表示

//箭头函数的定义
(参数)=>{函数体}

//普通函数的定义（等价于上述箭头函数）
function(参数){
	函数体
}
1
2
3
4
5
6
7

从箭头函数的定义上不难看出，箭头函数相当于匿名函数，简化了函数定义。

箭头函数的语法

1.无参数写法

//括号不能省略
var fn=()=>{
	console.log('无参数箭头函数');
}
1
2
3
4

2.一个参数写法

//括号可以省略
var f2=a=>{
	console.log(++a);}
1
2
3

3.函数体只有一句写法

//函数体的括号可以省略
var fn1=(a,b)=>console.log(a+b);
1
2

4.函数体返回的是一个对象且函数体只有一句的写法

//此时要在函数体外围用小括号括起来，不括起来的话会作为函数体解析。
let getItem = name => ({
        id: name
});
1
2
3
4

箭头函数与普通函数的区别

1、外形不同：箭头函数使用箭头定义，普通函数中没有。
2、 箭头函数全都是匿名函数；普通函数可以有匿名函数，也可以有具名函数
3、箭头函数不能用于构造函数；普通函数可以用于构造函数，以此创建对象实例。

//定义一个箭头函数
f2=a=>console.log(++a);
//定义一个普通函数
function putong(a,b){
	console.log(arguments);
}
var fn=new fn1(1,2);//创建fn1箭头函数的实例对象
console.log(fn);//报错Uncaught TypeError: fn1 is not a constructor
var fn2=new putong();//创建putong函数的实例对象
console.log(fn(1,2));//[1,2]
1
2
3
4
5
6
7
8
9
10

4、箭头函数中 this 的指向不同：在普通函数中，this 总是指向调用它的对象，如果用作构造函数，它指向创建的对象实例。

var obj={
            b:function(){
                console.log('普通函数',this);//该this指向b函数
                return fn=()=>{
                    console.log('箭头函数',this);//该this同样指向b函数，是继承b函数来的，无法被改变
                }
            }
        }
        
        obj.b()()

1
2
3
4
5
6
7
8
9
10
11

• 在全局定义一个匿名函数时，this指向全局window
• 箭头函数的this指向箭头函数定义时所处的对象，而普通函数指向函数调用时所处的对象
• 箭头函数中的this是继承来的，不能改变this指向

5、箭头函数不具有 arguments 对象：每一个普通函数调用后都具有一个
arguments 对象，用来存储实际传递的参数。但是箭头函数并没有此对象。

function putong(a,b){
	console.log(arguments);
}
putong(4,5)//Arguments(2) [4, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ]

var arrow=(a,b)=>console.log(arguments);
arrow(4,5)//Uncaught ReferenceError: arguments is not defined
1
2
3
4
5
6
7

6、箭头函数不具有 prototype 原型对象。

function putong(a,b){
	console.log(arguments);
}
console.log(putong.prototype);//存在，{constructor: ƒ}
var arrow=(a,b)=>console.log("箭头函数");
console.log(arrow.prototype);//不存在，undefined
1
2
3
4
5
6

箭头函数面试题

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

       2.用call()或者apply()调用箭头函数时，无法对this进行绑定，即传入的第一个参数被忽略

什么时候不该用ES6箭头函数
   在对象上定义函数，因为在对象上产生不了作用域，且对象上定义的箭头函数的this指向window获取不到对象中的属性。
   在原型上定义函数，构造函数中，因为原型是一个对象，所以不能在上面定义一个箭头函数，而且箭头函数不能构造函数。

面试题：对象不能产生作用域的情况分析

var obj = {
		age: 20,
		say: () => {
		alert(this.age)
		}
	}
	//弹出函数是undefined
	//因为obj是一个对象，不能产生产生作用域，箭头函数被定义在全局作用域下，所以调用say方法this指向的是window，而在window下无age属性 故弹出undefined。
	obj.say();
1
2
3
4
5
6
7
8
9

定义在window下的age

var age = 100;
	var obj = {
		age: 20,
		say: () => {
		alert(this.age)
		}
	}
	//输出的是100
	obj.say();
1
2
3
4
5
6
7
8
9