Problem with using the " this " keyword

This is an interesting question for me as I'm reviewing completly Javascript and all Its weird parts at the moment. I found the answer to your question.

As you typed in the example you give, that works when you call the method with function outside your object, this works because when you click on the button the click events is in the global scope and thus looks for a function to call in this global scope

So if you want to leave the method inside your object and call and still print the name as it should you can do that:

var bob = {
  first_name: "Bob",
  last_name: "Jones",
  fullName: function() {
    console.log(this.first_name + " " + this.last_name);
    return this.first_name + " " + this.last_name;
  },
  printName: function() {
    var printFullName = function(){
      bob.fullName();
    };
    printFullName();
  }
}

bob.printName();

document.getElementById('btn').onclick = bob.printName;

You can test it within this js fiddle;

So as you can see I set a function expression inside my printName method which calls the fullName method on Bob. It might looks weird, but if this works, It's because the function expression printFullName gets attached to the global scope, that's why your onclick event can access that function unlike the methods available within the bob object.

You could as well directly write your printName function outside the bob object, this way, this function will be directly in the global scope, and the function will be called as well when you click the button.

In fact, that sounds really odd, but that's the way Javascript works and that can cause some issues whith our understanding.

If you want further explainations check the example above:

var c = {
    name: 'the c object',
    log: function(){
        this.name = 'the name of c object has changed !';
        console.log(this.name);
    }
}

console.log("first call c.name :", c.name);
//second call I use this time the log method to modify the name property, this work, I can easily modify the name with the this keywords which is bound to the 'c' object.
console.log(c.log());

But what If we want a function expression inside our method that modifies the name property of our project, as we did with your example to have something working with the clicked button ?

Method directly called (this works obviously);

var c = {
    name: 'the c object',
    log: function(){
        this.name = 'the name of c object has changed !';
        console.log(this.name);
    }
}

console.log("first call c.name :", c.name);
//second call I use this time the log method to modify the name property, this work, I can easily modify the name with the this keywords which is bound to the 'c' object.
console.log(c.log());

Method with function expression inside the method (this won't work');

var c = {
    name: 'the c object',
    log: function(){
        this.name = 'the name of c object has changed !';
        var modifyName =  function(){
         this.name = "I change the name for the second time";   
        };
        modifyName();
        console.log(this);
    }
}

console.log("first call c.name :", c.name);
//second call I use this time the log method to modify the name property
console.log(c.log());

If you check the console log, you'll see that the name of the 'c' object is still the last modified name => "the name of c object has changed !".

Why ? Because as you can see the modifyName function expression has a this keyword, but this isn't bound to the c object, It's bound to the global scope... that's the way Javascript works under the hood.

One common pattern to solve this issue is to use a reference for the this keyword.

This way:

var c = {
    name: 'the c object',
    log: function(){
        var self = this;
        self.name = 'the name of c object has changed !';
        var modifyName=  function(){
         self.name = "I change the name for the second time";   
        };
        modifyName();
        console.log(self);
    }
}

console.log("first call c.name :", c.name);
//second call I use this time the log method to modify the name property
console.log(c.log());

That time, you will see as output the object but with the name changed ! The name that have been changed thanks the function expression within the log method ! Because thanks the variable self we set, we keep a reference with the this keyword, our actual object and we thus are able to modify its properties....

I hope my explaination makes sense and help a bit. Maybe some people will be able to give better explaination.