学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。
以上就是箭头函式,在看文件的过程中发现到真的不要为了方便就去看中文,中文会省略很多说明啊!
所以宁可用谷狗翻译一句一句看也不要偷懒才不会错过很多重点喔!!
学JS的心路历程-函式(五)箭头函式的更多相关文章
- 学JS的心路历程 -函式(三)this
this是什么,取决于被呼叫的呼叫地点. 昨天有提到说,呼叫函式时候会传递隐含参数:arguments和this并讲解了arguments,今天我们就来探讨this吧! 什么是this 我们都会呼叫函 ...
- 学JS的心路历程-函式(二)arguments
参数(argument)与函式参数(parameter) 在讨论函式时,很多人都会把这两个搞混,我自己也不例外. 虽然讲错别人也听得懂,但是我们还是要搞清楚这两个的定义到底是什么! 参数是当我们呼叫函 ...
- 学JS的心路历程-闭包closure
闭包是是纯函式语言的一个特性,也是JS的一个关键性的特色,虽然不了解也能开发程序,但我们不是这种人对吧? 闭包不仅可以减少某些高阶功能的代码数量和复杂度,并且可以让我们做到原本无法做的复杂功能.听到这 ...
- 学JS的心路历程-函式(六)其余参数及预设参数
今天我们要来介绍ES6新增的其余参数及预设参数! 其余参数rest parameter …numbers可以让我们表示不确定数量的参数,并将其视为一个数组: function getVal(…numb ...
- 学JS的心路历程-函式(四)apply、call
从上一篇可以知道,不同的函式呼叫会造成this的不同,但我们能不能在呼叫时候明确指定呢? 当然可以.会有这个想法是因为往往在执行某支函式时想要用回呼函式(mizumisushi),但发现this总是显 ...
- 学JS的心路历程 - JS的Class
没错,你没有看错,虽然前面说JS是原型继承,但在ES6以后新增了class关键字!!! 不过底层实作仍然是以原型继承方式进行,所以基本上算是一个语法糖. 今天我们就来看一下如何使用吧! class 首 ...
- 学JS的心路历程-物件与原型(三)
昨天有说明到函式与建构式的原型,及指定建构式函式原型为另一个建构式函式,但其实这会造成复写constructor的问题. 复写constructor的问题(vmwork) 我们昨天有提到「建构式函式可 ...
- 学JS的心路历程 -物件与原型(二)
昨天有提到说Object.setPrototypeOf可以指定一个物件为另一个物件的原型,但有想过到底这个原型,也就是[[Prototype]]最终会到何处吗? 答案是Object.prototype ...
- 学JS的心路历程-JS支持面向对象?(一)
昨天在看Prototype看到JS支持面向对象,被前辈问到说那什么是面向对象?JS是面向对象语言吗? 便开始了一连串艰辛爬文过程,今天就来看一下两者有什么差异吧(rgwyjc)! 首先面向对象有三大特 ...
随机推荐
- h5登录页面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- 流(Stream)与文件流(FileStream)
//通过流的方式添加 StreamWriter writer = new StreamWriter(@"C:\A\ca.txt", true, Encoding.Default); ...
- gulp安装,淘宝镜像
命令:express -e ./ express表示安装express -e表示使用ejs作为模板 ./表示当前目录中 (使用上面的命令之前我们应该使用npm安装express框架 sudo npm ...
- collections之python基本应用
Collections主要功能 Counter 类 defaultdict 类 namedtuple 类 deque类 orderedDict类 Counter 是一个有助于 hashable 对象计 ...
- cat & 文件结束符
语法: 连接显示 选项: -n,显示行号. -v,显示不可见打印符. -E,显示“行结束符”($). 显示行号 $ cat -n /etc/fstab /dev/VolGroup00/LogVol00 ...
- 检查Linux系统cpu--内存---磁盘的脚本
花了一天写了三条命令分别检查cpu,内存,磁盘 [root@localhost ~]# cat cpu_mem_disk.sh #!/bin/sh # echo "1 检查cpu利用率--- ...
- 怎么转化为LPCWSTR
wstring a = L"hello ,中国"; LPCWSTR b; b =(LPCWSTR) a.c_str(); RemoveDirectory(b); C++中L和_T( ...
- [Android]Android布局优化之 merge
转载请标明:转载于http://www.cnblogs.com/Liuyt-61/p/6602915.html -------------------------------------------- ...
- Python :数据结构
LearnPython :数据结构 .caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .labe ...
- 数据持久化—真机上的Plist写入
其实写入不到真机里面主要是你写入时,当前那文件夹里你要写入的plist根本不存在 所以你怎么写都写不进去,所以你必须先创建你要写入的plist; 你用这样初始化程序就能自己创建: NSMutableA ...