javascript 中的this关键字的用法

朴灿烈づ我的快乐病毒、 2022-08-06 07:24 133阅读 0赞

**引用自   http://www.cnblogs.com/justany/archive/2012/11/01/the\_keyword\_this\_in\_javascript.html**

**Quiz**

请看下面的代码，最后alert出来的是什么呢？

![复制代码][copycode.gif]

1 var name = "Bob";  
     2 var nameObj ={  
     3     name : "Tom",  
     4     showName : function(){  
     5         alert(this.name);  
     6     },  
     7     waitShowName : function(){  
     8         setTimeout(this.showName, 1000);  
     9     }  
    10 };  
    11 
    12 nameObj.waitShowName();

![复制代码][copycode.gif]

要解决这个问题我们需要了解Javascript的this关键字的用法。

**this指向哪里？**

一般而言，在Javascript中，this指向函数**执行时**的当前对象。

> In JavaScript, as in most object-oriented programming languages, `this` is a special keyword that is used within methods to refer to the object on which a method is being invoked.
> 
> ——[jQuery Fundamentals (Chapter 2), by Rebecca Murphey][jQuery Fundamentals _Chapter 2_ by Rebecca Murphey]

值得注意，该关键字在Javascript中和执行环境，而非声明环境有关。

> The this keyword is relative to the execution context, not the declaration context.  
>

我们举个例子来说明这个问题：

![复制代码][copycode.gif]

![复制代码][copycode.gif]

this关键字虽然是在someone.showName中声明的，但运行的时候是other.showName，所以this指向other.showName函数的当前对象，即other，故最后alert出来的是other.name。

**没有明确的当前对象时**

当没有明确的执行时的当前对象时，this指向全局对象window。

> By default, `this` refers to the global object.
> 
> 为什么说是全局对象（the global object），因为非浏览器情况下（例如：nodejs）中全局变量并非window对象，而就是叫“全局变量”（the global object）。不过由于我们这片文章主要讨论的是前端开发知识，所以nodejs就被我们忽略了。

例如对于全局变量引用的函数上我们有：

![复制代码][copycode.gif]

var name = "Tom";
    
    var Bob = {
        name: "Bob",
        show: function(){
            alert(this.name);
        }
    }
    
    var show = Bob.show;
    show();　　//Tom

![复制代码][copycode.gif]

你可能也能理解成show是window对象下的方法，所以执行时的当前对象时window。但局部变量引用的函数上，却无法这么解释：

![复制代码][copycode.gif]

![复制代码][copycode.gif]

**setTimeout、setInterval和匿名函数**

文章开头的问题的答案是Bob。

在浏览器中setTimeout、setInterval和匿名函数执行时的当前对象是全局对象window，这条我们可以看成是上一条的一个特殊情况。

所以在运行this.showName的时候，this指向了window，所以最后显示了window.name。

> 浏览器中全局变量可以当成是window对象下的变量，例如全局变量a，可以用window.a来引用。

我们将代码改成匿名函数可能更好理解一些：

![复制代码][copycode.gif]

![复制代码][copycode.gif]

在调用nameObj.waitShowName时候，我们运行了一个匿名函数，将nameObj.showName作为回调函数传进这个匿名函数，然后匿名函数运行时，运行这个回调函数。由于匿名函数的当前对象是window，所以当在该匿名函数中运行回调函数时，回调函数的this指向了window，所以alert出来window.name。

由此看来setTimeout可以看做是一个延迟执行的：

function(__callback){
        __callback();
    }

setInterval也如此类比。

但如果我们的确想得到的回答是Tom呢？通过一些技巧，我们能够得到想要的答案：

![复制代码][copycode.gif]

![复制代码][copycode.gif]

在执行nameObj.waitShowName函数时，我们先对其this赋给变量that（这是为了避免setTimeout中的匿名函数运行时，匿名函数中的this指向window），然后延迟运行匿名函数，执行that.showName，即nameObj.showName，所以alert出正确结果Tom。

**eval**

对于eval函数，其执行时候似乎没有指定当前对象，但实际上其this并非指向window，因为该函数执行时的作用域是当前作用域，即等同于在该行将里面的代码填进去。下面的例子说明了这个问题：

![复制代码][copycode.gif]

var name = "window";
    
    var Bob = {
        name: "Bob",
        showName: function(){
            eval("alert(this.name)");
        }
    };
    
    Bob.showName();    //Bob

![复制代码][copycode.gif]

**apply和call**

apply和call能够强制改变函数执行时的当前对象，让this指向其他对象。因为apply和call较为类似，所以我们以apply为例：

![复制代码][copycode.gif]

![复制代码][copycode.gif]

apply用于改变函数执行时的当前对象，当无参数时，当前对象为window，有参数时当前对象为该参数。于是这个例子Bob成功偷走了Tom的名字。

**new关键字**

new关键字后的构造函数中的this指向用该构造函数构造出来的新对象：

![复制代码][copycode.gif]

function Person(__name){
        this.name = __name;        //这个this指向用该构造函数构造的新对象，这个例子是Bob对象
    }
    Person.prototype.show = function(){
        alert(this.name);
    }
    
    var Bob = new Person("Bob");
    Bob.show();        //Bob

![复制代码][copycode.gif]

**思考题**

1.　　请问下面代码会alert出什么，为什么？

![复制代码][copycode.gif]

![复制代码][copycode.gif]

2.　　请问下面代码会alert出什么，为什么？

var fun = new Function("alert(this)");
    fun();

3.　　下面代码分别在IE和其他浏览器上运行有什么差异，可以用什么方法解决这个差异问题？

IE：

![复制代码][copycode.gif]

<button id = "box" name = "box">Click Me!</button>
    
    <script>
        var name = "window";
    
        function showName(){
            alert(this.name);
        }
    
        document.getElementById("box").attachEvent("onclick", showName);
    </script>

![复制代码][copycode.gif]

Others：

![复制代码][copycode.gif]

<button id = "box" name = "box">Click Me!</button>
    
    <script>
        var name = "window";
    
        function showName(){
            alert(this.name);
        }
    
        document.getElementById("box").addEventListener("click", showName, false);
    </script>
    
    
    
     参考文献 Javascript Closures . Richard Cornford  . March 2004 Javascript的this用法 . 阮一峰 . 2010.4.30

[copycode.gif]: /images/20220806/b047a35c592c4b30813320c497d52057.png
[jQuery Fundamentals _Chapter 2_ by Rebecca Murphey]: http://jqfundamentals.com/legacy#chapter-2