陌上人如玉
公子世无双

谈一谈javascript中的this

这是javascript作用域系列文章,感兴趣的同学请保持关注。

this

我们几乎每天都在和this打交道,先不去管他的概念,看一个小栗子,预热一下

this初探

⚠️约定:
我们之前的一篇文章提到过,使用let和const声明的变量没有挂载到全局变量下,所以在全局下声明的变量我们使用var

var heroName = '黄蓉'
function hero() {
  const heroName = "黄药师"
  console.log(this)//window
  console.log(this.heroName);//=>黄蓉
}

hero()

我们执行hero(),通过打印我们发现

this指向的是window全局,所以this.heroName,应当在全局下查找heroName,所以输出=>黄蓉
当全局下没有heroName呢?this指向的是全局,全局没有就是没有,那就是undefined

function hero() {
  const heroName = "黄药师"
  console.log(this)//window
  console.log(this.heroName);//=>undefined
}

hero()

我们继续看一个栗子

var heroName = '黄蓉'
function hero() {
  const heroName = "黄药师"
  console.log(this)//oHero
  console.log(this.heroName);//=>欧阳锋
}
const oHero={
  heroName:'欧阳锋',
  hero
}
oHero.hero()

提示:在声明oHero中的hero中,使用了ES6标准,当key和value同名是,可以像上面这样简写
上面的栗子中,调用hero()的环境变了 ,根据输出我们发现,this的指向变了
this的指向是oHero对象,所以this.heroName=>欧阳锋,同样的当oHero下没有heroName,毫无悬念,就会输出=>undefined
如果前面两个小栗子搞懂了,我们就继续
一个栗子

var heroName = '黄蓉'

function hero() {
  console.log(this.heroName);
}
const oHero1 = {
  heroName:'郭靖',
  hero
};

hero()//=>黄蓉
oHero1.hero()//=>郭靖

现在我们尝试着给this下一个定义:

this指的是函数运行时所在的环境,如果一个函数内部有this,this就会指向一个对象,指向哪个对象呢?取决于这个函数的执行环境。
补充(如果在全局下调用这个函数,则this指向全局,如果在某个对象下调用this,则this指向这个对象)
能看到这里,说明你很聪明,哇,this这么easy吗?

this并没有那么简单

再看一个栗子

var heroName = '黄蓉'
function hero1() {
  const heroName = "黄药师"
  this.hero2()
}
function hero2() {
  console.log(this.heroName);
}
hero1()

先不关心输出
我们在hero2中的console.log前加一个debugger,分别看下两个this的指向

可以发现。两个this均指向window
在脑中跑一遍这段代码,希望你还清醒
我们一起捋一下:
全局下执行hero1()
在hero1中,this指向的是全局=>window, 全局下存在hero2(),
在hero2中,this指向哪里?取决于是哪里调用的hero2(),是在hero1()中调用的hero2(),
所以hero2中的this指向hero1?输出=>黄药师?
但是我们通过debugger得出,hero2中的this指向的是window,所以输出必然是=>黄蓉
为什么呢?
我们再看一个栗子

function hero(){
  console.log(this.heroName);
}
var HERO1 = {
  heroName : '黄蓉',
  hero
}
var HERO2 = {
  heroName : '郭靖',
  HERO1
}
var HERO3 = {
  heroName : '郭靖',
  HERO2
}
HERO3.HERO2.HERO1.hero()//=>黄蓉

我相信不会有人写出这样的代码,除了我!
这依然是个调用链
我们在输出前打一个断点

this指向了谁?不是最初的调用方HERO3,而是上一次,或者所最后一次=>HERO1

this似乎也不难

出现上面这种情况,是由函数调用方式决定的

  1. 作为一个函数进行的调用
  2. 作为一个对象的方法进行的调用
    3. 作为构造器进行的调用
    4. 通过apply()、call()函数进行的调用

后面两个暂不做讨论
作为一个函数调用this指向window,作为一个对象的方法调用,this指向当前调用的对象
回顾之前的栗子

var heroName = '黄蓉'

function hero() {
  console.log(this.heroName);
}
const oHero1 = {
  heroName:'郭靖',
  hero
};

hero()//=>黄蓉
oHero1.hero()//=>郭靖

hero(),是作为一个函数进行调用的,所以this指向window
oHero1.hero(), 是作为一个函数的方法调用的,所以this指向oHero1对象
继续看一个栗子

function hero1(){
  this.hero2()
}
function hero2(){
  console.log(this.heroName);//Uncaught TypeError: this.hero2 is not a function
}
var HERO1 = {
  heroName : '黄蓉',
  hero1
}
var HERO2 = {
  heroName : '郭靖',
  HERO1
}
HERO2.HERO1.hero1()

报错了
HERO1对象下调用的hero1(),所以hero1()中this指向的是HERO1,但是HERO1中不存在方法hero2(),所以报错
稍作修改

function hero1(){
  HERO3.hero2()
}
function hero2(){
  console.log(this.heroName);//=>郭靖
}
var HERO1 = {
  heroName : '黄蓉',
  hero1
}
var HERO2 = {
  heroName : '郭靖',
  HERO1
}
var HERO3 = {
  heroName : '郭靖',
  hero2
}
HERO2.HERO1.hero1()

我们似乎总结出来一点小窍门,我们从最后的输出反推执行顺序
是谁调用的hero2(),是HERO3,所以hero2,中的this指向HERO3,所以输出是=>郭靖
啊?this好简单?真的吗?关于下次的讨论,敬请期待

END

赞(1) 打赏
未经允许不得转载:陌上寒 » 谈一谈javascript中的this

评论 抢沙发

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

微信扫一扫

支付宝扫一扫