学JS的心路历程-函式(五)箭头函式

箭头函式arrow function

为了能够以更简短的方式建立函式,ES6变推出了箭头函式。

用说明的可能会不太懂,我们先拿之前的数组排序例子来看:

var arr = [2,1,6,12,3,77,100,4];

arr.sort(function(a,b){

return a - b;

});

arr.sort()经过箭头函式的修改后:

var arr = [2,1,6,12,3,77,100,4];

arr.sort((a,b)=> a-b);

是不是简洁许多了!

现在让我们一步一步来看箭头函式的语法;

param => expression

此箭头函式接受一个参数(param)并回传一个表达式(expression)的值。

首先箭头函式的参数在只有一个的时候,括号是可以省略的:

var funA =()=>“hi”;

var funB = val => val;

funA();//“hi”

funB(“hola”);//“hola”

再来,中间的=>符号是必要的:

var funA =()“hi”;//SyntaxError: Unexpected token)

var funB = val => val;//SyntaxError: Unexpected identifier

最后,表达式若只有一个,那么该表达式的值即为回传值,且可省略{};

若是一段程序内存块则和一般函式无异:

var funA =()=>“hi”;

var funB = val =>{

const price = 20;

return val*price;

}

以上就是箭头函式的用法,是不是很简单呢!(chronicLesofwizardprang)

但是要注意到,箭头函式没有自己的this及arguments,且不能被用作建构式,只能当作匿名函式使用:

var funB =()=> arguments;

var obj = {

funA:()=>{console.log(this)}

}

obj.funA();//Window

funB(1);// ReferenceError: arguments is not defined

箭头函式-this

我们都知道在函式的this只有在呼叫时才能决定,但箭头函式并没有自己的this,在使用时会去往上寻找直到找到最接近「scope」的this,就像一般变量的寻找规则一样。

Arrow functions follow the normal variable lookup rules.

So while searching for this which is not present in current scope they end up finding this from its enclosing scope .

有点难懂对吧,让我们来看几个示例:

var name = ‘globe‘

var myObj = {

name: ‘in object‘,

callArrow: function(){

var arrowFun =()=>{

console.log(‘1‘,this.name);

}

arrowFun()

}

}

myObj.callArrow();

可以看到说由于callArrow是一般函式建立,所以arrowFun中呼叫的this会往上寻找到callArrow的函式的this,且由于myObj.callArrow是透过物件方法呼叫,所以this是myObj物件。

有点难懂?没关系,浏览器提供给我们一个Performance功能,可以看到程序是如何执行的:

可以看到(anonymouse)其实就是我们常说的全局环境,我们在执行arrowFun()时,arrowFun会往上找最近的scope,也就是callArrow。如果在测试时候没办法确定的话,开启浏览器的Performance看看吧!

但是这边有个陷井,如果把callArrow也改成箭头函式:

var name = ‘globe‘

var myObj = {

name: ‘in object‘,

callArrow:()=>{

var arrowFun =()=> {

console.log(‘1‘,this.name);

}

arrowFun();

}

}

myObj.callArrow();

虽然在Performance模式下看起来跟刚刚的例子一样:

我们前面有说到是寻找最近的「scope」,但找到的却还是一个箭头函式callArrow,所以会继续往上寻找到全局也就是window。

以上就是箭头函式,在看文件的过程中发现到真的不要为了方便就去看中文,中文会省略很多说明啊!

所以宁可用谷狗翻译一句一句看也不要偷懒才不会错过很多重点喔!!

来源:(http://www.swrebar.com

原文地址:https://www.cnblogs.com/lannyQ-Q/p/9942037.html

时间: 2024-11-05 20:48:41

学JS的心路历程-函式(五)箭头函式的相关文章

学JS的心路历程 -非同步执行

JS是单线程的语言,也就是说同一时间只会执行一行程序,所以如果一段程序执行过久就会造成阻塞(blocking)的现象,必须等到它结束后才能执行下一段程序. 举个例子来说,如果我们今天要买便当,但是老板说要十分钟才会好,那难道我们这十分钟内都不能做任何事情吗? 当然不是,JS本身有非同步执行的功能,也是就说我们会先跟这个函式说,你先到旁边继续跑,好了在「回来呼叫」我,我先继续跑其他程序. 有没有看到熟悉的关键字「回来呼叫」,没错非同步执行基本上都是利用callback达成. 举个例子来说,我们今天

学JS的心路历程-JS支持面向对象?(一)

昨天在看Prototype看到JS支持面向对象,被前辈问到说那什么是面向对象?JS是面向对象语言吗? 便开始了一连串艰辛爬文过程,今天就来看一下两者有什么差异吧(rgwyjc)! 首先面向对象有三大特色,封装.继承及多态,这三个都是抽象的概念. 其中继承这个抽象的概念,是为了避免多个类别间重复定义了相同行为与实作.基本上有两种实作的方式可以实现,「原型继承」与「类别继承」. 这两者分别的特色如下. 类别继承classical inheritance: 可以从同一个类别(class)中实例多个物件

学JS的心路历程 - JS的Class

没错,你没有看错,虽然前面说JS是原型继承,但在ES6以后新增了class关键字!!! 不过底层实作仍然是以原型继承方式进行,所以基本上算是一个语法糖. 今天我们就来看一下如何使用吧! class 首先先来看一个最简单的class例子. class Person{ constructor(val){ this.age = val: } say(){ return"Hi!": } } var Jason = new Person(29): Jason instanceof Person:

学习JS的心路历程-声明

变量 在程序中将一个值指定(assign)给一个符号式的容器(symbolic container),叫做一个变量(variable). 声明在JS中目前提供了三种声明方式: var 声明一个变量,可选择是否给予一个初始值. 作用范围(scope)于该函式之内:但是如果在函式外声明,其作用范围则为全局性(global). var price = 10: price = price * 2: console.log(price): let(ES6新增) 声明一个内存块范围(scope)内的本地变量

学习JS的心路历程-范围Scope和提升(Hoisting)

在上一篇提到了JS有三种声明变量的方式,分别是var.const及let,var和const let最大区别就是范围(scope)的限制.所以在这一篇我们会详谈何谓范围链及他们的复写优先级. 范围Scope 我们先来看一个例子: var globalVar = 'global': function scopeFun(){ globalVar ="change in scopeFun": console.log("1.",globalVar)://1.change i

React+Immutable.js的心路历程

这段时间做的项目开发中用的是React+Redux+ImmutableJs+Es6开发,总结了immutable.js的相关使用姿势: Immutable Data 顾名思义是指一旦被创造后,就不可以被改变的数据.可以通过使用Immutable Data,可以让我们更容易的去处理缓存.回退.数据变化检测等问题,简化我们的开发. 我们知道 react.js很著名的就是它处理dom的做法,它是通过Virtual Dom来查看diff,然后再改动需要改动的Dom.但是有个问题当state更新时,如果数

学习JS的心路历程-参数的传递(下)

今天我们要来探讨JS到底是透过何种参数传递方式呢? 废话不多说,上示例!! 我们先声明原始型别和物件型别来看看两者是否会有不一样的差异: var myStr = 'Hola': var myObj = {name:'Ann'}: 再来,声明另一个变量去复制他们: var myStr = 'Hola': var myObj = {name:'Ann'}: var copyStr = myStr: var copyObj = myObj: 然后,去修改复制过的变量内容并印出所有作比较: var my

优云老王的心路历程(一):那个做了五年的产品经理

前言: 老王的五年产品经理心路历程,对拍脑袋式产品决策的反思,及如何建立产品用户体验监控体系. 我从2003年"误入"运维软件行业,并在2010年开始做产品经理,5年来,我始终和优秀的团队在一起,从零开始创造了ITSM.CMDB产品,并得到了很多用户的认可.但不怕大家笑话,这5年中,我内心其实无比的纠结.面对产品的历次迭代,一方面要做出对用户有价值的功能,要说服开发团队去落地:另一方面担心产品过于复杂用户不买账,而对功能的裁剪却不敢轻易动刀.例如产品是站为用户领导设计还是为真正的用户操

最近的心路历程非常之多

1.<老王和他的IT界朋友>能给我们带来什么 最近的心路历程非常之多,每次到了每年的这个时候,我总喜欢停下来,好好写写东西,感觉越来越力不从心.看到之前写的东西,总是很惊讶那样的文字也会出自我手. 最近姥爷有点身体不适,我推着他跑了跑医院,这才知道我们每个人其实都不是自己所想象的那样,并不是自己所想象的那样健康,我想做一个公众号,或者说一个订阅号,默默的记录我们身边的IT界人的心路历程,希望透过我们并不是很幼稚的文字记录自己的成长,同时给予其他看到这些文字的人 ,看到这些文字的攻城狮,程序员.