博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ES6箭头函数
阅读量:6848 次
发布时间:2019-06-26

本文共 1767 字,大约阅读时间需要 5 分钟。

语法:

([param] [, param]) => {   statements} param => expression

使用:

(  )=>{···}; //零个参数用()表示  x  =>{···}; //一个参数,可以省略()  (x,y)=>{···}; //多个参数不能省略() **多行语句需要用{}括起来,单行表达式不需要{},并且会作为函数返回值。**

特性:

箭头函数内部没有constructor方法,也没有prototype,所以不支持new操作。但是它对this的处理与一般的普通函数不一样。箭头函数的 this 始终指向函数定义时的 this,而非执行时

例如:

var o = {    x : 1,    fn : function() { console.log(this.x) },    test : function() {        setTimeout(function() {            this.fn();        }, 100);    }};o.test(); // TypeError : this.fn is not a function

上面的代码会出现错误,因为this的指向从o变为了全局(函数调用中的this都是指向全局的)。

要修改上面的代码如下:

var o = {    x : 1,    fn : function() { console.log(this.x) },    test : function() {        var _this = this;        setTimeout(function() {            _this.fn();         }, 100);    }};o.test();

通过使用外部事先保存的this就行了。

利用到箭头函数修改,箭头函数的 this 始终指向函数定义时的 this,而非执行时

var o = {    x : 1,    fn : function() { console.log(this.x) },    test : function() {        setTimeout(() => { this.fn() }, 100);    }};o.test();

这回this就指向o了。箭头函数可以让setTimeout里面的this,绑定定义时所在的作用域,而不是指向运行时所在的作用域。

上面代码中,转换后的ES5版本清楚地说明了,箭头函数里面根本没有自己的this,而是引用外层的this。

需要注意一点的就是箭头函数中的this是不会改变指向对象的,我们知道call和apply可以改变this的指向,但是在箭头函数中是无效的。

var x = 1,       o = {           x : 10,           test : () => {               console.log(this);//window函数调用中的this都是指向全局的               return this.x            }       };   console.log(o.test()); // 1   console.log(o.test.call(o)); // 依然是1

如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。

var sum = (num1, num2) => { return num1 + num2; }

由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象必须在对象外面加上括号

var getTempItem = id => ({ id: id, name: "Temp" });

使用注意点

  • 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象
  • 不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
  • 不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替。
  • 不可以使用yield命令,因此箭头函数不能用作Generator函数。

转载地址:http://eylul.baihongyu.com/

你可能感兴趣的文章
浅谈点感想(通篇废话),由学习方法想到的ML
查看>>
PAT A1007 动态规划
查看>>
JavaScript五十问——对比来说CSS的Grid与FlexBox(上篇)
查看>>
weblogic 脚本创建Managed Server (受管服务器)
查看>>
[个人笔记] 关于linux的常见问题合集
查看>>
mkv电影如何无损转换为swf格式
查看>>
观察者模式
查看>>
最佳在线图表软件
查看>>
记住这35个英文单词,你就可以在RPA界混了!
查看>>
微信如何实现自动跳转到用其他浏览器打开指定页面下载APP
查看>>
Tensorflow源码解析3 -- TensorFlow核心对象 - Graph
查看>>
安装oh my zsh插件
查看>>
Kotlin整合Vertx开发Web应用
查看>>
专门给新人部署入门知识说明:关于如何发布自己项目的概述说明
查看>>
阿里云发布时间序列数据库TSDB,关于时序你了解多少?
查看>>
Vue项目中使用基于pdf.js的vue-pdf插件在pc浏览器下阅览PDF文件
查看>>
Java教程_软件开发基础
查看>>
Python 基础起步 (二) 5分钟内下载环境并运行第一个Python 程序
查看>>
PS入门课程笔记
查看>>
检查win错误信息
查看>>