this的那点事

Posted 2020-10-14

对于很多初学者，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行调用函数时才能确定。