JavaScript 函数调用

定义了 JavaScript 函数后,函数代码并不会自动执行,需要调用函数才能执行函数中的代码。

定义了 JavaScript 函数后,函数代码并不会自动执行,需要调用函数才能执行函数中的代码。

一般来说,函数总是由调用者调用的。在不同的场景下的调用者会有所不同,有时候是全局对象,有时候是当前对象,这要根据调用的上下文进行判断。

常规函数调用

function myFunction(a, b) {
  return a * b;
}

myFunction(10, 2); // 返回 20

上面的函数不属于任何对象,但是在 JavaScript 中总是有一个默认的全局对象。

在 HTML 中,默认的全局对象是 HTML 页面本身,因此上面的函数“属于”HTML 页面。在浏览器环境中,页面对象是浏览器窗口对象 window

myFunction()window.myFunction() 是同一个函数:

function myFunction(a, b) {
  return a * b;
}

window.myFunction(10, 2); // 同样返回 20

这是调用 JavaScript 函数的常用方法,但不是一个很好的做法。 全局变量、方法或函数很容易在全局对象中产生名称冲突和错误。

this 关键字

在 JavaScript 中, this 是“拥有”当前代码的对象。

this 在函数中使用时,是指“拥有”此函数的对象。

请注意,这 this 不是变量。它是一个关键字。 this 的值由所处的上下文环境决定,this 的值不能被人为的修改。

! 提示:JS this 关键字阅读更多关于 this 的信息。

全局对象

当在没有所有者对象的情况下调用函数时, this 的值是全局对象。

在 Web 浏览器中,全局对象是浏览器窗口 window

此示例 thiswindow 对象:

let x = myFunction();
function myFunction() {
  return this;
}

对象方法

在 JavaScript 中,对象中的函数,我们称之为对象方法。

以下示例创建一个对象 (myObject),具有两个属性(firstNamelastName)和一个方法(fullName):

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

fullName() 是对象的方法,对象方法中的 this 是值对象本身。

构造函数

构造函数是一种特殊的函数,可以用来构造对象。调用构造函数,需要在前面使用 new 关键字。

通过构造函数创建对象:

// 构造函数
function myFunction(arg1, arg2) {
  this.firstName = arg1;
  this.lastName = arg2;
}

// 创建对象
const myObj = new myFunction("John", "Doe");

myObj.firstName; // 返回 "John"

构造函数调用创建一个新对象,新对象从其构造函数继承属性和方法。

构造函数中的 this 在构造函数定义的时候是没有值的,只有在通过构造函数创建的对象中, this 指的对象本身。