Method versus function call pattern
I took this example from taylormcgann . Before asking your question, let me state that I am new to JavaScript and have a hard time grasping concepts.
The link I mentioned describes the method call pattern here:
var person = {
name: 'Calvin',
age: 25,
greet: function () {
alert('My name is ' + this.name + '.');
}
};
person.greet(); //My name is Calvin.
Fair enough. greet()
is defined as a method and is available as such. Now the function call template appears:
// Add a new method to person
person.calculateAge = function (yearsFromNow) {
var self = this;
function yearsOld() {
return self.age + yearsFromNow;
}
alert('I will be ' + yearsOld() + ' years old ' + yearsFromNow + ' years from now.');
}
person.calculateAge(10); //I will be 35 years old 10 years from now.
I can't figure out how on Earth this becomes a function call? I can check and verify what the object this
refers to window
, but the call syntax is the same as above. Is this really the difference between a method call pattern and a function call pattern that is defined inside an object and another outside of it? I am coming from a C / C ++ background, so you can see how amazing this is to me.
Any thoughts are appreciated.
source to share
I will present you with a simple example that will differentiate between a method call and a function call.
var x = 3;
var foo = {
x: 2,
baz: {
x: 1,
bar: function() {
return this.x;
}
}
}
var go = foo.baz.bar;
alert(go());//3
alert(foo.baz.bar());//1
when you call the inovcation method 'this' binds to the current object and when you call the function call template 'this' binds to the global object. The above example will just explain everything you need to read carefully.
In your example, both method call patterns.
source to share
There is no difference between person.calculateAge
and person.greet
as both will be added as a property of the 'person' object. However, the author tries to explain how the keyword " this
" is set during a changing execution context, which usually does not depend on where the function is defined, but depends on how the function is called.
In both cases above, the keyword << 22> will be set to ' person
' because these methods call 'person'. However, when the method is called, yearsOld()
it will no longer point to the person object as it is being called person.calculateAge
.
I would recommend taking a look at the Mozilla Dev link to understand. ' this
'
source to share
Guess how you look at the example.
If you think person.greet();
it is a method call and person.calculateAge(10);
is a function call, then you are mistaken as a method call.
I think in the second method the calculateAge
way you are calling yearsOld
is the function call pattern.
For JS, reading the right stuff is more important. Check it out .
This is the function call pattern:
var sum = add(3, 4); // sum is 7
As a add
method, it is not part of any object, such as a function yearsOld
in the example we are looking at.
source to share