个性化阅读
专注于IT技术分析

调用函数时call和apply属性有什么区别

本文概述

调用函数的方式

有3种方法可以在javascript中执行功能。给定以下反向函数(此示例函数返回反向字符串):

var reverse = function(text){
  return text.split("").reverse().join("");
};

// Or

function reverse(text){
  return text.split("").reverse().join("");
}

我们可以将其执行为:

通话属性

调用属性使你可以执行函数并正确更改此上下文, 然后跟通常的常规函数​​一样, 用逗号分隔特定的参数。

var animals = [
  { species: 'Lion', name: 'King' }, { species: 'Whale', name: 'Fail' }
];

for (var i = 0; i < animals.length; i++) {
  (function(i) {
    this.print = function() {
      console.log('#' + i + ' ' + this.species
                  + ': ' + this.name);
    }
    this.print();
  }).call(animals[i], i);// Change the this context to the animal object
}

申请财产

除了它支持的参数类型外, apply与call非常相似。你可以使用arguments数组代替命名的参数集。使用apply时, 可以使用数组文字或数组变量。

以下示例覆盖console.log方法。但是, 我们希望做与console.log相同的事情, 但要做的是之前和之后的事情, 因此我们使用apply执行原始console.log方法, 因此我们不必担心参数的位置。将会以它们到达的相同方式发送。请注意, arguments变量是一个数组(在此处了解有关函数内部的关键字arguments的更多信息)。

var originalLog = console.log;
console.log = function() {
    // Do something your before execute something
    AnImaginaryFunctionThatDoesSomething(arguments);
    // Call the function as it would have been called normally:
    // Note that with apply we change the this context and send
    originalLog.apply(this, arguments);
    // Run another thing after the original console.log
};

直接执行

如果你决定直接调用一个函数, 则直接执行一个函数不会有任何问题。但是, 你不能更改此上下文, 并且参数总是会受到限制, 就像call属性一样。

你只需要在调用变量之前检查该变量是否为函数。

if(typeof(reverse) === "function"){
    reverse("otto");
}

有什么区别

你与前面的示例之间没有区别吗?没问题, apply和call之间的区别非常简单。请参见以下示例:

var teacher = function(name, age, area) {
    console.log("My name is " + name + ", i'm "+age+" years old and i'm a " + area + " teacher. The context of this is " + this);
};

teacher("John", 20, "History");
teacher.apply(true, ["Patty", 23, "Music"]);
teacher.call(undefined, "Bruce", 44 , "Mathematics");

// Outputs
//My name is John, i'm 20 years old and i'm a History teacher. The context of this is [undefined]
//My name is Patty, i'm 23 years old and i'm a Music teacher. The context of this is [true]
//My name is Bruce, i'm 44 years old and i'm a Mathematics teacher. The context of this is [undefined]

他们完成相同的任务, 执行功能。唯一的区别是参数的发送方式以及可以提供多少个参数。

  • 直接应用, 调用或调用函数, 只需执行即可(带或不带参数)。
  • 只能在apply和call方法中更改此上下文。
  • 直接调用函数或使用调用不允许使用动态参数, 因此会明确声明它们(如果声明了5个参数, 则只会发送5个)。
  • 使用apply允许你向函数发送动态参数(有限的参数, 如果数组作为第二个参数有500个项目, 则该函数将分别接收数组的500个项目作为参数)。

请记住, apply()和call()的第一个和第二个参数是可选的, 不是必需的。因此, 它们只是执行功能的另一种方式, 但是允许自定义。因此, 没有建议的执行函数的方法, 因为你选择的函数仅需要满足你的需求。

赞(0)
未经允许不得转载:srcmini » 调用函数时call和apply属性有什么区别
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!