"这个"的范围

Question

我有一个简单的对象,我不理解this通过调用此对象的函数的概念(范围).

为什么在最后一个变量(3)中调用show()(show()没有父对象的对象内部的函数)结果是"这是全局的"而不是内部变量title("Color Picker")？

我有一个模糊的想法,即popup.show()在show定义gloabal变量之后调用函数,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对象).

例

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();.因此,即使您的函数位于构造函数function(XY)中并且从作为方法调用的函数调用(请参阅第3点),this仍然引用全局对象.

2.使用新关键字调用

var obj = new functionName();

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

例

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

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

3.呼叫作为一种方法

obj.functionName();

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

例

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.

例

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将引用全局对象.

例

<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>

对事件的评论

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

回到你的情况

在前两种情况下,您将函数称为方法,在最后一种情况下,您将其称为函数.这就是为什么在最后一种情况下,this指的是全局对象.

编辑

我最近在StackOverflow上看到了一个非常相似的问题答案.不幸的是我再也找不到了,所以我决定自己发一个答案.但是,如果有人知道我的意思是什么,请发表评论,我很乐意在答案中提供原始答案的链接.