this的那点事
对于很多初学者,this总是搞得我们晕头转向。
现在,我就简单的总结一下关于this的那点事。
this在函数定义时经常是不能确定的,只有在函数执行的时候才能最终确定this的归属。this总是指向最后调用它的对象,那么怎么知道到底是谁调用的呢?其实很简单,我们知道函数调用的其中一种方法就是利用call.下面就来简单的分析一下怎么利用call来判断调用函数的对象到底是何方神圣。
先来看看call是怎么来使用的:
fun.call(thisArg, arg1, arg2, ...)
thisArg:
在fun
函数运行时指定的this
值。
需要注意的是,指定的this
值并不一定是该函数执行时真正的this
值,如果这个函数处于非严格模式下,则指定为null
和undefined
的this值会自动指向
全局对象(浏览器中就是window对象),同时值为原始值(数字,字符串,布尔值)的this
会指向该原始值的自动包装对象。
arg1, arg2, ...:
指定的参数列表。
知道了call的用法,就可以开始this的分析之旅了。
例子1:
function test() { var name = 'test'; console.log(this.name); //undefined } test();
test() 等价于 test.call(undefined) ,这时的thisArg为undefined,所以this指向全局对象(浏览器中为window对象),所以this.name为undefined。
例子2:
1 var obj = { 2 name: 'tang', 3 func: function () { 4 var name = 'func'; 5 console.log(this.name); 6 } 7 }; 8 var test1 = obj.func();//tang 9 var test2 = obj.func; 10 obj.func(); //tang 11 test2(); //undefined
第8行 test1=obj.func(),赋值时执行函数,obj.func()等价于obj.func.call(obj),thisArg为obj,this指向obj,this.name为tang;
第10行obj.func() 等价于 obj.func.call(obj) ,这时的thisArg为obj,即this指向obj,所以this.name即为tang;
第11行test2()等价于test2.call(undefined),所以this指向全局对象(浏览器中是window);
第8行和第9行的区别在于赋值的时候有没有运行函数,第8行赋值的就运行函数,所以this指向obj,而第9行赋值时没有运行函数,只是把函数赋值给test2,所以this的指向还得等调用函数时才能确定,在第11行调用函数时才能确定。