Press "Enter" to skip to content

JavaScript中诡异的this—this的4种模式

在JavaScript中的this有四种模式,在这四种模式下this指向不同的目标。

方法调用模式

如果一个函数被设置为一个对象的属性,则称它为一个方法。当通过对象对其进行调用时,即this的方法调用模式。
在方法调用模式下,函数中的this指向该函数所属的对象。

var obj = {
    val : 1,
    show : function(){alert(this.val);}
}
obj.show(); //弹出1

但是要注意,在对象内的嵌套函数(即对象中的函数中的函数,innerFunc)中,this并不指向外部对象(obj)。

var obj = {
    val : 1,
    show : function(){alert(this.val);},
    outFunc : function(){
        function innerFunc(){
            console.log(this);
        }
        innerFunc(); //下文要说的函数调用模式
    }
};
obj.innerFunc();
//在严格模式下,console.log(this)中的this为undefined,
//否则,console.log(this)中的this为全局对象(浏览器中为window)

关于如何在对象的内部嵌套函数中引用对象的this,可以参考我的另一篇文章 :http://blog.csdn.net/jlu16/article/details/77727639

函数调用模式

当一个函数并非对象的属性,而是直接作为函数进行调用时,为函数调用模式。在非严格模式下,this绑定到全局对象,否则为undefined。

function func(){
    alert(this);
}
func();
//严格模式 弹出undefined
//非严格模式 弹出window对象

构造器模式

当以new来调用一个函数时,即构造器模式。
当使用new调用时,发生这些事情:

    1. 创建一个连接到该函数prototype的新对象
    2. 将this绑定到创建的新对象上
    3. 函数结束时,如果没有返回其它对象,就返回this,即新创建的对象。

因此在这种情况下this绑定到新创建的对象上。

自行绑定this

在JavaScript中有一些方法可以设置函数的this指向的对象。
如绑定函数 func.bind。
还有绑定并立即调用的函数func.call 与 func.apply。
具体用法可自行搜索。

Be First to Comment

发表评论

电子邮件地址不会被公开。 必填项已用*标注

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax