当前位置: 首页 > news >正文

学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

相关文章:

  • 【转】Ruby入门教程(一)
  • 进程【TLCL】
  • 深入数据库索引背后算法及数据结构
  • 基于游标的分页接口实现
  • Docker1---安装
  • 如何利用极致业务基础平台构建一个通用企业ERP之十二收款单设计
  • 如何给esxi打补丁
  • OpenCart之信息中心(Information)模块教程
  • KbmMW 4.40.00 正式版发布
  • keepalived实现lvs高可用并负载均衡lamp
  • java调试技巧
  • 浅析微信支付:支付验收示例和验收指引
  • 网络中IP地址划分
  • 链表六:二叉搜索树与双向链表
  • 新一代海量数据架构分析:NoHadoop
  • “Material Design”设计规范在 ComponentOne For WinForm 的全新尝试!
  • 【407天】跃迁之路——程序员高效学习方法论探索系列(实验阶段164-2018.03.19)...
  • 【挥舞JS】JS实现继承,封装一个extends方法
  • 2017 年终总结 —— 在路上
  • AHK 中 = 和 == 等比较运算符的用法
  • angular2开源库收集
  • ES6之路之模块详解
  • Golang-长连接-状态推送
  • JavaSE小实践1:Java爬取斗图网站的所有表情包
  • Node.js 新计划:使用 V8 snapshot 将启动速度提升 8 倍
  • Quartz实现数据同步 | 从0开始构建SpringCloud微服务(3)
  • Redis 懒删除(lazy free)简史
  • Yii源码解读-服务定位器(Service Locator)
  • 基于游标的分页接口实现
  • 记一次和乔布斯合作最难忘的经历
  • 实现菜单下拉伸展折叠效果demo
  • 主流的CSS水平和垂直居中技术大全
  • 400多位云计算专家和开发者,加入了同一个组织 ...
  • PostgreSQL 快速给指定表每个字段创建索引 - 1
  • 昨天1024程序员节,我故意写了个死循环~
  • ​3ds Max插件CG MAGIC图形板块为您提升线条效率!
  • ​你们这样子,耽误我的工作进度怎么办?
  • #define,static,const,三种常量的区别
  • (4) openssl rsa/pkey(查看私钥、从私钥中提取公钥、查看公钥)
  • (Bean工厂的后处理器入门)学习Spring的第七天
  • (c语言版)滑动窗口 给定一个字符串,只包含字母和数字,按要求找出字符串中的最长(连续)子串的长度
  • (附源码)spring boot网络空间安全实验教学示范中心网站 毕业设计 111454
  • (机器学习的矩阵)(向量、矩阵与多元线性回归)
  • (九十四)函数和二维数组
  • (十八)用JAVA编写MP3解码器——迷你播放器
  • (十一)图像的罗伯特梯度锐化
  • (四)c52学习之旅-流水LED灯
  • (小白学Java)Java简介和基本配置
  • (原創) 如何解决make kernel时『clock skew detected』的warning? (OS) (Linux)
  • (转)机器学习的数学基础(1)--Dirichlet分布
  • .NET 5.0正式发布,有什么功能特性(翻译)
  • .NET Core 网络数据采集 -- 使用AngleSharp做html解析
  • .NET 中让 Task 支持带超时的异步等待
  • .NET/C# 中你可以在代码中写多个 Main 函数,然后按需要随时切换
  • .Net转Java自学之路—SpringMVC框架篇六(异常处理)