5示例演示jQuery .call 和 .apply 的使用区别
作者:admin 时间:2022-7-28 9:27:17 浏览:在上一文《了解 .apply 和 .call 的区别》中,我们介绍了 .call
和 .apply
的有关知识,介绍了它们时如何工作的,并通过多个实例介绍了它们的区别。在本文中,将再通过多个示例,演示 .call
和 .apply
的使用区别。
语句
我们先看看 .call
和 .apply
的语句。
.apply(this, [...])
.call(this, param1, param2, param3, param4...)
可以看到,.apply
接受一个参数数组,而 .call
接受零个或多个单独的参数。这是它们的句式区别。
apply()
方法与 call()
相同,只是 apply()
需要一个数组作为第二个参数,该数组表示目标方法的参数。
所以:
// 假设你有一个函数 f
function f(message) { ... }
f.call(receiver, "test");
f.apply(receiver, ["test"]);
.call
可不需要第一个参数,但 .apply
第一个参数不可缺少。
示例一
这些方法对于赋予对象临时功能非常有用。
var friend = {
car: false,
lendCar: function ( canLend ){
this.car = canLend;
}
};
var me = {
car: false,
gotCar: function(){
return this.car === true;
}
};
console.log(me.gotCar()); // false
friend.lendCar.call(me, true);
console.log(me.gotCar()); // true
friend.lendCar.apply(me, [false]);
console.log(me.gotCar()); // false
示例二
function Person(name) {
this.name = name;
}
Person.prototype.getName = function(a,b) {
return this.name + " " + a + " " + b;
}
var reader = new Person('John Smith');
reader.getName = function() {
// apply 和 call 执行函数并返回值
// 注意提取"getName"原型的不同方式
var baseName = Object.getPrototypeOf(this).getName.apply(this,["is a", "boy"]);
console.log("Apply: " + baseName);
var baseName = Object.getPrototypeOf(reader).getName.call(this, "is a", "boy");
console.log("Call: " + baseName);
// bind 返回可以调用的函数
var baseName = Person.prototype.getName.bind(this, "is a", "boy");
console.log("Bind: " + baseName());
}
reader.getName();
/* Output
Apply: John Smith is a boy
Call: John Smith is a boy
Bind: John Smith is a boy
*/
示例三
var obj1 = { which : "obj1" },
obj2 = { which : "obj2" };
function execute(arg1, arg2){
console.log(this.which, arg1, arg2);
}
//使用 call
execute.call(obj1, "dan", "stanhope");
//output: obj1 dan stanhope
//使用 apply
execute.apply(obj2, ["dan", "stanhope"]);
//output: obj2 dan stanhope
示例四
let obj = {
val1: 5,
val2: 10
}
const summation = function (val3, val4) {
return this.val1 + this.val2 + val3 + val4;
}
console.log(summation.apply(obj, [2 ,3])); //20
// 首先,我们在第一个 arg 中分配 this 的值
// 使用 apply 必须通过数组传递
console.log(summation.call(obj, 2, 3)); //20
// 使用 call 我们可以独立地通过每个参数传递
实例五
var car = {
name: "Reno",
country: "France",
showBuyer: function(firstName, lastName) {
console.log(`${firstName} ${lastName} just bought a ${this.name} from ${this.country}`);
}
}
const firstName = "Bryan";
const lastName = "Smith";
car.showBuyer(firstName, lastName); // Bryan just bought a Reno from France
const obj = { name: "Maserati", country: "Italy" };
car.showBuyer.call(obj, firstName, lastName); // Bryan Smith just bought a Maserati from Italy
car.showBuyer.apply(obj, [firstName, lastName]); // Bryan Smith just bought a Maserati from Italy
总结
本文通过5个示例,演示了jQuery .call 和 .apply 的使用区别。
相关文章
相关文章
x
- 站长推荐