上一主题 下一主题
返回列表 发新帖

[油猴脚本开发指南]箭头函数的特性

[复制链接]

80

主题

545

帖子

764

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
764
发表于 2021-7-9 20:11:19 | 显示全部楼层 | 阅读模式

简介

如果你在之前已经了解了This的大概含义,那么你理解箭头函数就很容易了!箭头函数是ES6标准中的一个新特性,与普通函数相比没有什么太大区别,唯一比较重要的就是this作用域不同

ES6是什么

ES6是ECMAScript 6的简称,那他跟JavaScript是什么关系呢?JavaScript 语言是ECMAScript 6标准的实现,而ECMAScript 6 是JavaScript的标准,之所以不叫JavaScript其一是因为版权问题,其二是标准制定者是ECMA(老子搞的凭什么算在JavaScript头上,笑:)

箭头函数的使用

使用还是比较简单的()=>{}不需要携带function,只需要在括号内填入函数即可产生一个箭头函数

举个小小的例子

let funa=(a)=>{console.log(a.length)}
funa('88888')

图片.png

这里大家就了解了箭头函数的使用了!

与普通函数的区别

普通函数的this通常取决于调用者或运行环境,而箭头函数的this取决于声明箭头函数的位置的所处作用域

为什么要这样做呢?

我们可以从一个小例子中看出来一些端倪

var cat={
  name:'哆来A梦',
  eat:function(){
    console.log(this.name+'正在吃东西')
  }
}
cat.eat()

搞一个小猫吃东西,不过分吧?那我想每隔三秒吃一次呢?加个setinterval!

var cat={
  name:'哆来A梦',
  eat:function(){
    console.log(this.name+'正在吃东西')
  }
}
cat.eat()
setInterval(cat.eat,3000)

图片.png

这个时候并没有符合我们预期,除了我们自己调用的eat有名字,其他都获取不到this.name了,这是为什么?

因为我们把cat.eat函数传入给了Setinterval定时器,定时器在调用函数的时候其作用域并不属于cat,而是window,因为定时器获取的是函数的引用,并且定时器属于window的函数,所以传入的this变成了window

难道希望就要就此破灭了么?不,箭头函数是永远的神!

var cat={
  name:'哆来A梦',
  eat:function(){
  return ()=>{console.log(this.name+'正在吃东西')}
  }
}
setInterval(cat.eat(),3000)

假如我们在eat函数在调用的时返回一个箭头函数,并且在setinterval使用这个箭头函数,就可以正常的输出内容

为什么这个却可以?

因为箭头函数获取的作用域是在创建箭头函数时候的作用域,也就是cat对象的this,所以即使使用Setinterval依然不会影响箭头函数的this,这种特性叫做静态作用域。

那我们为什么不直接写成

var cat={
  name:'哆来A梦',
  eat:()=>{
  console.log(this.name+'正在吃东西')
}
}
setInterval(cat.eat,3000)

反而要在多一层function呢?

因为箭头函数会获取到所处对象的所在的作用域,也就是windows,那this.name就变成了获取window下的name变量内容了,所以我们才需要使用一层function来保留住箭头函数所处的作用域,这点大家刚开始接触可能难以适应,不如我们简化一下:箭头函数会继承function的this作用域,大部分的时候理解都不会出现太大的问题,如果出现超出你意外的情况就请查阅资料啦!

结语

那这节课就算结束了,希望大家清楚了箭头函数的作用以及特性,我们下节课再见啦!

回复

使用道具 举报

78

主题

278

帖子

431

积分

中级会员

Rank: 3Rank: 3

积分
431
发表于 2021-7-9 21:07:26 | 显示全部楼层
ggnb,ggnb(真是的,说一句ggnb还不行,非要我说两句!!)
提及少年一词,应与平庸相斥!微信公众号——智家乐享
回复

使用道具 举报

发表回复

本版积分规则

快速回复 返回顶部 返回列表