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

[油猴脚本开发指南]简易this教程

[复制链接]
  • TA的每日心情
    开心
    7 小时前
  • 签到天数: 59 天

    [LV.5]常住居民I

    354

    主题

    3139

    帖子

    3136

    积分

    管理员

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

    Rank: 10Rank: 10Rank: 10

    积分
    3136

    猫咪币纪念章国庆纪念章中秋纪念章荣誉开发者家财万贯管理员

    发表于 2021-5-12 15:20:06 | 显示全部楼层 | 阅读模式

    警告

    由于Js的this指向存在历史问题以及各种复杂情况,由于本人无法准确的描述this的全貌以及特性,所以本文仅简易的教导基础的this内容,如果出现与本文不符的情况以及知识,请以实际为准。

    什么是this

    this就是函数在执行的时候所在的作用域,一般默认的this指针指向window,(作用域一个盒子,我们一般声明的函数以及变量都在这个(window指针)里。并且js对象也存在作用域(相当于盒子里又有一个盒子))

    为什么需要this

    当js引入了this这个特性之后可以更好的控制了数据结构,使写代码的过程中更具有条理性,同时在某些情况下可以将代码反复利用,节省了造轮子的时间,可以用更多的时间用来喝茶摸鱼,相信大家在以后可以逐渐感受到this到底是什么。

    函数中的this

    如果是我们直接写function函数以及变量的时候,这个函数内的this作用域一般是Windows

    图片.png

    对象中的this

    当我们声明一个对象的时候,输出this就会发现this从Window变成了对象,也就是说函数的调用作用域不再是window,变成了对象。

    举个例子

    var testthis={showthis:function(){console.log('我的this是对象',this)}}

    图片.png

    Call和Apply

    假如两个对象具有几乎相同的函数功能,虽然我们可以使用复制粘贴大法来直接解决,但是有没有更方便的方法呢?这时候就出现了call和apply两个函数,他可以改变某个函数的this指向,来让一个对象调用其他对象的函数。

    这里举一个简单的例子

    var cat={name:'小猫',eat:function(){console.log(this.name+'在吃饭')}}

    小猫对象拥有name变量代表名字以及eat的吃饭函数

    如果我们调用cat.eat()会执行对应的函数,this作用域拿到cat对象,并获取了cat.name跟在吃饭拼接,变成了小猫在吃饭

    但是如果这时候我们再创建一个小狗

    var dog={name:'大黄'}

    想让小狗也吃饭,其实并不需要再声明一次函数,直接使用cat.eat.call(dog)就可以了

    cat.eat获取了cat对象里的eat函数

    call可以改变函数内部的this作用域得指向,call的括号内部就是指向哪个对象,这里我们指向了dog,所以在执行这句代码的过程中cat.eat的this作用域 由于使用了call(dog)而变成了dog

    call与apply的功能一致,唯一的区别就是apply是数组传入参数而已。

    图片.png

    本质上的this

    如果你了解了call和apply,那么我们再回过头来看看函数的调用。

    function getthis(){console.log(this)}

    getthis()

    本质上其实就是

    getthis.call()

    当call内部没有对象的时候,会默认把传入的当成Windows,所以这时候getthis函数内部的this变成了Windows。

    var testthis={showthis:function(){console.log('我的this是对象',this)}}

    testthis.showthis()

    本质上就是

    showthis.call(testthis)

    testthis.showthis()这条语句的.后边的函数会自动设置点的前方对象作为this的指向

    总结

    js中的this还存在许多其他奇奇怪怪的问题以及特性,这点大家以实际写代码的情况为准,并不推荐死记硬背,用到哪里记下来就可以了。

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

    [LV.6]常住居民II

    153

    主题

    2036

    帖子

    2161

    积分

    管理员

    Rank: 10Rank: 10Rank: 10

    积分
    2161

    猫咪币纪念章热心会员活跃会员突出贡献三好学生中秋纪念章国庆纪念章管理员家财万贯

    发表于 2021-5-12 15:41:10 | 显示全部楼层
    这js中的this是真的混乱
    上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。/ 微信公众号:一之哥哥
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2022-3-8 00:18
  • 签到天数: 2 天

    [LV.1]初来乍到

    34

    主题

    202

    帖子

    253

    积分

    版主

    Rank: 8Rank: 8

    积分
    253

    猫咪币纪念章突出贡献热心会员活跃会员

    发表于 2021-5-12 17:37:52 | 显示全部楼层
    道总牛逼
    一叶叶,一声声,空阶滴到明。
    回复

    使用道具 举报

  • TA的每日心情
    无聊
    2022-7-22 17:30
  • 签到天数: 2 天

    [LV.1]初来乍到

    13

    主题

    78

    帖子

    78

    积分

    初级工程师

    Rank: 4

    积分
    78

    猫咪币纪念章活跃会员三好学生

    发表于 2021-5-13 04:04:55 | 显示全部楼层
    顶顶顶~~~~~~
    回复

    使用道具 举报

    发表回复

    本版积分规则

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