用总结性的一句话来说:this始终执行调用他的对象
1.对象中的this→对象
var obj = {
a: 100,
con: {
b: 10,
fn: function () {
console.log(this.a) //undefined
console.log(this.b) //10
console.log(this) //指向con对象
}
},
objF:function(){
console.log(this.a) //100
console.log(this.b) //undefined
console.log(this) //指向obj对象
}
}
obj.con.fn()
obj.objF()
console.log(this) //指向window
运行结果
2.改用赋值后调用:this→window
var obj = {
a: 100,
con: {
b: 10,
fn: function () {
console.log(this.a) //undefined
console.log(this.b) //undefined
console.log(this) //window
}
},
}
var fun=obj.con.fn;//将fn方法赋值给并没有调用
fun() //调用 此时执行的是window.fun故指向this指向的对象是window
运行结果
3.函数调用
function Fun(x) {
console.log(this.x) //undefined
this.x = x;
console.log(this.x) //5
}
Fun(5) //掉用改方法时this的指向时window故Fun方法中this.x为自动声明的一个全局变量
console.log(x) //5
console.log(this.x) //5
太过简单,我们变形一下
var obj = {
a: 0,
b: 0,
Func: function (x, y) {
this.b = y
var getA = function (x) {
this.a = x
}
var getB = function (y) {
this.b = y
}
getA(x);
getB(y)
},
}
obj.Func(1, 1)
console.log(obj.a) //0 虽然调用Func方法的对象是obj但调用getA方法是window
console.log(a) //1
console.log(obj.b) //1 调用Func方法的对象是obj故this指向obj
console.log(b) //1
我们的本意是改变a、b的值,但这样写明显有悖本意,不仅没有改变a、b的值还声明了新的变量造成资源的浪费。解决方法,利用作用域特性
var obj = {
a: 0,
b: 0,
Func: function (x, y) {
var that=this
var getA = function (x) {
that.a = x
}
var getB = function (y) {
that.b = y
}
getA(x);
getB(y)
},
}
obj.Func(1, 1)
console.log(obj.a) //1
console.log(a) //undefined
运行结果
将内部函数改为外部函数时你会发现一个有意思的地方。废话不多说直接上代码。
var obj = {
a: 0,
Func: {
getA: function (x) {
this.a = x
}
},
}
obj.Func.getA(1)
console.log(obj.a)//0
console.log(obj.Func)//由于getA的对象时Func故this指向Func而a在Func中不存在故会自动声明一个变量。
运行结果