-
this的四种用法
1.用法一:在一般函数方法中使用 this 指代全局对象
2.用法二:作为对象方法调用,this指向该对象
3.用法三:作为构造函数调用,this 指代new 出的对象
4.用法四:apply/bind 调用 ,apply/bind方法作用是改变函数的调用对象,此方法的第一个参数为改变后调用这个函数的对象,this指代第一个参数 -
this的指向
this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象
-
例一:在一般函数方法中使用 this 指代全局对象
function a(){ var user = "远山眉"; console.log(this.user); //undefined console.log(this); //Window } a();
由于this的最终指向是调用它的对象,这里的函数a实际上是被Window对象所点出来的,而window里面没有user属性,所以显示undefined
-
例一(2)
function test(){ this.x = 1; alert(this.x); } test(); // 1
-
例二:作为对象方法调用,this指向该对象
var o = { user:"远山眉", fn:function(){ console.log(this.user); //远山眉 } } o.fn();
这里this的对象是o,因为调用fn()是通过o调用的,那自然指向就是对象o。
-
例三
var o = { user:"远山眉", fn:function(){ console.log(this.user); //远山眉 } } window.o.fn();
尽管这里使用window.o.fn(),那为什么this不是指向window呢?
-
例四
var o = { a:10, b:{ a:12, fn:function(){ console.log(this.a); //12 } } } o.b.fn();
这里也是使用o.b.fn(),但是this却不是指向o对象而是b对象 因此接下来补充理解
1.如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window,这里需要说明的是在js的严格版中this指向的不是window,但是我们这里不探讨严格版的问题,你想了解可以自行上网查找。
2.如果一个函数中有this,这个函数有被上一级的对象所调用,那么this指向的就是上一级的对象。(如例四)
3.如果一个函数中有this,这个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象 -
第3点解释例子如下:
var o = { a:10, b:{ fn:function(){ console.log(this.a); //undefined } } } o.b.fn();
尽管是o.b.fn(),这个this的指向也是b,因为this只会指向其上一级对象
-
例五
var obj = { a:1, b:function(){ alert(this.a); //undefined } } var fun = obj.b; fun();
虽然函数function是由对象b所引用并赋值给变量fun,但是并没有执行,因此最终this指向还是window,所以得到undefined.
若 var fun = obj.b();
fun();
则会得到1;因为此时执行了 -
例六:作为构造函数调用,this 指代new 出的对象
function test(){ this.x = 1; } var o = new test(); alert(o.x);
-
例七:apply/call 调用 ,apply/call方法作用是改变函数的调用对象,此方法的第一个参数为改变后调用这个函数的对象,this指代第一个参数
var x = 0;
function test(){
alert(this.x);
}
var o={};
o.x = 1;
o.m = test;
o.m.apply();//1
//apply()的参数为空时,默认调用全局对象。因此,这时的运行结果为0,证明this指的是全局对象。如果把最后一行代码修改为
o.m.apply(o); //1