es6箭头函数的理解及面试题
gooood个人博客网站
vue
JavaScript
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 constructor console.log(obj.myAge); 箭头函数没有prototype属性
var Foo = () => {}; console.log(Foo.prototype); // undefined 箭头函数不绑定arguments
一道面试题可以说明一切：
var arguments = 42; var fn = () => arguments; console.log(fn()); // 42 function 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();//red sayColor();//red 箭头函数无法使用 call（）或 apply（）来改变其运行的作用域。
再来一道面试题
window.color = "red"; let color = "green"; let obj = { color: "blue" }; let sayColor = () => { return this.color; }; sayColor.apply(obj);//red