JavaScript函数四种调用方式详解

JavaScript函数调用方式概述

本文通过实例详细解析JavaScript中函数的四种调用方式，供读者参考学习。

在JavaScript中，函数主要存在四种调用模式：

• 1. 作为普通函数调用
• 2. 作为对象方法调用
• 3. 作为构造函数调用
• 4. 使用call或apply方法调用

接下来将分别对这四种方式进行详细说明。

这四种调用方式的核心区别在于 this 的初始化方式不同。

作为普通函数调用

作为普通函数调用

function myFunction(a, b) {
  return a * b;
}
myFunction(10, 2); // myFunction(10, 2) 返回 20

上述函数并未归属于任何特定对象。然而，在JavaScript的执行环境中，它始终默认属于全局对象。

在HTML页面环境中，这个默认的全局对象即为HTML页面本身，因此该函数被视为属于该页面。

在浏览器环境中，页面对象对应的是浏览器窗口（即window对象）。因此，上述函数会自动成为window对象的一个方法。

myFunction() 与 window.myFunction() 的执行效果相同：

function myFunction(a, b) {
  return a * b;
}
window.myFunction(10, 2); // window.myFunction(10, 2) 返回 20

当函数未通过特定对象进行调用时，this 的值会被赋值为全局对象。

在Web浏览器环境中，全局对象即为浏览器窗口（window对象）。

以下示例展示了 this 的值即为window对象：

function myFunction() {
  return this;
}
myFunction(); // 返回 window 对象

当函数作为全局对象调用时， 的值会指向全局对象。 若使用window对象作为变量引用，可能导致程序运行错误。

作为对象方法调用

作为对象方法调用

var myObject = {
  firstName:"John",
  lastName: "Doe",
  fullName: function () {
    return this.firstName + " " + this.lastName;
  }
}
myObject.fullName(); // 返回 "John Doe"

fullName 是一个函数，且该函数属于某个对象。在此例中，myObject 是该函数的所有者。

this 对象拥有JavaScript代码。在实例中， 的值指向 myObject 对象。

请测试以下代码：修改 fullName 方法，使其返回 this 的值：

var myObject = {
  firstName:"John",
  lastName: "Doe",
  fullName: function () {
    return this;
  }
}
myObject.fullName(); // 返回 [object Object] (所有者对象)

当函数作为对象的方法被调用时， 的值将指向该对象本身。

作为构造函数调用

作为构造函数调用

如果在函数调用前使用了 new 关键字，则视为调用构造函数。

这看似创建了新的函数，但实际上JavaScript是通过重新创建对象来实现的：

// 构造函数:
function myFunction(arg1, arg2) {
  this.firstName = arg1;
  this.lastName = arg2;
}
// This  creates a new object
var x = new myFunction("John","Doe");
x.firstName; // 返回 "John"

构造函数的调用会创建一个新的对象。新对象将继承构造函数的属性和方法。

在构造函数内部，this 关键字当前没有具体值。

this 的值是在函数调用并实例化对象（即 new object）时创建的。

使用call或apply方法调用

使用call或apply方法调用

在JavaScript中，函数本身也是对象。JavaScript函数拥有其特定的属性和方法。

call() 和 apply() 是预定义的函数方法。这两个方法都要求第一个参数必须是对象本身。

function myFunction(a, b) {
  return a * b;
}
myObject = myFunction.call(myObject, 10, 2); // 返回 20
function myFunction(a, b) {
  return a * b;
}
myArray = [10, 2];
myObject = myFunction.apply(myObject, myArray); // 返回 20

这两个方法都将对象本身作为第一个参数传入。它们的区别在于第二个参数：apply 接收一个参数数组，即将多个参数组合成一个数组传入；而 call 则逐个接收参数（从第二个参数开始）。

在JavaScript严格模式（strict mode）下，调用函数时第一个参数将成为 this 的值，即使该参数并非一个对象。

在JavaScript非严格模式（non-strict mode）下，如果第一个参数的值为 null 或 undefined，系统将使用全局对象进行替代。

如需了解更多JavaScript相关内容，可参考本站专题：《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》。

希望本文的阐述能对您的JavaScript程序设计有所帮助。