前言： 上下文就是代码的运行环境
1. 普通函数(function)
普通方法调用，this指的就是方法的调用者 var user = { print:function(){ console.log(this);//user 普通函数，谁调用这个函数，this指的就是谁 } } user.print(); 普通方法没有调用者，this指向上下文(默认上下文为window) function show(){ console.log(this);//window对象 } show(); 普通方法出现在new对象中，并在对象内使用方法时，this指向上下文（实例对象） var Stu = function(name){ this.name = name; this.fun =function(){ console.log(this);// } } let s = new Stu("stu1"); // 创建对象 会改变对象构造器内部的上下文环境 s.fun();2、箭头函数(函数名()=>{})
箭头函数在正常环境下使用时，this 恒指向于上下文 （默认值为window） var user = { fun:()=>{ console.log(this);//window,箭头函数除了在构造函数中，其他地方this恒指向window } } user.fun(); 箭头函数 出现在 new 对象中，并在对象内使用箭头函数的this 恒指向于 上下文 （实例对象） var Stu = function(name){ this.name = name; this.fun = ()=>{ console.log(this);//箭头函数在构造函数中，函数中的this指的是实例对象S } } let s = new Stu("stu1"); // 创建对象 会改变对象构造器内部的上下文环境 s.fun(); 当箭头函数 出在new对象中，并且以回调的方式在外部使用时，this 会指向于该函数调用位置的上下文 <div id="app"> <input type="button" value="设置data中的flag" v-on:click="setFlag()"> </div> <script> new Vue({ el:"#app", data:{ flag:true, }, methods:{ setFlag:()=>{ console.log(this);// window对象 } } }) </script>
