javascript 下的 this,让你猜不透,摸不着,但语法终究有语法的规范,没有莫名的奇妙,只有欠合理的解释。对还有 bug ... 开玩笑 ^-^///
不多说,这章来讨论一下 javascript 下的 this 。
此前先仔细体会这句话:this永远指向的是最后调用它的对象。
由于其运行期绑定的特性,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁。
window 下的 this:
看几个例子来解释我上面强调的那句话:
function a(){
var num= 233;
console.log(this.user); //undefined
console.log(this); //Window
}
a();
运行结果是 this指向的是 window ,所以 this.user 是 undefined,a()
是 一个函数也可以说是方法 ,那方法肯定是由对象来调用
的。
所以当执行 a()
; 时 就有一个隐式对象调用了a()
,这个隐式对象就是 window
再来个例子:
var obj = {
num: 233,
getThis:function () {
return this;
}
}
console.log(obj.getThis() ); //{ num: 233, getThis: [Function] }
var fun = obj.getThis;
console.log(fun() ); // window
上面是一个对象里面有方法属性;
可以看出 obj.getThis() ;
调用方法会打印出当前对象(打印日志里面有属性和方法);
可能大家回想,这不是常理之中吗,但下面这代码我只是做了一些赋值结果怎么就不一样了呢?
var fun = obj.getThis;
console.log(fun() ); // window
因为 执行fun()
是一个方法,需要对象才能调用方法,而上面执行 fun()
的对象是谁,就是隐式的 window
(这句话好像上面第一段代码说过 -_-///),
好了,如果还感觉有点绕就来说明一下:
this永远指向的是最后调用它的对象。
obj.getThis()
其中 调用 getThis()
的 对象是谁? obj
,所以 返回的this
就是 obj。
那 console.log( fun() );
其中 调用 fun()
的对象是谁,没谁调用啊? 没谁那就是隐式的 window
啦 ,所以返回的是 window
,看哪个最后调用它,那么this
就指向那个。
上面清楚了来分析下面这段代码应该就容易了:
num_1 = 233;
var obj = {
num_2: 1111,
getNum:function () {
this.num_1 = 666;
this.fun = function () {
return this.num_1;
}
}
}
obj.getNum();
console.log(obj.fun() ); // 666
var fun = obj.fun;
console.log( fun() ); // 233
先执行了 obj.getNum();
对 getNum()
里面的 属性和方法进行赋值;
接着 执行 obj.fun()
, 因为 里面的 this
指向调用它的 obj
,所以 得到num_1 = 666;
再接着执行 fun()
,因为 调用这方法的是隐式 window
,所以 this.num_1; 就会找到 在window声明的遍历 num_1 = 233;
当遇到包含对象的问题:
var obj = {
a:233,
obj_2:{
a:666,
fn:function(){
console.log(this.a); // 666
}
}
}
obj.obj_2.fn();
也很好解释 ,找到调用 fn() 函数的对象 是 obj_2, 所以 this 指向 obj_2。
当 this 碰到 return 时:
例子1:
function fun()
{
this.num= 233;
return {};
}
var a = new fun();
console.log(a.num); //undefined
例子2:
function fun()
{
this.num= 233;
return 11;
}
var a = new fun();
console.log(a.num); //233
总结一句话 : 如果返回值是一个对象,那么this指向的就是那个返回的对象,如果返回值不是一个对象那么this还是指向函数的实例。
当 this 遇到 apply() 和 call()
例子1 :
function AddNum(a,b){
this.a = a;
this.b = b;
this.fun = function ( ) {
return this.a + this.b;
}
}
var obj = new AddNum(1,2);
console.log( obj.fun() ); // 3
var obj_2 = {a:2,b:4};
console.log( obj.fun.call(obj_2) ); // 6
当执行 obj.fun.call(obj_2); fun() 的this 就指向 obj_2,所以this.a + this.b;拿到的也是 obj_2 下的 a 和 b ;
apply() 和 call() 能 改变 this 的 指针
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。