技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

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 的使用区别。

相关文章

标签: call方法  apply方法  
x
  • 站长推荐
/* 左侧显示文章内容目录 */