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

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

[复制链接]

123

主题

932

帖子

550

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
550
发表于 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和对象的大概概念的理解,大家可以消化一下

30

主题

141

帖子

101

积分

实习版主

Rank: 7Rank: 7Rank: 7

积分
101

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

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

使用道具 举报

71

主题

707

帖子

639

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
639

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

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

使用道具 举报

发表回复

本版积分规则

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