javascript - 了解 Javascript 调用函数与返回函数但稍后执行函数之间的区别

Question

我试图理解 foo.bar() 和 var fn = foo.bar; 之间的区别fn();

我已经举了一个小例子，但我不完全明白为什么失败的人实际上失败了。

var Dog = function() {
    this.bark = "Arf";
};

Dog.prototype.woof = function() {
    $('ul').append('<li>'+ this.bark +'</li>');
};

var dog = new Dog();


// works, obviously
dog.woof();

// works
(dog.woof)();

// FAILS
var fnWoof = dog.woof;
fnWoof();


// works
setTimeout(function() {
    dog.woof();
}, 0);

// FAILS
setTimeout(dog.woof, 0);

产生:

• 阿尔夫
• 阿尔夫
• 未定义
• 阿尔夫
• 未定义

在 JSFiddle 上:http://jsfiddle.net/D6Vdg/1/

所以看起来关闭一个函数会导致它删除它的上下文。行。但是为什么 (dog.woof)(); 会起作用呢？

要弄清楚这里发生了什么，有点令人困惑。显然有一些核心语义我只是没有得到。

Answer 1

问题出在上下文和 this 关键字上。

函数本身并不“属于”一个对象。例如，我可以创建一个 cat 对象并将 woof 函数复制过来:

var cat = {
    bark: "meow",
    woof = Dog.prototype.woof
};

现在 cat.woof 会给我“喵”的一声。由于可以灵活地复制和重新分配函数，var fnWoof = dog.woof; 将 fnWoof 与 dog 分离 - 它没有语境。因此，上下文和 this 关键字默认为 window。由于 window 没有 bark 属性，您会得到 undefined。

如果你给窗口一个树皮属性:

window.bark = "Arf";

然后您的代码将起作用(尽管是错误的):

fnWoof(); // "Arf"

要使其按预期工作，您可以传入上下文显式:

fnWoof.call(dog);