首页 >

es6箭头函数要注意什么

web前端|前端问答es6箭头函数要注意什么
es6,箭头函数
web前端-前端问答
pcm音频 源码,ubuntu.sh文件,tomcat 字符集配置,idea爬虫程序,PHP数组键为中文,上海seo都选乐云seolzw
在 es6的 新语法中,出现了 箭头函数 。
源码 小游戏,vscode调试真机,ubuntu 重置网卡,tomcat 模板引擎,sqlite设置大小写,学完爬虫可以做什么赚钱,php获取当天的日期,泉州seo优化收费,北京赛车网站源码,wordpress 网页图标,响应式后台管理系统模板lzw
ES6 允许使用“箭头”(=>)定义函数。
小k网页源码,ubuntu无法联无线,tomcat7最大并发量,网站嵌入爬虫,云知梦php培训视频,龙岩seo渠道lzw
		function fun(a){ return a; }// ↓ 去掉 function 在 ( ) 和 { } 之间添加 => 		var fun = (a) => { return a; }  // ↓ 如果只有一个形参可省略 ( ) 如果一个形参都没有,必须加( )         		var fun = a => { return a; }  // ↓ 如果函数体只有一句话,可省略{ },如果仅有的这句话还是 return, 则必须省略 return         		var fun = a => a

ES6中箭头函数注意事项

(1)箭头函数会改变函数内this的指向与上级作用域中的this指向保持一致

函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。

(2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。

(3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。

(4)不可以使用yield命令,因此箭头函数不能用作 Generator 函数。

function foo() {  setTimeout(() => {    console.log('id:', this.id);  }, 100);}var id = 21;foo.call({ id: 42 });// id: 42

上面代码中,setTimeout的参数是一个箭头函数,这个箭头函数的定义生效是在foo函数生成时,而它的真正执行要等到 100 毫秒后。如果是普通函数,执行时this应该指向全局对象window,这时应该输出21。但是,箭头函数导致this总是指向函数定义生效时所在的对象(本例是{id: 42}),所以输出的是42。
箭头函数可以让setTimeout里面的this,绑定定义时所在的作用域,而不是指向运行时所在的作用域。下面是另一个例子。

function Timer() {  this.s1 = 0;  this.s2 = 0;  // 箭头函数  setInterval(() => this.s1++, 1000);  // 普通函数  setInterval(function () {    this.s2++;  }, 1000);}var timer = new Timer();setTimeout(() => console.log('s1: ', timer.s1), 3100);setTimeout(() => console.log('s2: ', timer.s2), 3100);// s1: 3// s2: 0

上面代码中,Timer函数内部设置了两个定时器,分别使用了箭头函数和普通函数。前者的this绑定定义时所在的作用域(即Timer函数),后者的this指向运行时所在的作用域(即全局对象)。所以,3100 毫秒之后,timer.s1被更新了 3 次,而timer.s2一次都没更新。

箭头函数可以让this指向固定化,这种特性很有利于封装回调函数。下面是一个例子,DOM 事件的回调函数封装在一个对象里面。

var handler = {  id: '123456',  init: function() {    document.addEventListener('click',      event => this.doSomething(event.type), false);  },  doSomething: function(type) {    console.log('Handling ' + type  + ' for ' + this.id);  }};

上面代码的init方法中,使用了箭头函数,这导致这个箭头函数里面的this,总是指向handler对象。否则,回调函数运行时,this.doSomething这一行会报错,因为此时this指向document对象。

this指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。正是因为它没有this,所以也就不能用作构造函数。

所以,箭头函数转成 ES5 的代码如下。

// ES6function foo() {  setTimeout(() => {    console.log('id:', this.id);  }, 100);}// ES5function foo() {  var _this = this;  setTimeout(function () {    console.log('id:', _this.id);  }, 100);}

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


es6箭头函数要注意什么
  • 了解ES6中的箭头函数极其作用域
  • 了解ES6中的箭头函数极其作用域 | 了解ES6中的箭头函数极其作用域 ...

    es6箭头函数要注意什么
  • ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
  • ECMAScript6的新特性箭头函数(Arrow Function)详细介绍 | ECMAScript6的新特性箭头函数(Arrow Function)详细介绍 ...

    es6箭头函数要注意什么
  • JavaScript中的普通函数和箭头函数的区别和用法详解
  • JavaScript中的普通函数和箭头函数的区别和用法详解 | JavaScript中的普通函数和箭头函数的区别和用法详解 ...