1

我有一个按钮#test。 

var obj = {
  name: "John",
  test: function() {
    console.log('name '+ this.name );
  }
};

$("#test").on( "click", obj.test);

这将记录一个空字符串（记录 typeof this.name 给出一个字符串）。

编辑：我知道这个上下文变成了按钮，因此 this.name 什么也不返回。

相对

var obj = {
  name: "John",
  test: function() {
    console.log('name '+ this.name );
  }
};

$("#test").on( "click", function() {
  obj.test();  //logs John
});

有什么区别？

编辑：如何用 annon 函数包装 obj.test() 使其行为与上面不同？

4

2 回答 2

1

是关于解决的this。如果您使用$("#test").on("click", obj.test);thenthis将是按钮，但如果您通过闭包则将this是obj.

当我调用 obj.testthis时，测试中将是 obj。

JQuery 将this在单击时设置为按钮，因此在不引用 obj 的情况下传递 obj.testthis会破坏您的 obj.test 函数。

解决此问题的最佳方法是使用Function.prototype.bind（您需要IE < 9的polyfil ）：

var obj = {
    name: "John",
    test: function () {
        console.log('This is:' + this.toString());
    },
    toString: function () {
        return "It's test"
    }
};

$("#test").on("click", function () {
    // by the way; this here is the button
    console.log("what's this here:", this.toString());
    obj.test();  //works but creates a closure
});

$("#test").on("click", obj.test);//breaks, this will be button in test

$("#test").on("click", obj.test.bind(obj));//works

// now to show how this is resolved
window.mytest = obj.test;
window.mytest();// this is window
var obj2 = {
    toString: function () {
        return "this is obj2";
    }
};
obj2.test = obj.test;
obj2.test();//this is obj2
于 2013-07-09T01:29:32.780 回答
1

真正的区别在于对象测试的操作对象。当您在第二个示例中调用该函数时，您正在使用 obj 上下文调用该函数。在第一个示例中，您传递的是对函数的引用，而不是它所附加的上下文。在第一种情况下，当函数被调用时，它实际上是在操作全局范围。

要对此进行测试，请尝试输入： var name = "eiriki"; 在全局范围内的某个地方，然后运行你的函数。它可能会打印出 eiriki，除非你已经分配了其他东西。

于 2013-07-09T01:18:08.173 回答