JavaScript, when call a function using this, and when passing the object?

Question

What is the difference between the two following usages of the function calls: algis.add() vs Person.prototype.add2(algis) ?

function Person(first, last) {
    this.firstName = first;
    this.lastName = last;
}

Person.prototype.add = function (){
    return this.lastName + this.firstName;
}

Person.prototype.add2= function (person){
    return person.lastName + person.firstName;
}

var algis = new Person ('algis', 'sru');
alert('add = ' + algis.add()); //works
alert('add2 = ' + Person.prototype.add2(algis)); //works

Is there indication to use algis.add() vs Person.prototype.add2(algis) ?

Answer 1

The difference between the two methods can be analysed as follows:

• Method 1 algis.add() is using a function in the prototype of algis (more precisely in the prototype of Object type Person) to concatenate two values stored in previously in algis.

• Method 2 Person.prototype.add2(algis) is asking the prototype of Object type Person to add the variables stored in your algis object.

In the case of Method 1, the javascript interpreter will first check if Object type Person has the function add(). If it doesn't (which is your case), then according to prototype inheritance, the javascript interpreter will look to the prototype of algis to search for the function add() and the prototype of that prototype and so on until it reaches the final prototype Function.prototype

Important Notes:

Even though you did not ask, it is good practice to declare the variables in your Function Object Person as being either Public, Protected, or Private. This is important for a few reasons:

1. Preventing errors. Javascript is a language that is known to have it's good share of faults (while at the same time having it's own good parts). One of the faults it has is scope. In your case, you are using scope correctly since javaqscript closure allows for scope to happen inside functions, however not in blocks found anywhere else (when I say blocks, I refer to anything within {...}. Since this is recognized as an easy place for errors to happen, it is recommended to always declare what variables you are using at the top of your blocks so that your code is easier to read and debug. And since it is important to maintain consistency, this should also be common practice in functions, even though closure exists.

So in your case, I would have placed protected firstname; protected lastname; before the code this.firstname = ....

Answer 2

First example:

var algis = new Person ('algis', 'sru');
alert( 'add = ' + algis.add() ); //works

This is creating a new instance of the Object using the Person constructor function.

Then you are calling the add function method which has been added the Person prototype.

Second example:

alert ('add2 = ' + Person.prototype.add2(algis) ); //works

This is calling the add2 function on the Person prototype and passing algis as an argument.

Extra:

If you are unclear on how prototypical inheritance works in Javascript (why you are getting the output you are getting), you can reference the following link: Link

Answer 3

There isn't much difference between using the following two add functions.

function PersonAdd(person){
    return person.lastName + person.firstName;
}

Person.prototype.add= function (person){
    return person.lastName + person.firstName;
}

In other words. If you go through the "trouble" of creating a prototype method I don't see the point of calling it as a function outside its context and having to pass the context as a variable.

From my point of view you neglect the principle of encapsulation, which is one of the strengths of OO. I would go with your first approach all the way.

Person.prototype.add = function (){
    return this.lastName + this.firstName;
}
var algis = new Person ('algis', 'sru');
alert( 'add = ' + algis.add() );