上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

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

[复制链接]
  • TA的每日心情

    2022-6-4 20:51
  • 签到天数: 32 天

    [LV.5]常住居民I

    323

    主题

    2852

    帖子

    2858

    积分

    荣誉开发者

    非物质文化遗产社会摇传承人

    Rank: 10Rank: 10Rank: 10

    积分
    2858

    猫咪币纪念章

    发表于 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作用域,大部分的时候理解都不会出现太大的问题,如果出现超出你意外的情况就请查阅资料啦!

    结语

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

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
  • TA的每日心情

    2022-6-3 08:14
  • 签到天数: 13 天

    [LV.3]偶尔看看II

    104

    主题

    446

    帖子

    605

    积分

    版主

    Rank: 8Rank: 8

    积分
    605

    猫咪币纪念章活跃会员热心会员三好学生中秋纪念章国庆纪念章

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

    使用道具 举报

  • TA的每日心情
    奋斗
    昨天 17:21
  • 签到天数: 102 天

    [LV.6]常住居民II

    22

    主题

    317

    帖子

    275

    积分

    高级工程师

    The CV Moilion :-)

    Rank: 6Rank: 6

    积分
    275

    中秋纪念章活跃会员国庆纪念章

    发表于 2022-2-18 13:57:01 | 显示全部楼层
    EXACTLY!! 看完以后,我深有体会,并总结了以下三点:ggnb! ggnb! ggnb!
    回复

    使用道具 举报

  • TA的每日心情

    2022-6-4 20:51
  • 签到天数: 32 天

    [LV.5]常住居民I

    323

    主题

    2852

    帖子

    2858

    积分

    荣誉开发者

    非物质文化遗产社会摇传承人

    Rank: 10Rank: 10Rank: 10

    积分
    2858

    猫咪币纪念章

    发表于 2022-2-18 14:52:06 | 显示全部楼层
    柒伍七 发表于 2022-2-18 13:57
    EXACTLY!! 看完以后,我深有体会,并总结了以下三点:ggnb! ggnb! ggnb!

    哥哥牛逼!
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

    发表回复

    本版积分规则

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