Why should I use javascript call method?

Question

I'm trying to understand the call and apply methods in javascript. But I didn't understand why I should use it.

var person = {
   fullName: function() {
      return this.firstName + " " + this.lastName;
 }
}

var person1 = {
 firstName:"John",
 lastName: "Doe"
}
var person2 = {
 firstName:"Mary",
 lastName: "Doe"
}
var x = person.fullName.call(person1);  

I can do this example without using call and apply.

var person = {
   fullName: function(firstName, lastName) {
     return firstName + " " + lastName;
 }
}
var person1 = {
  firstName:"John",
  lastName: "Doe"
}
var person2 = {
  firstName:"Mary",
  lastName: "Doe"
}
var x = person.fullName(person1.firstName, person1.lastName); 

Or I don't understand this example.

function Product(name) {
  this.name = name;
}

function Pizza(name) {
   Product.call(this,name);
}

const pizza = new Pizza("Margherita");

When I think of this example, I can do with the prototype. Why use call or apply? Thank you

Answer 1

A good use case is when you want to 'borrow' a function with a different context. Take the example below, you can definitely use inheritance to give Cat the bark function but maybe you don't want that function to exist on every instance but only want to use it in certain situations.

function Dog(name) {
    this.name = name
    this.bark = function() {
        console.log('woof' + this.name)
    }
}
const dog = new Dog('spot')

dog.bark() // woofspot


function Cat(name) {
    this.name = name
}
const cat = new Cat('cat')

dog.bark.call(cat) // woofcat

Answer 2

As far as I know, it is all a matter of preference on which you use, but you must use call and/or apply, you cannot do it without them.

Answer 3

function Product(name) {
  this.name = name;
}

function Pizza(name) {
   Product.call(this,name);
}

const pizza = new Pizza("Margherita");

That's inheritance . Pizza is a product. In other languages, for example PHP, inheritance looks like this:

class Foo {

  public function __construct() {
    // Do stuff specific for Foo
  }

}

class Bar extends Foo {

  public function __construct()(
    parent::__construct();
    // Do stuff specific for Bar
  }

}

Here, we don't have extends and in order to make it work, you need to say that the this in the parent constructor is the child.

Using call , you can say what the this in the Product() function/constructor is. In this case, it is the Pizza object (the new created an object {}). Without using call , Pizza wouldn't even have a name.

The same goes for your first example

var person = {
   fullName: function() {
      return this.firstName + " " + this.lastName;
 }
}

var person1 = {
 firstName:"John",
 lastName: "Doe"
}
var person2 = {
 firstName:"Mary",
 lastName: "Doe"
}
var x = person.fullName.call(person1);  

Yes, it worked without calling call but not without drastic changes.

person.fullName.call(person1); is like saying take this function and permute this with my person1 object. So in the end, it is as though you did this:

return person1.firstName + " " + person1.lastName;

As to which one to use

Note: While the syntax of this function is almost identical to that of call(), the fundamental difference is that call() accepts an argument list , while apply() accepts a single array of arguments .