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

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

[复制链接]
  • TA的每日心情
    慵懒
    2024-10-28 07:07
  • 签到天数: 193 天

    [LV.7]常住居民III

    712

    主题

    5961

    回帖

    6760

    积分

    管理员

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

    积分
    6760

    荣誉开发者喜迎中秋油中2周年生态建设者

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

    结语

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

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
  • TA的每日心情
    慵懒
    2023-5-5 13:37
  • 签到天数: 15 天

    [LV.4]偶尔看看III

    117

    主题

    405

    回帖

    711

    积分

    版主

    积分
    711

    油中2周年油中3周年

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

    使用道具 举报

  • TA的每日心情
    郁闷
    昨天 15:34
  • 签到天数: 773 天

    [LV.10]以坛为家III

    76

    主题

    519

    回帖

    871

    积分

    专家

    脚本猫首席体验官

    积分
    871

    油中2周年生态建设者新人报道油中3周年挑战者 lv2喜迎中秋

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

    使用道具 举报

  • TA的每日心情
    慵懒
    2024-10-28 07:07
  • 签到天数: 193 天

    [LV.7]常住居民III

    712

    主题

    5961

    回帖

    6760

    积分

    管理员

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

    积分
    6760

    荣誉开发者喜迎中秋油中2周年生态建设者

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

    哥哥牛逼!
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

    发表回复

    本版积分规则

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