vue的this指向详解

这是vue文档里的原话：
All lifecycle hooks are called with their ‘this’ context pointing to the Vue instance invoking it.
意思是：在Vue所有的生命周期钩子方法（如created，mounted， updated以及destroyed）里使用this，this指向调用它的Vue实例 ，即 new Vue() ---- 每一个点vue后缀的文件都是利用vue的构造函数模板创建的实例 / 新对象

**注：
1.构造函数其实是一种特殊的函数，主要用来初始化对象，也就是为对象成员变量赋初始值，它总与new关键字一起使用
2.我们可以把对象里面一些公有的属性和方法抽象出来封装到这个函数里面。
3.这样我们就可以通过一个构造函数创建多个对象，这些对象拥有相同的构造，都可以使用这个构造函数的方法和属性。
4.new 就是执行构造函数，返回一个新对象，不写new就是普通函数的调用，没有创造对象的能力
5.构造函数的属性和方法前必须加this关键字，this指代要生成的对象
**

对于普通函数（包括匿名函数），this指的是直接的调用者，在非严格模式下，如果没有直接调用者，this指的是window, 严格模式下, this是undefind , showMessage1()里setTimeout使用了匿名函数，this指向window。

箭头函数是没有自己的this，在它内部使用的this是由它定义的宿主对象决定。showMessage2()里定义的箭头函数宿主对象为vue实例，所以它里面使用的this指向vue实例

<script>
  export default {
     data(){
           return{
              message: "你好！"
           }
        },
        created: function() {
          console.log(this) //在Vue所有的生命周期钩子方法里使用this，this指向使用它的Vue实例
          this.showMessage1();    
          this.showMessage2();  
          this.showMessage3();   //vue实例（构造函数）调用了showMessage3方法（new绑定）
        },
        methods:{
        showMessage3(){
              console.log(this)  //vue实例调用了showMessage3方法，this自然指向vue实例
                
            },
            showMessage1(){
                setTimeout(function() {
                  console.log(this) //指向window  因为没人调用这个普通函数
                   )
                }, 10)
            },
            showMessage2() {
                setTimeout(() => {
                   console.log(this) //this指向vue实例
                  
                }, 10)
            }
        }
          
   

  
  }
</script>

绑定vue实例到this的方法
为了避免this指向出现歧义，有两种方法绑定this。
1.使用bind
showMessage1()可以改为：

showMessage1(){
                setTimeout(function() {
                  console.log(this) //指向vue实例   
                }.bind(this), 10)
            },

对setTimeout()里的匿名函数使用bind()绑定到vue实例的this。这样在匿名函数内的this也指向vue实例。

2.把vue实例的this赋值给另一个变量再使用
showMessage1()也可以改为

 showMessage1(){
 var self=this;
setTimeout(function() {
   console.log(self)  //指向vue实例 
}, 10)
         
 },

这里表示vue实例的this赋值给变量self，在使用到this的地方改用self