浅谈this

js中的this一直是我非常头疼的一个问题,但又经常会在代码中看到,非常重要,于是最近翻了翻书,看了别的老师的博客,就在这里自己疏理一下。

this是函数的一个内部对象,只能在函数内部使用。他指向调用函数的那个对象。在函数创建的时候,this的值是确定不了的,只有在调用函数的时候,生成执行上下文环境时才会给this赋值,每次调用函数的时候,都会产生新的执行环境,this的值都会重新赋。

那么,问题来了,什么是执行上下文(执行环境,执行上下文环境应该都是一个意思)呢?这个概念我们经常会看到,但我之前一直半懂不懂,偶然看了一位老师的博客,才差不多理解了。

执行环境其实就是浏览器在真正开始执行一段段JS代码之前做的一系列“准备工作”。这些准备工作就包括函数声明呀,变量声明呀。。。下面我们具体来看。

代码段分为三种,全局代码,函数体,还有eval代码(介个咱们本篇就不说了,因为其实我现在也不太理解辣—)。

全局代码很好理解,在执行全局代码之前,浏览器会创建全局代码的执行上下文环境,创建这个全局执行上下文环境就包括:变量声明(这里别忘了函数表达式的变量声明,函数表达式其实就是值是函数的变量,所以当然这个变量声明也会提前啦,,并且默认赋值为undefined),函数声明(就是传说中的函数声明提升,就提升到这里来啦), 还有就是this的赋值。

函数体。我们知道,函数不过就是在特定情况下执行的代码段,在函数体执行之前,会生成函数体的执行上下文环境,其中除了变量声明,函数声明,this的赋值以外,还要加上:arguments的赋值(arguments和this一样,就是函数的一个内部对象,是一个包含函数参数列表的类数组)和函数体中自由变量的赋值(就是在函数内使用,但是没有在函数内定义的变量)

所以,为什么this指向调用函数的对象就非常明了的啦~

下来,我们拐回来好好说this

this的应用场景其实也就那么几种,说了上面的一堆,理解下面的就会更加轻松了。

1.构造函数中的this
使用new操作符调用构造函数创建对象,this就指向创建出来的那个对象。
如果在全局作用域中调用构造函数,很明显,这种情况就可以理解为全局对象调用了这个函数,this就指向全局对象window。
2.函数作为对象的属性
这种情况其实就可以理解为对象调用了这个属性,this就指向这个对象。但是,这里要注意了,如果这个函数没有作为对象的属性被调用,而是将他赋给了另一个变量,并通过这个变量执行函数,那么,this就指向全局对象。所以,是不是被调用了,执行了,这个要分清楚。
3.call() apply()
这种情况下,this就指向传入他的对象。 call 和 apply 就是用来动态改变 this 的。
4.普通情况下调用函数,this都指向window

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值