1.在window上写:this === window // 返回true
2.this的作用域取决于谁最后调用了this,谁就是this指向的对象。
2.1
var obj={
a:function(){
console.log(this)
},
b:3
}
obj.a()
// {b: 3, a: ƒ}
2.2
var obj={
a:{
aa:function(){
console.log(this)
},
},
b:3
}
obj.a.aa()
// {aa: ƒ}
3.自执行函数作用域在全局,this指向window
3.1匿名自执行函数
var p={};
p.Fun=function(){
return this
}();
console.log(p.Fun)
// Window
3.2或者有名字的自执行函数
var p={};
p.Fun=function text(){
return this
}();
console.log(p.Fun)
//Window
4.当发生嵌套时,内部this容易丢失,然后指向window
4.1
var obj={
a:function(){
console.log(this)
function geta(){
console.log(‘geta’,this)
}
geta.(this)
},
b:3
}
obj.a()
//Window
4.2通过call,或者that=this修改指向
var obj={
a:function(){
console.log(this)
function geta(){
console.log(‘geta’,this)
}
geta.call(this)
},
b:3
}
obj.a()
5.三.什么情况下this的指向会被改变
这些情况大致可以分为两类:
5.1.关键字类。主要有new,return
5.2.函数类。 主要有call,apply,bind
6.应用场景
6.1 setTimeout(function(){console.log(this)},3000)的this指向window
var obj={
a:function(){
setTimeout(function(){console.log(‘set’,this)},1000)
},
b:3
}
obj.a()
// Window
所以需要改成
setTimeout((function(){console.log(‘set’,this)}).bind(this),1000)
或者用es6的箭头函数 setTimeout(()=>{console.log(‘set’,this)},1000)
6.2借用方法。伪数组没有方法,可以借用数组上的方法
Object.prototype.toString.call([])
“[object Object]”
// 伪数组 有数字下标 有length 能for循环遍历 不能使用数组的方法
var obj = {
0:“zs”,
1:15,
2:“sing”,
length:3
}
console.log([].push.call(obj,“哈哈哈”,“嘿嘿嘿”))
6.3借用方法
var obj={
a:function(){
console.log(this)
},
b:3
}
var obj2={
aa:function(){
console.log(this)
},
bb:3
}
undefined
obj.a.call(obj2)
// {bb: 3, aa: ƒ}
闭包
var data=function(){
return{
name:“zhangsan”,
age:20
}
}
var a=data();
var b=data();
a.age=18
console.log(a,b) //{name: “zhangsan”, age: 18} {name: “zhangsan”, age: 20}
vue的组件data也是return,为了防止污染全局