JavaScript’s ‘this’ vs. Ruby’s ‘self’
Getting into JavaScript in the last couple days, I have quickly noticed many similarities in syntax/concepts with Ruby. One of these concepts is the use of this in JS, which can be somewhat similar to the concept of self in Ruby. A quick review of self in Ruby:
Briefly: if we define an instance method such as sing, we cannot call the sing method on anything but an instance of the class Person. Otherwise, we will see an error similar to line 45.
For JavaScript, the concept of this is a bit different. Lets take a look at the code below:
On line 1–2, we declare variables outside of the scope of any function or as we can see below within the scope of the object Window. The idea of Window is very similar to Main class in Ruby. If I pulled up IRB and typed in self, my return value will be Main.
Moving forward, we declare a function showFullName that utilizes two variables firstName and lastName; and should ideally return to us the combination of the two.
Next, we define a variable called person that contains an object with the keys of firstName, lastName, and our function showFullName. We then call the showFullName method by itself, on window, and on person, in order to witness the difference. In addition, we will log what this is along the way to keep track. So lets see what happens in the console..
When we called showFullName, this defaulted to Window and utilized the global variables. Naturally the same will happen when we called window.showFullName. However, when we call person.showFullName, the scope of this is now the object that is calling the method showFullName and hence our result, which utilized the local variables from the person object.
So to summarize; when the showFullName() function is defined in the global scope, just like the firstName and lastName variables, this will have the value of the window object. On the other hand, when the showFullName function is invoked by the person object, this will have the value of the person object. So whatever is calling the method that is invoking this will be referenced.
There are some interesting ways to manipulate this and it is generally through the use of the call, apply, or bind methods.
I borrowed and modified the following text from javascriptissexy.com. It is helpful to think of this as the context of the subject of a sentence. “George is an amazing programmer who programs well.” The subject of the sentence is George, and the context of the sentence is George because the focus of the sentence is on him at this particular time in the sentence. Even the “who” pronoun is referring to George, the antecedent. I use semicolons quite often to switch the subject of a sentence. Similarly, we can have an object that is current context and switch the context to another object by invoking the function with another object using the apply method.
If for example, we had another person. We could use the apply method on person.showFullName and pass in the other object which will in turn run the function showFullName with the parameters of anotherPerson.
All I got for now, back to labs.
Much more detail on this subject via the following links:
http://javascriptissexy.com/understand-javascripts-this-with-clarity-and-master-it/
