The difference between Javascript call and apply and how to use it

1. Definition of method
call method:
Syntax: fun.call(thisArg[, arg1[, arg2[, ...]]])
Definition: Call a method of an object , replaces 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 the original context to the new object specified by thisArg.
If the thisArg parameter is not provided, the Global object is used as thisArg.

apply method:
Syntax: fun.apply(thisArg[, argsArray])
Definition: Apply a method of a certain object and replace the current object with another object.
Note:
If argArray is not a valid array or is not an arguments object, a TypeError will result.
If neither argArray nor thisArg is provided, the Global object will be used as thisArg and no parameters can be passed.

2. The difference between the two methods
The basic difference between the two methods is that the parameters are different
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);

3. Function examples

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(“设计蜂巢”,24,”男”);
test.alertName();//设计蜂巢
test.alertAge();//24
test.alertSex();//男

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, ‘设计蜂巢', 2);
album.get_owner(function (owner) {
alert(‘The album' + this.name + ‘ belongs to ‘ + owner);
});

For more articles on the difference between Javascript call and apply and how to use them, please pay attention to the PHP Chinese website !