关于vue的this指向问题

BaiLinfeng
  • 7

这两个代码怎么指向的不一样。需要怎么来理解vue里面this指向问题vuethis.png,vue里面的this不都是指向vm实例化吗?
上面截图就是用了一个新变量声明了this,然后在存一个新的变量拿来使用this,这个this声明位置有什么讲究吗?我看是声明新的变量来存this是写在定时器外面的,为什么函数change就能拿到this,而定时器就拿不到this,还要声明一个变量存下才能拿到this?他们两个不都是函数吗怎么指向的都不一样尼

评论
阅读 1.5k
7 个回答

function的作用域呗

想改变可以用bind
也可以用箭头函数=>


更新时间 2019年10月18日14:43:55

我看这个问题还在一直回复,我再来完善一下我的答案

  1. 我们来思考一个问题,this指向谁?

    1. 全局状态下
      image.png
    2. function
      image.png
      image.png
    3. function中、并赋值给某个对象
      image.png
      image.png
    4. function中、并赋值给某个对象,之后赋值给另外一个对象并调用
      image.png
    5. 上面只是常规状态,那么严格模式下呢?
  2. 留下一道相似的题,当this改变的时候,a也会切换到this的环境中吗?为什么?
    image.png

先来写一下结论吧。通常this会指向调用他的对象,如果没有会指向windows,如果严格模式下指向undefined。结合这个规则回去看看上面的问题吧。
image.png

首先,你这个问题其实跟VUE关系不大,就是作用域的问题。

setTimeout的常见用法是让某个方法延迟执行。我们知道,setTimeout方法是挂在window对象下的。《JavaScript高级程序设计》第二版中,写到:“超时调用的代码都是在全局作用域中执行的,因此函数中this的值在非严格模式下指向window对象,在严格模式下是undefined”。

综上所述,默认是指向window。建议使用箭头函数(它的最大作用就是处理作用域的问题)

在vue.js中使用箭头函数,那么this就都指向vue实例,这是箭头函数的特性。
如果使用function声明,则有函数执行的上下文确定this指向。
描述中的代码,在setTimeout中的延迟执行的函数,其this指向永远是window

function当做参数传进settimout的时候,最后延迟执行的环境是window,所以this 指向window。

https://segmentfault.com/a/11... 希望能帮到你

在判断this时,按照以下顺序:
1.函数是否在 new 中调用(new 绑定)?如果是的话,this 绑定的是新创建的对象。
var bar = new Foo()
2.函数是否通过 call、apply(显式绑定)或者硬绑定调用?如果是的话, this 绑定的是指定的对象。
var bar = foo.call(obj2)
3.函数是否在某个上下文对象中调用(隐式绑定)?如果是的话,this 绑定的是那个上下文对象。
var bar = obj1.foo()
4.如果都不是,使用默认绑定,严格模式下,绑定到 undefined,否则绑定到全局对象。
var bar = foo()

此时,可以看出来在setTimeout内的函数调用时,是第4个默认绑定,此时会绑定到全局对象,也就是window。

想指向一样,使用箭头函数 setTimeout(() =>{
})

张泽
  • 2
新手上路,请多包涵

看看js的闭包

BOM里的windows对象

JavaScript高级程序设计里有讲

宣传栏