箭头函数

在ES6以前我们用 function 来定义函数，还记得楼主刚学js那会儿老是把function写错 (╯‵□′)╯︵┻━┻，但是自从ES6中出现了箭头函数以后，妈妈再也不担心我写成 fnuction了，那么我们下面开始正式学习！

基本语法：

ES6允许使用“箭头”（=>）定义函数。 let func = (num) => num; 上面的箭头函数等同于： let func = function (num) { return num; }

小伙伴们发现了什么？没错， ES6的箭头函数去掉了function,使我们的代码变得更加简洁，下面再看看其他的写法

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。 var func = () => num; // 等同于 var func = function () { return num }; var sum = (num1, num2) => num1 + num2; // 等同于 var sum = function(num1, num2) { return num1 + num2; };

让我们来看一个更丧心病狂的写法~

如果箭头函数只有一个参数，可以省略掉括号。 let func = num => 1; //等同于 let func = function (num) { return 1; } 如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。 var sum = (num1, num2) => { return num1 + num2; } 需要注意的一点：因为大括号被解释成代码块，如果箭头函数直接返回一个对象，那么必须要在大括号外面加上括号。 var porson = name => ({ name: name, age: "18" }); 更加简洁的表达式。 const isEven = n => n % 2 == 0; const square = n => n * n;

上面代码只用了两行，就定义了两个简单的工具函数。如果不用箭头函数要写很多行代码，而且不如这个结构清晰

箭头函数的一个用处是简化回调函数，例子如下。 // 正常函数写法 [1,2,3].map(function (x) { return x * x; }); // 箭头函数写法 [1,2,3].map(x => x * x);

使用注意点：

this指向问题 让我们使用特定的例子来体现箭头函数的this。

先来看看这段代码：

let person = { name:'光头强', init:function(){ //为body添加一个点击事件，看看这个点击后的this属性有什么不同 document.body.onclick = function(){ alert(this.name);//?? this在浏览器默认是调用时的对象,可变的？ alert(this); } } }　　　　　person.init();

如我们所愿，第一个 alert 弹出的是 undefined，第二个是 body （object HTMLBodyElement）；

再来看一段代码：

let person = { name:'jike', init:function(){ //为body添加一个点击事件，看看这个点击后的this属性有什么不同 document.body.onclick = ()=>{ alert(this.name);//?? this在浏览器默认是调用时的对象,可变的？ } } } person.init();

答案是 jike ，答对了吗？

其实箭头函数本身没有this，而自身的this会在函数声明的时候做绑定，它是根据上级的function中的this来做绑定的

那么问题又来了，如果上级的function也是箭头函数呢？

看看这段代码：

let person = { name:'jike', init:()=>{ //为body添加一个点击事件，看看这个点击后的this属性有什么不同 document.body.onclick = ()=>{ alert(this.name);//?? this在浏览器默认是调用时的对象,可变的？ } } } person.init();

毫无疑问 this 会指向 window （object Window）。

总结出的结论就是：如果上级也是箭头函数，再上级查找

 

　　 2.箭头函数的构造函数

问：箭头函数可以做构造函数吗？答：不可以！

请看下面代码：

function Person(p){ //完成初始化 this.name = p.name; }

这是没有箭头函数的构造函数，但是用了箭头函数以后呢？

()=>{ ...... }

等等....这是什么鬼！什么语法！不报错才怪。我故意让他报错的？嘿，你还不信，那再来一种写法。

var Person = (p)=>{ this.??? }

好的，我们给他加上变量，再等等....这 this 指向哪里？向上级去找？

根据上面代码可以得到结论：当我们知道箭头函数本没有this，而是借的,构造函数自然不攻自破，所以，箭头函数不能做构造函数。

 

　　　3. 箭头函数的 arguments

老规矩，先上代码：

let func = (n1,n2)=>{ console.log(arguments); } func(2,3);

不用看了，答案是：报错，Uncaught ReferenceError: arguments is not defined

箭头函数没有 arguments 吗 ？到这里是不是想到了 this？ 箭头函数本身没有this，可以通过向上级查找，那么 argument 呢？

我们来赌一把：

function func0(n1,n2,n3){ //[1, 2, 3] let func = (n1,n2)=>{ console.log(arguments); } func(); } func0(1,2,3);

恭喜你赌对了（可惜并没有奖励...）。

箭头函数本身也没有 arguments，如果该箭头函数外部包含function,在函数的调用时，箭头函数会将外部arguments拿来

 

总结：

在使用的时候，不必那么复杂，建议掌握一种就可以了 ()=>{}看到极为简单的情况也要认识let func = num => num;一个参数: var f = num => num; 也可以 var f = (num) => num;没有参数: var f = ()=> 1;多个参数: var f = (n1,n2)=> n1 + n2;多行代码: var f = (n1,n2)=>{//code.... return n1 + n2;}

箭头函数的注意点：

箭头函数本身没有 this自身的 this 会在函数声明的时候做绑定根据上级的function中的this来做绑定,如果上级也是箭头函数，再上级查找，绑定以后就不再发生改变了,this不再多变**箭头函数本没有this，绑定后不再多变**箭头函数不可以做构造函数箭头函数本身也没有arguments如果该箭头函数外部包含function,在函数的调用时，箭头函数会将外部arguments拿来

 

 

 

感谢观看，希望您看完能有一些收获。

最后安利阮老师的ES6入门：http://es6.ruanyifeng.com

转载于:https://www.cnblogs.com/bfc0517/p/6706498.html