vuethis指向问题_JS this指向！vue this 失效？

this 指向

全局环境：

在全局环境下，this 始终指向全局对象(window), 无论是否严格模式；

函数直接调用：

普通函数内部的this分两种情况，严格模式和非严格模式。

(1)，非严格模式下，this 默认指向全局对象window

(2)，而严格模式下， this为undefined

对象中的this

对象内部方法的this指向调用这些方法的对象，

1. 函数的定义位置不影响其this指向，this指向只和调用函数的对象有关(谁调用它，this指向谁)。
2. 多层嵌套的对象，内部方法的this指向离被调用函数最近的对象(window也是对象，其内部对象调用方法的this指向内部对象， 而非window)。

构造函数中this

构造函数中的this与被创建的新对象绑定。

注意：当构造器返回的默认值是一个this引用的对象时，可以手动设置返回其他的对象，如果返回值不是一个对象，返回this。

call & apply

当函数通过Function对象的原型中继承的方法 call() 和 apply() 方法调用时， 其函数内部的this值可绑定到 call() & apply() 方法指定的第一个对象上， 如果第一个参数不是对象，JavaScript内部会尝试将其转换成对象然后指向它。

DOM 事件处理函数中的 this

(1)当函数被当做监听事件处理函数时， 其 this 指向触发该事件的元素 。

// 被调用时，将关联的元素变成蓝色 function bluify(e){ //在控制台打印出所点击元素 console.log(this); //阻止时间冒泡 e.stopPropagation(); //阻止元素的默认事件 e.preventDefault();  this.style.backgroundColor = '#A5D9F3'; } // 获取文档中的所有元素的列表 var elements = document.getElementsByTagName('*'); // 将bluify作为元素的点击监听函数，当元素被点击时，就会变成蓝色 for(var i=0 ; i

setTimeout & setInterval

对于延时函数内部的回调函数的this指向全局对象window(当然我们可以通过bind方法改变其内部函数的this指向)

箭头函数中的 this

由于箭头函数不绑定this， 它会捕获其所在(即定义的位置)上下文的this值， 作为自己的this值。

vue 中 this 指向问题

我们再使用vue 开发中，经常会使用定时器， 或者操作dom ， 进行事件操作等，在这里面，this指向都会指向window。关键它不会报错，只是会让你的 v-指令失效， vue this 中数据没有赋值成功。

eg :

此时它们的 this 都没有指向 Vue 实例：

如果我们想让它们的 this 指向 vue 的实例:

使用箭头函数：

结果：

使用一个变量接收一个vue实例再操作：

结果：

通过 bind 改变 this 指向