I'm trying to understand the difference between foo.bar() and var fn = foo.bar; fn();

I've put together a little example, but I dont totally understand why the failing ones actually fail.

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

Which produces:

• Arf
• Arf
• undefined
• Arf
• undefined

On JSFiddle: http://jsfiddle.net/D6Vdg/1/

So it appears that snapping off a function causes it to remove it's context. Ok. But why then does (dog.woof)(); work?

It's all just a bit confusing figuring out whats going on here. There are obviously some core semantics I'm just not getting.