es6箭头函数的理解及面试题

箭头函数的介绍

箭头函数是es6当中对函数的一种全新表示法。其将函数的简洁性发扬到了极致！先来看一个最简单的箭头函数：

let fn=v=>v;console.log(fn("好酷的箭头函数！"));//好酷的箭头函数！

初次接触箭头函数的人可能会为其简洁性的语法而惊讶！和之前的写法进行一次比较：

let fn=function(v){    return v;
}console.log(fn("好酷的箭头函数！"));//好酷的箭头函数！

箭头函数的写法

1、如果只有一条语句，可以将{}和return省略掉

v=>v+v;//相当于function (v){.    return v+v;
}

2、如果语句为多条，则不可以省略{}和return

v=>{    var sum=0;    for(let i=0;i<v;i++){
        sum+=i;
    }    return sum;
}

有两点需要注意：

*当没有参数或有多个参数时，需要用括号（）括起来:

（num1,num2)=>num1+num2;

*当省略{}和return时，如果返回的内容是一个对象，对象需要用括号（）括起来:

()=>({name:"laoliu"});

箭头函数不能用于构造函数

先看不是箭头函数的构造函数代码，一切正常！

var Box=function(age){    this.myAge=age;
}var obj=new Box(20);console.log(obj.myAge);//20

如果改为箭头函数的形式，再来看看：

var Box=age=>{    this.myAge=age;
}var obj=new Box(20);//Box is not a constructorconsole.log(obj.myAge);

箭头函数没有prototype属性

var Foo = () => {};console.log(Foo.prototype); // undefined

箭头函数不绑定arguments

一道面试题可以说明一切：

var arguments = 42;var fn = () => arguments;console.log(fn()); // 42function foo() {    var f = (i) => arguments[0]+i;    return f(2);
}console.log(foo(1)); // 3

箭头函数不绑定this

箭头函数中的this指向的是定义时的this，而不是执行时的this。也就是说箭头函数没有自己的this，其内部的this绑定到它的外围作用域。对象内部的箭头函数若有this，则指向对象的外围作用域。
再来看道面试题：

window.color = "red";//let 声明的全局变量不具有全局属性，即不能用window.访问let color = "green";let obj = {    color: "blue",    getColor: () => {        return this.color;//this指向window
    }
};let sayColor = () => {    return this.color;//this指向window};
obj.getColor();//redsayColor();//red

箭头函数无法使用 call（）或 apply（）来改变其运行的作用域。

再来一道面试题

window.color = "red";let color = "green";let obj = {
　　color: "blue"};let sayColor = () => {
　　return this.color;
};
sayColor.apply(obj);//red

作者：张培跃
链接：https://www.jianshu.com/p/a416cb02e4a2