理解JavaScript中的this

Posted 2020-06-24 LazyChen

在javascript中，this关键字是用来引用 调用该函数的 那个对象的。看几个栗子：

var name="Window";
var obj={
    name:"Object",
    funObj:function(){
            console.log(this.name);
    }  
};
//
var funObjCopy=obj.funObj;
function a(){
    console.log(this.name);
}
obj.aCopy=a;

//Object
obj.funObj();
//Window
funObjCopy();
//Window
a();
//Object
obj.aCopy();

从上面的例子可以看出，this引用的是 调用该函数时“.”前面的那个对象（如 obj.funObj()、obj.aCopy() ）；如果没有通过“.”的方式而是直接调用，那么this引用的就是全局对象，换句话说，如果这个对象是一个函数调用对象或者全局对象，那么将得到对全局对象的引用；

接下来是个在嵌套函数中使用this的栗子：

var name="Window";
function test(){
    var name="test01";
    console.log(name);
    console.log(this.name);
    function funF(){
        var name="test02";
        console.log(name);
        console.log(this.name);
    }
    funF();
}

//test01 Window  test02 Window
test();

注意funF函数中打印this.name得到的依然是Window；再来看一个类似例子：

var name="Window";
var obj={
    name:"Object",
    funObj:function(){
        var name="Function";
        function funF(){
            return this;
        }
        console.log(name);
        console.log(this.name);
        console.log(funF().name);
    }
};

//Function  Object  Window
obj.funObj();

注意这个例子中funF函数返回的是window对象，所以打印的结果依然是Window；由此我们可以得出：在方法内嵌套的函数中使用this，仍然会得到对全局对象的引用（除了通过“.”方式调用的）。

突然想到了call()和apply()方法，顺便记一下了

每个函数都包含两个非继承而来的方法：call()和apply()；这两个方法的作用是一样的，都是为了在特定的作用域中调用函数，换句话说其实就是设置函数体内this对象的值。区别就在于apply()只接受两个参数，第一个和call()一样，都是指定this对象的值，另一个是必须是参数数组（可以是Array的实例，也可以是arguments对象）；而call()方法的参数则必须逐个列举出来，将就第一个例子来看看：

var name="Window";
var obj={
    name:"Object",
    funObj:function(){
        var name="Function";
        console.log(this.name);
    }
};
function a(){
    console.log(this.name);
}

//Window
a();
//Object
a.call(obj);
//Object
a.bind(obj);