理解JavaScript中的this对象-优快云博客

本文深入探讨了JavaScript中this对象的绑定机制，包括全局函数、对象方法调用、构造函数等场景下的行为，并通过实例解释了如何在不同情况下正确使用this。

this对象是在运行时基于函数的执行环境绑定的：

　　1、在全局函数中，this等于window。

　　2、当函数作为某个对象的方法调用时，this等于这个对象。

　　3、this和执行环境有关，和声明环境无关。

例子1：

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

var other = {
    name: "Tom",
    showName: someone.showName
}

other.showName();　　//Tom

例子2：

var name = "Tom";

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

var show = Bob.show;
show();　　//Tom

setTimeout、setInterval和匿名函数中的this

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

　　例子1

var name = "window";

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

var Tom = {
    name: "Tom",
    showName: function(){
        var fun = Bob.showName;
        fun();
    }
};

Tom.showName();　　//window

　　例子2

var name = "Bob";  
var nameObj ={  
    name : "Tom",  
    showName : function(){  
        alert(this.name);  
    },  
    waitShowName : function(){  
        setTimeout(this.showName, 1000);  
    }  
};  

nameObj.waitShowName();

构造函数中的this

// 构造函数:
function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName  = arg2;
}

// This creates a new object
var x = new myFunction("John","Doe");
x.firstName;                             // 返回 "John"

这里构造函数是创建对象的过程，故构造函数中 this 关键字没有任何的值。this 的值在函数调用时实例化对象(new object)时创建。

this指向建立的新对象。

思考题

下面这些例子的输出结果是？

　　例1：

var name = "Bob";  
var nameObj ={  
    name : "Tom",  
    showName : function(){  
        alert(this.name);  
    },  
    waitShowName : function(){
        var that = this;
        setTimeout("that.showName();", 1000);
    }
}; 
 
nameObj.waitShowName();