javascript - "this"的范围

Question

我有一个简单的对象，我不明白this的概念(作用域)是通过调用这个对象的函数来实现的。

为什么在最后一个变体 (3) 中调用 show()(使用函数 show() inside object without parent)结果是“This is global”并且不是内部变量 title("Color Picker")？

我有一个模糊的想法，即在定义全局变量show之后调用函数popup.show()，this指的是全局对象。这是逻辑解释吗？

代码:http://jsbin.com/otuzac/1/edit .

var title="'This' is global";

var popup={
    dom_element:("#popup"),
    title      :"Color Picker",
    prev_color :'#fff',
    set_color  : function(color){
        color=color || this.prev_color;
        //set the color
        return color;
    },
    show       :function(){
        return("showing  "+this.title);
    }       
};

var show=popup.show();

//Case 1: var show=popup.show()
alert(show);  //output "Color Picker"

//Case 2: var show=popup.show()
alert(popup.show());  //output "Color Picker"

//Case 3: var show=popup.show !!! (no parent.)
alert(show());  //output "This is global"

Answer 1

什么 this这取决于您如何调用您使用 this 的函数.

1。作为函数调用

functionName();

在这种情况下 this将始终引用全局对象(通常是 window 对象)。

Example

a = 2;
function XY(a) {
    this.a = a;
    this.b = function () {
        func();
    };

    function func () {
        console.log(this.a);
    }
}

var xy = new XY(1);
xy.b(); //2

备注

• 这个例子有点构造，但请注意，函数func通过简单地写func();来调用.因此，即使您的函数位于构造函数 ( XY ) 中并从作为方法调用的函数中调用(参见第 3 点)，this仍然引用全局对象。

2。使用新关键字调用

var obj = new functionName();

在这种情况下 this将引用新创建的对象。

Example

a = 2;
function XY(a) {
    this.a = a;
}

var xy = new XY(1);
console.log(xy.a); //1

3。作为方法调用

obj.functionName();

在这种情况下 this将引用包含您正在调用的函数的对象。

Example

a = 2;
var xy = {
    a: 1,
    func: function() {
        console.log(this.a);
    }
}
xy.func(); //1

4。使用 apply 调用

functionName.apply(thisObj, argArray);

在这种情况下 this将是 new Object(thisObj) , 与 thisObj作为函数 apply 的第一个参数.

Example

function xy (a,b) {
    console.log(this);
}

xy.apply({f:3}, [1,2]); //Object {f: 3} 
xy.apply("hello", [1,2]); //String {0: "h", 1: "e", 2: "l", 3: "l", 4: "o"}

5。通过事件处理器调用

正如用户 Mifeet 所建议的，事件也会改变 this 的上下文:

事件是一种单独的主题。它们不是 EcmaScript 的一部分，通常由不同的浏览器以不同方式处理。然而，有关 this 的差异是次要的，据我所知，IE > 8 不存在。

this将引用触发事件的 DOM 元素，除非您使用内联事件处理程序。在那种情况下 this将引用全局对象。

Example

<button id="1" onclick="clickit()">click me</button>  <!-- 0 -->
<button id="2">click me</button>
<button id="3">click me</button>
<script>
var button1 = document.getElementById("1");
var button2 = document.getElementById("2");
var button3 = document.getElementById("3");

id = "0";

window.clickit = function(){
    console.log(this.id);
};


button2.onclick = clickit; //2
button3.addEventListener("click", clickit, false); //3
</script>

事件备注

• 版本 9 之前的 Internet Explorer 不支持 addEventListener但是attachEvent .使用此函数还将导致 this引用全局对象。
• this ，直接在 HTML 标签内，将引用表示该标签的 DOM 元素。因此<button id="1" onclick="clickit(this)">click me</button>会将 DOM 元素传递给 clickit事件处理程序。

回到你的案例

在前两种情况下，您将函数作为方法调用，而在最后一种情况下，您将其作为函数调用。这就是为什么在最后一个案例中，this引用全局对象。

编辑

我最近在 StackOverflow 上看到了一个非常相似的问题的非常相似的答案。不幸的是我找不到了，所以我决定自己发布一个答案。但是，如果有人知道我的意思，请发表评论，我很乐意在我的答案中添加指向原始答案的链接。