5

我有一个简单的对象，我不明白this调用这个对象的函数的概念（范围）。

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

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

代码：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"
4

5 回答 5

5

什么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由简单地调用 write func();。因此，即使您的函数位于构造函数XY（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)thisObjapply

例子

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>

对事件的评论

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

回到你的案子

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

编辑

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

于 2013-05-30T11:00:22.317 回答
3

在您的 情况下 1： var show=popup.show()正在调用 popup 对象中定义的函数 show 。并且显示函数有这个对象引用弹出对象并且弹出对象有它自己的标题变量，它正在调用显示函数。这就是为什么显示“颜色选择器”。

案例 2：这也与案例 1 类似，您在不使用变量的情况下调用 show 函数。所以同样的输出。

案例 3：如果您在案例 1 和案例 2 中调用函数 show 而没有引用任何对象，则默认情况下它采用对象 od 文档。在文档中，title 的值是"'This' is global"，因此它向您显示结果"'This' is global"。这是指文档对象。

希望这对您有所帮助。

于 2013-05-30T09:21:07.517 回答
1

正如其他人所解释的，在前两种情况下，您在popup对象上调用函数，因此this指的是popup. 在第三种情况下，您单独调用函数，而不是在对象上，因此this指的是全局范围（window）。另外，在您的示例中，您不能使用alert(show());，因为show这里不是函数而是字符串。

如果你想得到想要的结果，你可以使用下面的模式（被许多框架使用，例如 jQuery）：

var title="'This' is global";
(function() {
    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  " + popup.title); // refer to the local variable popup instead of this
        }       
    };
    window.popup = popup; // add the (now initialized) local variable popup to the global scope
})(); // execute immediately

var show=popup.show();
var showFn = popup.show; // You cannot use the result of popup.show() as a function because it's a string

//Case 1: 
alert(show);  //output "Color Picker"

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

//Case 3: 
alert(showFn());  // output "Color Picker"

( JS斌)

于 2013-05-30T09:30:00.150 回答
1

那是因为您将变量 show 视为一个函数。让我们简化一下：

function a(){
 return "textA";
}

var obj={
  b: function(){ return "text b";}
};

console.log(a); // will output the function object
console.log(a()); // will call a then output the result of the function --> "textA"
console.log(obj.b); //will output the function object same as console.log(a)
console.log(obj.b()); // will call b then output the result of the function --> "text b"

现在想象我做类似你的第三个例子的事情：

var anotherObj = a();
console.log(anotherObj()); // you try to treat the return of a() as a function. will not work --> "string is not a function "

例如，您可以这样做：

console.log(window[anotherObj]());

这将调用名为“textA”的函数。 完整的小提琴在这里

至于作用域，这里默认指的是窗口。在对象内部运行时，除非函数应用于其他对象，否则 this 将引用该对象。

于 2013-05-30T09:16:20.363 回答
0

this 总是指当前对象或上下文。
在情况 2 中，该对象是弹出窗口。这就是为什么您在警报中看到 popup.title 的原因。

当您分配popup.show给时，您在案例 3 中有效地做的是在要显示show的对象上创建一个句柄window（或至少是当前范围）。所以对于那个句柄，对象是window. 所以现在如果你调用这个句柄，它会显示title你也在window对象上注册。

您可以使用 call 和/或 apply 设置上下文，如下所示：

var show=popup.show 
alert(show.call(popup));
于 2013-05-30T09:17:32.047 回答