日期:2014-05-16  浏览次数:20382 次

理解JS之this进阶

Douglas Crockford大师把this古怪的行为解释为和函数的调用模式有关。

js中有四种调用模式---方法、函数、构造器以及apply调用模式,它们在初始化this时候是不一样的。

1)方法模式 简单的说就是使用点表达式或是下标表达式来调用 这里定然是有对象的 这种情况下 this的绑定发生在调用的时候 绑的自然是调它的那个对象了。

作为方法调用的函数有一个非常重要的属性:在方法体中,用来调用方法的对象成为关键字this的值。

2)函数模式 这个就更简单了,函数名加调用运算符('()')。不过要小心,这个this绑的可是全局对象,不管你写哪了。(可以理解成  你不给我指明了   我就自己给它加个全局对象)

当一个函数作为函数调用而不是方法调用时,这个this关键字引用全局对象。容易混淆的是,当一个嵌套的函数(作为函数)在一个包含的函数中调用,而这个包含的函数是作为方法调用的,这也是成立的:this关键字在包含的函数中有一个值,但是它却(不太直观地)引用嵌套的函数体的内部的全局对象。

看个例子吧

var a = 'global';
var obj = {
    a : 'local',
    test : function(){
        function test1(){
            alert(this.a);//global
        }
        alert(this.a);//local
        test1();
    }
};
obj.test();

/*****************************解决这个问题的方法*****************************/
var a = 'global';
var obj = {
    a : 'local',
    test : function(){
        var that = this;
        function test1(){
            alert(that.a);//local
        }
        alert(this.a);//local
        test1();
    }
};
obj.test();

 

3)构造器调用模式  一句话就是用new来调用的  new的时候this就绑定到新对象上了  比较好理解