关于javascript中的这个关键词(翻译自理解)

下面大约70%的内容来自http://www.quirksmode.org/js/this.html,另外30%是我自己对它的理解和感受。我希望我能帮助有需要的人。首先看一个关于这个关键词的典型话题：复制代码如下： var name=' hong ' var obj={ name : ' ru '，getname 3360 function(){ return function(){ return this . name；};} } alert(obj . getname()()；这里没有悬念，执行结果是：hong稍微修改了一下代码：复制的代码如下： var name=' hong ' var obj={ name : ' ru '，getname3360 function () {var那=thisreturn function(){ return . name；};} } alert(obj . getname()()；执行结果为：ru。这一结果的原因将在下面详细讨论。【功能的拥有者】要解释这一点，首先要讲这个概念。在JavaScript中，这总是指向我们当前正在执行的函数的“所有者”。更准确地说，它指的是使用这个函数作为方法的对象。如何理解这句话，我们可以看一下下面的例子：复制代码如下：/*-test1-*/function test1(){ this。title=' mealert(窗口[' title '])；alert(此===窗口)；//true } test1()；执行结果是：我，真的。在上面的例子中，这指向窗口对象。并将window的title属性写成‘me’，因为test1是一个顶级函数，它的所有者是window对象，或者是window对象的一个方法。这应该不难理解。比如上面调用test1()时，也可以写成window . test 1()；太清楚了。接下来，我们创建一个div，并将test1作为方法分配给div的onclick属性：复制代码如下： div id=' o ' style=' width :50 px；高度：50 px；border:4px固体#333'me！/div脚本类型=' text/JavaScript '/*-test1-*/function test1(){ this . title=' me '；alert(窗口[' title '])；alert(此===窗口)；} var o=document . getelementbyid(' o ')；o.onclick=test1/script单击div会导致：undefined，false同时，我们可以用firebug看到“me”的属性值实际上被分配给了这个id为“o”的html object。

很明显，这就指向了此时的这个div，也就是说test1()的所有者变成了div的HtmlObject，或者变成了div的onclick方法来调用。这种情况应该很容易理解。接下来让我们更改代码，只需更改一个地方：复制代码如下： o . onclick=test1()；//注意：加括号把上面代码最后一句改成这个后，点击div的结果是：me，true和第一种情况一样，这个指向window。有些人会怀疑没有区别，但是有区别。这里涉及到函数的复制和引用问题。【函数复制】如果代码复制如下， o.onclick=test1这样，函数test1()实际上被复制到对象O的onclick属性中.因此，test1的所有者成为对象o .如果代码复制如下： o . onclick=test1()；这样，它本质上意味着当获得click事件的句柄时，它被引导执行test1()函数。注意力是指向执行，而不是分配给它。test1()的所有者没有改变，但它仍然是window。【函数的引用】同上，如果我们将调用内联写入html，我们将通过引用复制代码如下： div ID=' o ' style=' width :50 px；高度：50 px；border :4 px solid # 333 ' onclick=' test1()'我！/div单击div执行结果或指示这指向窗口。【函数复制示例】复制代码如下： element . onclick=do something element . addeventlistener(' click '，do something，false)element . onclick=function(){ this . style . color=' # cc 0000 '；}元素onclick=' this . style . color=' # cc 0000 '；'这些方法将使这一点成为当前被调用的对象。function refer示例]复制代码如下： element . onclick=function(){ dosome()} element . attach event(' onclick '，dosometing)element onclick=' do some()'不会改变函数的所有者。需要注意的是，addEventListener和attachEvent是不一致的，因为attachEvent实际上是建立一个引用来做一些事情，而不是复制这个函数。就像我们刚才说的，元素onclick='test()'的编写方式还是不能让test()的所有者成为元素，所以我们可以复制代码如下：元素onclick=' test(this)' function(o){ o . title=' me '；}这样明确的称呼就可以了。或者，可以通过调用或apply复制代码，这是一种假装成对象的继承模式，如下所示： element onclick=' test。调用(this)'函数test () {this。title=' me}这也是最典型的模仿对象的方式。【自由变量问题】写了这么久，我们回到原来的问题：复制代码如下： var name=' hong ' var obj={ name : ' ru '，getname 3360 function(){ return function(){ return this . name；};} } alert(obj . getname()()；为什么会是这样的结果：洪？要点是复制代码如下： return function(){ return this . name；};对比上面写的函数refer的例子，不难发现返回的匿名函数调用方式与onclick=function(){ do something()}相同。因此，这个方法不会改变这个函数的所有者。虽然它是一个嵌套函数，但它的声明是顶级的。这指向窗口。第二种方法是强制将这个赋给getName()中的那个，也就是说，这个. Name实际上和getName()中的这个. name是一样的。在getName的上下文中，它的所有者是obj，所以这将指向obj，所以this . name===obj . name；这么大的圈子，不知道有没有你在身边。其实可以总结为：在这个函数的上下文中，如果这个函数不是以“方法”的形式调用的，那么这个就指向窗口对象，否则就指向这个函数的所有者。