this的那点事

对于很多初学者,this总是搞得我们晕头转向。

现在,我就简单的总结一下关于this的那点事。

this在函数定义时经常是不能确定的,只有在函数执行的时候才能最终确定this的归属。this总是指向最后调用它的对象,那么怎么知道到底是谁调用的呢?其实很简单,我们知道函数调用的其中一种方法就是利用call.下面就来简单的分析一下怎么利用call来判断调用函数的对象到底是何方神圣。

先来看看call是怎么来使用的:

fun.call(thisArg, arg1, arg2, ...)

  thisArgfun函数运行时指定的this需要注意的是,指定的this值并不一定是该函数执行时真正的this值,如果这个函数处于非严格模式下,则指定为nullundefinedthis值会自动指向全局对象(浏览器中就是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行调用函数时才能确定。

 

posted @ 2017-11-17 22:41  白水煮青菜  阅读(293)  评论(5编辑  收藏  举报