JavaScript之this对象

JavaScript语言中有一个this关键字，可以称之为this指针。

定义

正版定义：

红宝书上说：“this是函数内部的特殊对象，this引用的是函数执行时的环境对象”。

盗版定义：

说的有点绕口，对初学者不容易接受。说白了，就是谁调用了函数，this就指向谁（这个不是很严谨，不过可以暂时这么理解）。

本文将按照下图逐步讲解。

显示函数调用中的this

eg1：

var color="red";
function showcolor(){
    var color="green";
    alert(this.color);
}

showcolor();//red

上述例子将打印red，而不是green。按我们盗版定义，很好理解，showcolor()其实是被window对象调用的，相当于window.showcolor()，所以此时this指针指向的是window全局环境，因此打印出red。

eg2：

var myObj={
    color:"red",
    showcolor:function(){
        var color="green";
        alert(this.color);
    }
};
myObj.showcolor();//red

上述例子将打印red，因为现在是myObj调用了show函数，所以this指针此时指向的是myObjc的环境。

回调函数中的this

<div id="sample">click me</div>
<script type="text/javascript">
var myObj={
    color:"red",
    showcolor:function(){
        var color="green";
        alert(this.color);
    }
};
document.getElementById("sample").οnclick=myObj.showcolor; //undefined
</script>

上述例子中我们并没有直接调用showcolor函数，而是将这个函数绑定到div的点击事件中去。当我们点击“click me”时，这个函数就会被调用，此时this指针指向的是id为“sample”这个div的DOM对象。为了证明，我们将上述改为，

<div id="sample">click me</div>
<script type="text/javascript">
var myObj={
    color:"red",
    showcolor:function(){
        var color="green";
        alert(this.id); 
    }
};
document.getElementById("sample").οnclick=myObj.showcolor; //sample
</script>

这样浏览器就会弹出“sample”，可见this是指向这个id为“sample”的div的。

内部函数中的this

内部函数是指函数内部再定义一个函数。

var color="red";
var myObj={
    color:"green",
    showcolor:function(){
        var color="yellow";  
        function innerShow(){
            alert(this.color);
        }     
        innerShow();
    }
};
myObj.showcolor();//red

会发现全局变量被打印了，网上很多文章说这是JS的设计缺陷。我个人觉得吧，硬是要解释，也说得过去，毕竟这个内部函数不是被”myObj”对象调用的，我们并没有看到”myObj.innerShow()”语句。既然没有别的对象在调用它，那只能是window对象了。

那如何改变才能打印出green呢？

只需一个简单的技巧：

var color="red";
var myObj={
    color:"green",
    showcolor:function(){
        var color="yellow";  
        var that=this;
        function innerShow(){
            alert(that.color);
        }     
        innerShow();
    }
};
myObj.showcolor();//red

构造函数中的this

一个简单的构造函数如下：

function showColor(){
    this.color="red";
}

下面实例化一个对象，

var newObj = new Show();
alert(newObj.name);//red

this此时指向的就是这个实例化的对象newObj。

使用call/apply/bind来调用函数

call和apply类似，都是在特定的作用域中调用函数。

两者的区别在于传入参数。

    name = "name of window";
    var myObj = {
        name: "name of myObj",
    }
 
    function show(x, y) {
        alert(this.name);
        return x + y
    }
 
    show.call(window, 1, 2);
    show.call(myObj, 1, 2);
    numArray = [1, 2];
    show.apply(window, numArray);
    show.apply(myObj, numArray);

可以看到，call必须把参数显示的写出来，apply需要写成一个数组形式。

bind方法就是把这个函数绑定到一个指定的对象上。它可以将已有的函数对象复制一份出来，并同时绑定这个新函数对象的调用者。(给这个函数创建了一个实例对象)

name = "name of window";
    var myObj = {
        name: "name of myObj",
    }
 
    function show(x, y) {
        alert(this.name);
        return x + y
    }

var myShow=show.bind(myObj);

myShow(1,2);

此时this指针就指向myObj。

上述就是this的使用。