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
。
此示例 this
为 window
对象:
let x = myFunction();
function myFunction() {
return this;
}
对象方法
在 JavaScript 中,对象中的函数,我们称之为对象方法。
以下示例创建一个对象 (myObject
),具有两个属性(firstName
和 lastName
)和一个方法(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
指的对象本身。