手册

目录

函数调用

收藏342

阅读599

更新时间2025-08-07

调用 JavaScript 函数

在函数被定义时,函数内部的代码不会执行。

在函数被调用时,函数内部的代码会被执行。

调用函数通常也可以说“启动函数”或“执行函数”。

在本教程中,我们使用“调用”。

以函数形式调用函数

实例

function myFunction(a, b) {
    return a * b;
}
myFunction(10, 2);           // 将返回 20
运行实例 »

点击 "运行实例" 按钮查看在线实例

以上函数不属于任何对象。但是在 JavaScript 中,始终存在一种默认的全局对象。

在 HTML 中,默认全局对象是 HTML 页面本身,所有上面的函数“属于”HTML 页面。

在浏览器中,这个页面对象就是浏览器窗口。上面的函数自动成为一个窗口函数。

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

实例

function myFunction(a, b) {
    return a * b;
}
window.myFunction(10, 2);    // 也会返回 20
运行实例 »

点击 "运行实例" 按钮查看在线实例

这是调用函数的常见方法,但并不是一个好习惯。

全局变量、方法或函数很容易在全局对象中产生命名冲突和漏洞。

this 关键词

在 JavaScript 中,被称为 this 的事物,指的是“拥有”当前代码的对象。

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

请注意 this 并不是变量。它属于关键词。您无法改变 this 的值。

全局对象

当不带拥有者对象调用对象时,this 的值成为全局对象。

在 web 浏览器中,全局对象就是浏览器对象。

本例以 this 的值返回这个 window 对象:

实例

var x = myFunction();            // x 将成为 window 对象

function myFunction() {
   return this;
}
运行实例 »

点击 "运行实例" 按钮查看在线实例

调用一个函数作为一个全局函数,会导致 this 的值成为全局对象。

作为变量来使用 window 对象很容易使程序崩溃。

作为方法来调用函数

在 JavaScript 中,您可以把函数定义为对象方法。

下面的例子创建了一个对象(myObject),带有两个属性(firstName 和 lastName),以及一个方法(fullName):

实例

var myObject = {
    firstName:"Bill",
    lastName: "Gates",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
myObject.fullName();         // 将返回 "Bill Gates"
运行实例 »

点击 "运行实例" 按钮查看在线实例

fullName 方法是一个函数。该函数属于对象。myObject 是函数的拥有者。

被称为 this 的事物,是“拥有”这段 JavaScript 代码的对象。在此例中,this 的值是 myObject。

测试一下!修改这个 fullName 方法来返回 this 的值:

实例

var myObject = {
    firstName:"Bill",
    lastName: "Gates",
    fullName: function () {
        return this;
    }
}
myObject.fullName();          // 将返回 [object Object](拥有者对象)
运行实例 »

点击 "运行实例" 按钮查看在线实例

以对象方法来调用函数,会导致 this 的值成为对象本身。

通过函数构造器来调用函数

如果函数调用的前面是 new 关键字,那么这是一个构造函数调用。

它看起来像你创建一个新的函数,但由于 JavaScript 函数是对象,你实际上创建一个新对象:

实例

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

// 创建了一个新对象:
var x = new myFunction("Bill", "Gates");
x.firstName;                             // 会返回 "Bill"
运行实例 »

点击 "运行实例" 按钮查看在线实例

构造器调用会创建新对象。新对象会从其构造器继承属性和方法。

构造器内的 this 关键词没有值。

this 的值会成为调用函数时创建的新对象。

相关

视频

RELATED VIDEOS

更多

免费

Web前端开发极速入门
初级 Web前端开发极速入门

219920次学习

收藏

免费

前端入门_HTML5
初级 前端入门_HTML5

616946次学习

收藏

免费

30分钟学会网站布局
初级 30分钟学会网站布局

238440次学习

收藏

免费

CSS视频教程-玉女心经版
初级 CSS视频教程-玉女心经版

393054次学习

收藏

免费

独孤九贱(1)_HTML5视频教程

免费

独孤九贱(6)_jQuery视频教程

免费

独孤九贱(7)_Bootstrap视频教程

免费

独孤九贱(2)_CSS视频教程
初级 独孤九贱(2)_CSS视频教程

229605次学习

收藏

科技资讯

更多

精选课程

更多
前端入门_HTML5
前端入门_HTML5

共29课时

61.7万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时

39.3万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时

70.9万人学习

独孤九贱(1)_HTML5视频教程
独孤九贱(1)_HTML5视频教程

共25课时

61.6万人学习

独孤九贱(2)_CSS视频教程
独孤九贱(2)_CSS视频教程

共22课时

23万人学习

独孤九贱(3)_JavaScript视频教程
独孤九贱(3)_JavaScript视频教程

共28课时

33.9万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时

125万人学习

关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号