js和vue中this指向总结

js

this总是返回一个对象。

在构造函数中，this指向实例对象。在其他中，this就是属性或方法“当前”所在的对象。

1、构造函数中，指向构造函数本身，目前没有用到构造函数

function Pro(){
    this.x = '1';
    this.y = function(){};
}
var p = new Pro();

2、事件绑定中，行内绑定两种。用第一种好些，看起来形式统一些

<input type="button" value="按钮" onclick="clickFun()">
<script>
    function clickFun(){
        this // 此函数的运行环境在全局window对象下，因此this指向window;
    }
</script>
​
<input type="button" value="按钮" onclick="this">
<!-- 运行环境在节点对象中，因此this指向本节点对象 -->

动态绑定和监听事件指向本节点对象

<input type="button" value="按钮" id="btn">
<script>
    var btn = document.getElementById('btn');
    btn.onclick = function(){
        this ;  // this指向本节点对象
    }
</script>

3、定时器中，分两种

var obj = {
    fun:function(){
        this ;
    }
}
​
setInterval(obj.fun,1000);      // this指向window对象
setInterval('obj.fun()',1000);  // this指向obj对象

在vue中，this指向当前vue实例，参考下例 

Vue This指代 - 简书