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

[油猴脚本开发指南]简易感受this的例子

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

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

    [LV.5]常住居民I

    321

    主题

    2838

    帖子

    2846

    积分

    荣誉开发者

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

    Rank: 10Rank: 10Rank: 10

    积分
    2846

    猫咪币纪念章

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

    前言

    由于之前的比较理论化,所以比较担心大家不怎么懂,这里给大家一个小栗子直观感受一下this的意义

    概念讲解

    假如我们不使用this会出现什么情况呢?

    现在假如我们不使用对象以及this,创建了一个小猫的名字,和吃的函数,这个时候是符合我们的想法的

    var xiaomaoname='xiaomao'
    function eat(name){
    console.log(name+'在吃饭')
    }
    eat(xiaomaoname)

    我们现在如果再引入一个名字呢?

    var xiaomaoname='xiaomao'
    var xiaomaoage=17
    function eat(name,age){
      console.log(age+'的'+name+'在吃饭')
    }
    eat(xiaomaoname,xiaomaoage)
    

    就需要再声明一个变量并且传入,如果有很多很多变量这样就太麻烦了,所以我们引入了对象这个概念!

    var xiaomao={
      name:'xiaomao',
      age:17,
    }
    function eat(name,age){
      console.log(age+'的'+name+'在吃饭')
    }
    eat(xiaomao.name,xiaomao.age)
    

    如果我们这时候再引入一个小狗吃饭呢?

    
    var xiaomao={
      name:'xiaomao',
      age:17,
    }
    var xiaogou={
      name:'xiaogou',
      age:16,
    }
    function eat(name,age){
      console.log(age+'的'+name+'在吃饭')
    }
    eat(xiaomao.name,xiaomao.age)
    eat(xiaogou.name,xiaogou.age)
    

    这时候还是一切安好的,但是问题来了,如果小猫是正经的吃饭,但是小狗不正经吃饭,他一边吃一边拆家,那这个函数就不满足我们的需求了,需要再声明一个函数。

    var xiaomao={
      name:'xiaomao',
      age:17,
    }
    var xiaogou={
      name:'xiaogou',
      age:16,
    }
    function eat(name,age){
      console.log(age+'的'+name+'在吃饭')
    }
    function dogeat(name,age){
      console.log(age+'的'+name+'一边拆家一边吃饭')
    }
    eat(xiaomao.name,xiaomao.age)
    dogeat(xiaogou.name,xiaogou.age)
    

    这样是不是很别扭,既然每个动物都有一种自己的吃饭方式,那为什么不把函数也整合到变量之中?

    var xiaomao={
      name:'xiaomao',
      age:17,
      eat:function (name,age){
      console.log(age+'的'+name+'在吃饭')
    }
    }
    var xiaogou={
      name:'xiaogou',
      age:16,
      eat:function (name,age){
      console.log(age+'的'+name+'一边拆家一边吃饭')
    }
    }
    
    xiaomao.eat(xiaomao.name,xiaomao.age)
    xiaogou.eat(xiaogou.name,xiaogou.age)
    

    既然我们都把函数整合到对象的内部了,那为什么还需要传参,一般情况下获取对象下的变量就是符合直觉的了!

    name='全局变量'
    age=8888
    var xiaomao={
      name:'xiaomao',
      age:17,
      eat:function (){
      console.log(age+'的'+name+'在吃饭')
    }
    }
    
    xiaomao.eat()
    

    现在虽然调用了xiaomao.eat(),但是获取的name和age并不是xiaomao的对象里的name和age,而是全局变量的name和age,那怎么才能获取到对象的name和age呢,这时候就引入了this

    
    var xiaomao={
      name:'xiaomao',
      age:17,
      eat:function (){
      console.log(this.age+'的'+this.name+'在吃饭')
    }
    }
    
    xiaomao.eat()
    

    我们把函数放入了内部,并且成功的让eat获取了name和age

    那如果小狗也想学习小猫吃饭,我们是不是需要把小猫的eat也复制一遍给小狗?并不需要的,其实用call就可以实现

    
    var xiaomao={
      name:'xiaomao',
      age:17,
      eat:function (){
      console.log(this.age+'的'+this.name+'在吃饭')
    }
    }
    var xiaogou={
      name:'xiaogou',
      age:18,
      eat:function (){xiaomao.eat.call(this)}
    }
    xiaogou.eat()
    

    到这里大概就完成了this,call和对象的大概概念的理解,大家可以消化一下

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

    [LV.1]初来乍到

    34

    主题

    196

    帖子

    243

    积分

    版主

    Rank: 8Rank: 8

    积分
    243

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

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

    使用道具 举报

  • TA的每日心情
    慵懒
    2022-6-8 21:09
  • 签到天数: 48 天

    [LV.5]常住居民I

    135

    主题

    1798

    帖子

    1972

    积分

    管理员

    Rank: 10Rank: 10Rank: 10

    积分
    1972

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

    发表于 2021-5-12 22:07:30 | 显示全部楼层
    来背八股文了
    上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。/ 微信公众号:一之哥哥
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2022-3-7 09:47
  • 签到天数: 1 天

    [LV.1]初来乍到

    18

    主题

    93

    帖子

    117

    积分

    中级工程师

    Rank: 5Rank: 5

    积分
    117
    发表于 2021-11-28 19:30:38 | 显示全部楼层
    可以简单理解为谁调用this就指向谁
    回复

    使用道具 举报

  • TA的每日心情

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

    [LV.5]常住居民I

    321

    主题

    2838

    帖子

    2846

    积分

    荣誉开发者

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

    Rank: 10Rank: 10Rank: 10

    积分
    2846

    猫咪币纪念章

    发表于 2021-11-28 20:33:35 | 显示全部楼层
    rubinTime 发表于 2021-11-28 19:30
    可以简单理解为谁调用this就指向谁

    是这个意思的,但是担心大家不懂,哈哈哈
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

    发表回复

    本版积分规则

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