理解JavaScript的this对象

1.概述

this对象是在运行时基于函数的执行环境绑定的,this总是返回一个对象,简单说,就是返回属性或方法“当前”所在的对象。在全局函数中,this等于window,而当函数作为某个对象的方法调用时,this等于那个对象。不过匿名函数的执行环境具有全局性,因此其this对象通常指向window(如果通过call()或者apply()改变函数执行环境的情况下,this会指向其他对象。)。

2.为什么使用this?

虽然知道了this是怎么回事了,但是为什么要使用this,或者说this它带来了那些好处了。

因为在实例化对象时,总是不能确定开发者会使用什么样的变量名。使用 this,即可在任何多个地方重用同一个函数。请思考下面的例子:

function showColor() {
  alert(this.color);
};

var oCar1 = new Object;
oCar1.color = "red";
oCar1.showColor = showColor;

var oCar2 = new Object;
oCar2.color = "blue";
oCar2.showColor = showColor;

oCar1.showColor();		//输出 "red"
oCar2.showColor();		//输出 "blue"

3.下面来看使用this的一些情况

示例一

var name = "The Window";
var object = {
    name : "My Object",
        
    getNameFunc : function(){
        return function(){
            return this.name;
        };
    }
};
        
alert(object.getNameFunc()());  //"The Window"

上面代码先创建了一个全局变量name,又创建了一个包含name属性的对象。这个对象还包含一个方法-getNameFunc(),它返回一个匿名函数,而这个匿名函数又返回this.name。由于getNameFunc()返回一个函数因此调用object.getNameFunc()()就会立即调用它的返回的函数,最后返回了全局name变量的值The Window。为什么没有返回My Object?

解释:每个函数在调用的时候,其活动对象都回自动取得两个变量:this和arguments。而调用object.getNameFunc()()返回的匿名函数是在全局环境中执行的,所以它的this指向就是window了。

那么如果要调用外部的this,有什么办法呢?通过把外部作用域中的this对象保存在一个闭包能够访问到的变量里,就可以让闭包访问该对象了,如下所示。

示例二

var name = "The Window";
         
var object = {
    name : "My Object",
             
    getNameFunc : function(){
        var that = this;
        return function(){
            return that.name;
        };
    }
};
            
alert(object.getNameFunc()());  //"MyObject"

这个例子与上面的例子区别是,在定义匿名函数之前,我们把this对象赋值给了一个名叫that的变量,从而使得this的值得到了固定。而定义了闭包,通过作用域链就能访问到that了。

示例三

function sayColor(color){
    this.color=color;
    alert(this.color);
}
function ClassB(sColor, sName) {
    sayColor.call(this, sColor);//this是指classB的实例对象,将sayColor函数作为classB的实例对象方法调用,并传入了sColor参数。
    
   // sayColor.apply(this, arguments);
    this.name = sName;
    this.sayName = function () {
        alert(this.name);
    };
}
posted @ 2017-01-14 14:51  叶子陪你玩  阅读(402)  评论(0编辑  收藏  举报