CODEWITHSUNDEEP
javascript
ankush981
ankush981

Reputation: 5417

Method vs. Function invocation pattern

I picked up this example from taylormcgann. Before I ask my question, let me declare that I'm new to JavaScript and having a tough time grappling with the concepts.

In the link I mentioned, here's how the method invocation pattern is defined:

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 accessed as such. Now comes the function invocation pattern:

// 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'm not able to understand how on Earth does this become function invocation? I can test and verfity that the this object refers to window, but the calling syntax is the same as above. Is this really the difference between method and function invocation pattern, that one is defined inside the object and one is, kind of, outside? I come from C/C++ background, so you can understand how surprising this is for me.

Any thoughts are most welcome.

Upvotes: 3

Views: 1136

Answers (4)

Shashvat Gupta
Shashvat Gupta

Reputation: 83

Well! Although I'm new to javascript and this question is really old one. But I'm writing this answer to help new people looking for answer.

When you declare a function as a part of your object the context of this keyword retains to that of your current object and hence it's called method invocation but when you declare another function inside the previously declared function, this new function's this keyword takes the global context as it is the property of any non arrow function. This function with global context will be considered as function invocation.

In the above given example the functions greet and calculateAge are under method invocation, while function yearsOld comes under function invocation.

For reference checkout this link: https://www.geeksforgeeks.org/arrow-functions-in-javascript/

Upvotes: 0

murli2308
murli2308

Reputation: 3002

I will provide you the simple example which will differentiate the method invocation and function invocation.

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 method inovcation 'this' binds to the current object and when you call function invocation pattern 'this' binds to global object. Above example will simply explain you all things read carefully.

In your example both are method invocation patterns.

Upvotes: 3

Niranjan Borawake
Niranjan Borawake

Reputation: 1638

Guessing how you are considering the example.

If you are thinking, person.greet(); is method invocation and person.calculateAge(10); is function invocation then you are wrong both are method invocation.

What I think is, in the second method calculateAge the way you call yearsOld is a function invocation pattern.

For JS reading right stuff is more important. Have a look at this.

This is a function invocation pattern: 

var sum = add(3, 4);    // sum is 7

As add method is not part of any object, like yearsOld function in example we are considering.

Upvotes: 0

Amitesh
Amitesh

Reputation: 1517

There is no difference between the person.calculateAge and person.greet as both will be added as a property to the 'person' object. However the author is trying to explain how the 'this' keyword is set during varying execution context which normally does not depend on where the function is defined, rather it depends on how a function is invoked.
In both the cases above the 'this' keyword will be set to 'person' object as these methods are being invoked by 'person'. However while invoking yearsOld() method it will no more point to 'person' object as it is being invoked by person.calculateAge.
I would recommend to take a look at Mozilla Dev link to understand 'this'.

Upvotes: 3

Related Questions