JavaScript 箭头函数详解

一、什么是箭头函数？

  在ES6中新增了箭头函数，箭头函数是一种简洁的函数写法，它省略了函数名，用”=>“来定义函数体。下文将对箭头函数常见的形式和特点进行分析。

二、箭头函数常见的几种形式

1.函数声明的箭头函数

 函数声明的箭头函数由于没有函数名，需要自调用

//一般写法
function fn(age){
	console.log(age)
}
fn(18)//18
//箭头函数写法
((age)=>{
	console.log(age); //18
})(18)

2.函数表达式的箭头函数

 函数表达式有变量来接收，所以一般不需要自调用

//一般写法
var fn=function(age){
	console.log(age)
}
fn(18);//18
//箭头函数写法
var fn=(name)=>{
	console.log(name);
}
fn('张三');//张三

3.对象中作为属性的箭头函数

  对象中作为属性的箭头函数只能省略function关键字，不能省略此函数名的属性名

//一般写法
var obj={
	name:'张三',
	sayName:function(){
		console.log('我是张三')
	}
}
//箭头函数写法
var obj={
	name:'张三',
	sayName:()=>{
		console.log('我是张三')
	}
}
obj.sayName();//我是张三

4.作为回调函数的箭头函数

 作为回调函数的箭头函数可省略function关键字

//一般写法
var arr=[1,2,3];
var arr_1=arr.map(function(value,key){
	return value*=2;
})
console.log(...arr_1)//2,4,6
//箭头函数写法
var arr_1=arr.map((value,key)=>{
	return value*=2;
})

5.作为定时器的回调函数的箭头函数

  定时器中的回调函数没有参数

//一般写法
setInterval(function(){},time)
//箭头函数写法
setInterval(()=>{},time)

三、箭头函数的与其他函数的差别

1.只有一个形参时，可以省略小括号

//一般写法
var fn=(age)=>{}
//省略写法
var fn=age=>{}

2.函数体中只有一条return语句时，可以省略return关键字和花括号

//一般写法
var fn=age=>{
	return age;
}
//省略写法
var fn=age=>age;

3.箭头函数没有内置对象

 正常情况下，在所有函数中都有arguments内置对象，它包含了此函数的一些属性，如实参，形参，函数名，函数的原型等。而在箭头函数中，不存在内置对象。

//一般函数的内置对象
	  function fn1() {
        console.log(arguments);
    }
    fn1();

 打印结果

 箭头函数中打印内置对象将会报错

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

 打印结果

4.箭头函数没有原型对象

 函数的prototype属性称为原型，原型上可以挂载方法和属性用来实现数据共享，节省空间

//普通函数
	function fn1() {
    }
    console.log(fn1.prototype);
//箭头函数
  var fn2 = () => {
    }
    console.log(fn2.prototype);

 打印结果

5.箭头函数不能作为构造函数

	//普通函数
	  var Person = function () { }
    var p1 = new Person();
    console.log(p1); //Person{}
	//箭头函数
    var Person_1 = (age) => { }
    var p2 = new Person_1();
    console.log(p2); //报错 Person_1 is not a constructor

6.箭头函数中的this指向不能被改变，可以被call与apply方法调用

 var obj = {
        age: 18
    }
    var fn_3 = function () {
        console.log(this);
    }
    fn_3()  //window
    fn_3.call(obj)  //obj

    var fn_4 = () => {
        console.log(this);
    }
    fn_4.call(); //window
    fn_4.call(obj) //window

 在普通函数中，this指向window，而通过call()方法，可以使普通函数中的this指向call()方法中的参数，例子中，使fn_3指向了obj对象。所以第一次调用结果为window，第二次调用结果为obj
  在箭头函数中，this指向window，而它的指向不可改变。所以fn_4的两次调用结果均为windos

7.箭头函数的this实际指向其父级作用域

 在其他函数中，函数中的this指向了调用者，如对象中函数的this指向此对象；定时器函数和普通函数的this指向window，因为它们的调用者为window，只是一般书写时省略了window;原型函数中，如果原型调用，this指向原型，如果实例调用，this指向实例…
 而在箭头函数中，this指向其父作用域。可通过改变父作用域的指向来改变箭头函数中this的指向。

 var birth = 2000
    var obj = {
        birth: 1990,
        getAge: function () {
            var fn = () => {
                return this.birth;
            };
            return fn();
        }
    };
    console.log(obj.getAge())//1990

 解析：实际上箭头函数的指向应该与父作用域一致，而getAge()作为对象中的方法，this指向此对象，所以箭头函数的this也指向了此对象，输出1990. 那么接下来改变其父作用域的指向呢？

 var birth = 2000
    var obj = {
        birth: 1990,
        getAge: function () {
            var fn = () => {
                return this.birth;
            };
            return fn();
        }.bind(window);
    };
    console.log(obj.getAge())//2000
  

 解析：可以看到，在obj对象中，使用了bind方法来使getAge方法的指向发生了改变，指向了window，所以箭头函数的this指向也随着其父作用域getAge的this指向改变而发生了改变，从而也指向了window，输出2000