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

李恒道

前言

由于之前的比较理论化，所以比较担心大家不怎么懂，这里给大家一个小栗子直观感受一下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和对象的大概概念的理解，大家可以消化一下

hysaoh

道总牛逼

王一之

来背八股文了

rubinTime

可以简单理解为谁调用this就指向谁

李恒道

rubinTime 发表于 2021-11-28 19:30
可以简单理解为谁调用this就指向谁

是这个意思的，但是担心大家不懂，哈哈哈