前言: 上下文就是代码的运行环境
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>