手册

JavaScript 教程 JavaScript 简介 JavaScript 用法 JavaScript 输出 JavaScript 语法 JavaScript 语句 JavaScript 注释 JavaScript 变量 JavaScript 数据类型 JavaScript 对象 JavaScript 函数 JavaScript 作用域 JavaScript 事件 JavaScript 字符串 JavaScript 运算符 JavaScript 比较 JavaScript 条件语句 JavaScript switch 语句 JavaScript for 循环 JavaScript while 循环 JavaScript Break 和 Continue 语句 JavaScript typeof JavaScript 类型转换 JavaScript 正则表达式 JavaScript 错误 JavaScript 调试 JavaScript 变量提升 JavaScript 严格模式 JavaScript 使用误区 JavaScript 表单验证 JavaScript 保留关键字 JavaScript JSON javascript:void(0) 含义 JavaScript 代码规范

JS 函数

JavaScript 函数定义 JavaScript 函数参数 JavaScript 函数调用 JavaScript 闭包

JS HTML DOM

DOM 简介 DOM HTML DOM CSS DOM 事件 DOM EventListener DOM 元素

JS 高级教程

JavaScript 对象 JavaScript Number 对象 JavaScript String JavaScript Date（日期） JavaScript Array（数组） JavaScript Boolean（布尔） JavaScript Math（算数） JavaScript RegExp 对象

JS 浏览器BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript 弹窗 JavaScript 计时事件 JavaScript Cookies

JS 库

JavaScript 库 JavaScript - 测试 jQuery JavaScript - 测试 Prototype

JS 实例

JavaScript 实例 JavaScript 对象实例 JavaScript Browser 对象实例 JavaScript HTML DOM实例 JavaScript总结

JS 参考手册

JavaScript对象 HTML DOM 对象

首页大前端 JavaScript JavaScript中文参考手册

JavaScript 函数调用

阅读92886

更新时间2022-04-15

JavaScript 函数参数

JavaScript 闭包

JavaScript 函数有 4 种调用方式。

每种方式的不同方式在于 this 的初始化。

this 关键字

一般而言，在Javascript中，this指向函数执行时的当前对象。

	注意 this 是保留关键字，你不能修改 this 的值。

调用 JavaScript 函数

在之前的章节中我们已经学会了如何创建函数。

函数中的代码在函数被调用后执行。

作为一个函数调用

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>
全局函数 (myFunction) 返回参数参数相乘的结果：
</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
	return a * b;
}
document.getElementById("demo").innerHTML = myFunction(10, 2); 
</script>

</body>
</html>

运行实例 »

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

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

在 HTML 中默认的全局对象是 HTML 页面本身，所以函数是属于 HTML 页面。

在浏览器中的页面对象是浏览器窗口(window 对象)。以上函数会自动变为 window 对象的函数。

myFunction() 和 window.myFunction() 是一样的：

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>全局函数 myFunction() 会自动成为 window 对象的方法。</p>
<p>myFunction() 类似于 window.myFunction()。</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
	return a * b;
}
document.getElementById("demo").innerHTML = window.myFunction(10, 2); 
</script>

</body>
</html>

运行实例 »

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

	这是调用 JavaScript 函数常用的方法，但不是良好的编程习惯全局变量，方法或函数容易造成命名冲突的bug。

全局对象

当函数没有被自身的对象调用时， this 的值就会变成全局对象。

在 web 浏览器中全局对象是浏览器窗口（window 对象）。

该实例返回 this 的值是 window 对象:

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>在 HTML 中 <b>this</b> 的值, 在全局函数是一个 window 对象。</p>
<p id="demo"></p>
<script>
function myFunction() {
	return this;
}
document.getElementById("demo").innerHTML = myFunction(); 
</script>

</body>
</html>

运行实例 »

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

	函数作为全局对象调用，会使 this 的值成为全局对象。使用 window 对象作为一个变量容易造成程序崩溃。

函数作为方法调用

在 JavaScript 中你可以将函数定义为对象的方法。

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

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>myObject.fullName() 返回 John Doe:</p>
<p id="demo"></p>
<script>
var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function() {
		return this.firstName + " " + this.lastName;
    }
}
document.getElementById("demo").innerHTML = myObject.fullName(); 
</script>

</body>
</html>

运行实例 »

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

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

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

测试以下！修改 fullName 方法并返回 this 值:

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>在一个对象方法中 ，<b>this</b> 的值是对象本身。</p>
<p id="demo"></p>
<script>
var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function() {
		return this;
    }
}
document.getElementById("demo").innerHTML = myObject.fullName();
</script>

</body>
</html>

运行实例 »

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

	函数作为对象方法调用，会使得 this 的值成为对象本身。

使用构造函数调用函数

如果函数调用前使用了 new 关键字, 则是调用了构造函数。

这看起来就像创建了新的函数，但实际上 JavaScript 函数是重新创建的对象：

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>该实例中， myFunction 是函数构造函数:</p>
<p id="demo"></p>
<script>
function myFunction(arg1, arg2) {
	this.firstName = arg1;
    this.lastName  = arg2;
}
var x = new myFunction("John","Doe")
document.getElementById("demo").innerHTML = x.firstName; 
</script>

</body>
</html>

运行实例 »

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

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