Differences and usage between Javascript call and apply

  • 2020-03-29 23:47:22
  • OfStack

One, the definition of the method
Call method:
Syntax: fun.call(thisArg[, arg1[, arg2[,...]])
Definition: calls a method of an object to replace the current object with another object.
Description:
The call method can be used to call a method instead of another object. The call method changes the object context of a function from its original context to a new object specified by thisArg.
If no thisArg parameter is provided, then the Global object is used as thisArg.

The apply method:
Syntax: fun.apply(thisArg[, argsArray])
Definition: a method that applies an object to replace the current object with another object.
Description:
This causes a TypeError if argArray is not a valid array or is not an arguments object.
If no argArray and thisArg parameters are provided, then the Global object will be used as thisArg and no parameters can be passed.

Two, the difference between the two
The basic difference between the two methods lies in the different parameters
2.1. Call method:


function Product(name, price) {
this.name = name;
this.price = price;
if (price < 0)
throw RangeError('Cannot create product "' + name + '" with a negative price');
return this;
}
function Food(name, price) {
Product.call(this, name, price);
this.category = 'food';
}
Food.prototype = new Product();
function Toy(name, price) {
Product.call(this, name, price);
this.category = 'toy';
}
Toy.prototype = new Product();
var cheese = new Food('feta', 5);
var fun = new Toy('robot', 40);

2.2 apply method:

function Product(name, price) {
this.name = name;
this.price = price;
if (price < 0)
throw RangeError('Cannot create product "' + name + '" with a negative price');
return this;
}
function Food(name, price) {
Product.apply(this, arguments);
this.category = 'food';
}
Food.prototype = new Product();
function Toy(name, price) {
Product.apply(this, arguments);
this.category = 'toy';
}
Toy.prototype = new Product();
var cheese = new Food('feta', 5);
var fun = new Toy('robot', 40);

Three, action example

3.1 class inheritance


function Person(name,age){
this.name = name;
this.age=age;
this.alertName = function(){
alert(this.name);
}
this.alertAge = function(){
alert(this.age);
}
}
function webDever(name,age,sex){
Person.call(this,name,age);
this.sex=sex;
this.alertSex = function(){
alert(this.sex);
}
}
var test= new webDever( " Design a hive " ,24, "Man" );
test.alertName();//Design a hive
test.alertAge();//24
test.alertSex();// male 

3.2 callback function

function Album(id, title, owner_id) {
this.id = id;
this.name = title;
this.owner_id = owner_id;
};
Album.prototype.get_owner = function (callback) {
var self = this;
$.get( ' /owners/' + this.owner_id, function (data) {
callback && callback.call(self, data.name);
});
};
var album = new Album(1,  'designing a beehive ', 2);
album.get_owner(function (owner) {
alert( ' The album' + this.name +  '  belongs to  '  + owner);
});


Related articles: