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").onclick=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").onclick=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的使用。