JavaScript 函数调用
JavaScript 函数调用
JavaScript 函数内部的代码会在“某物”调用它时执行。
调用 JavaScript 函数
在函数被定义时，函数内部的代码不会执行。
在函数被调用时，函数内部的代码会被执行。
调用函数通常也可以说“启动函数”或“执行函数”。
在本教程中，我们使用“调用”。
以函数形式调用函数
示例代码：
function myFunction(a, b) {
return a * b;
}
myFunction(10, 2); // 将返回 20
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 函数</h1>
<p>全局函数（myFunction）返回参数（a，b）的乘积：</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction(10, 2);
</script>
</body>
</html>
运行结果：
Javascript 函数 全局函数（myFunction）返回参数（a，b）的乘积： 20
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
以上函数不属于任何对象。但是在 JavaScript 中，始终存在一种默认的全局对象。
在 HTML 中，默认全局对象是 HTML 页面本身，所有上面的函数“属于”HTML 页面。
在浏览器中，这个页面对象就是浏览器窗口。上面的函数自动成为一个窗口函数。
myFunction() 和 window.myFunction() 是同一个函数：
示例代码：
function myFunction(a, b) {
return a * b;
}
window.myFunction(10, 2); // 也会返回 20
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 函数</h1>
<p>全局函数自动成为 window 方法。调用 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 函数 全局函数自动成为 window 方法。调用 myFunction() 与调用 window.myFunction() 相同。 20
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
这是调用函数的常见方法，但并不是一个好习惯。
全局变量、方法或函数很容易在全局对象中产生命名冲突和漏洞。
this 关键词
在 JavaScript 中，被称为 this 的事物，指的是“拥有”当前代码的对象。
this 的值，在函数中使用时，是“拥有”该函数的对象。
请注意 this 并不是变量。它属于关键词。您无法改变 this 的值。
全局对象
当不带拥有者对象调用对象时，this 的值成为全局对象。
在 web 浏览器中，全局对象就是浏览器对象。
本例以 this 的值返回这个 window 对象：
示例代码：
var x = myFunction(); // x 将成为 window 对象
function myFunction() {
return this;
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 函数</h1>
<p>在 HTML 中，全局函数中 <b>this </b> 的值是 window 对象。</p>
<p id="demo"></p>
<script>
var x = myFunction();
function myFunction() {
return this;
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
运行结果：
Javascript 函数 在 HTML 中，全局函数中 this 的值是 window 对象。 [object Window]
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
调用一个函数作为一个全局函数，会导致 this 的值成为全局对象。
作为变量来使用 window 对象很容易使程序崩溃。
作为方法来调用函数
在 JavaScript 中，您可以把函数定义为对象方法。
下面的例子创建了一个对象（myObject），带有两个属性（firstName 和 lastName），以及一个方法（fullName）：
示例代码：
var myObject = {
firstName:"Bill",
lastName: "Gates",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
myObject.fullName(); // 将返回 "Bill Gates"
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 函数</h1>
<p>myObject.fullName() 将返回 Bill Gates：</p>
<p id="demo"></p>
<script>
var myObject = {
firstName:"Bill",
lastName: "Gates",
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
document.getElementById("demo").innerHTML = myObject.fullName();
</script>
</body>
</html>
运行结果：
Javascript 函数 myObject.fullName() 将返回 Bill Gates： Bill Gates
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
fullName 方法是一个函数。该函数属于对象。myObject 是函数的拥有者。
被称为 this 的事物，是“拥有”这段 JavaScript 代码的对象。在此例中，this 的值是 myObject。
测试一下！修改这个 fullName 方法来返回 this 的值：
示例代码：
var myObject = {
firstName:"Bill",
lastName: "Gates",
fullName: function () {
return this;
}
}
myObject.fullName(); // 将返回 [object Object]（拥有者对象）
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 函数</h1>
<p>在对象方法中，<b>this</b> 的值是所有者对象。</p>
<p id="demo"></p>
<script>
var myObject = {
firstName:"Bill",
lastName: "Gates",
fullName: function() {
return this;
}
}
document.getElementById("demo").innerHTML = myObject.fullName();
</script>
</body>
</html>
运行结果：
Javascript 函数 在对象方法中，this 的值是所有者对象。 [object Object]
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
以对象方法来调用函数，会导致 this 的值成为对象本身。
通过函数构造器来调用函数
如果函数调用的前面是 new 关键字，那么这是一个构造函数调用。
它看起来像你创建一个新的函数，但由于 JavaScript 函数是对象，你实际上创建一个新对象：
示例代码：
// 这是函数构造器：
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
}
// 创建了一个新对象：
var x = new myFunction("Bill", "Gates");
x.firstName; // 会返回 "Bill"
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 函数</h1>
<p>在这个例子中，myFunction 是一个函数构造函数：</p>
<p id="demo"></p>
<script>
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
}
var x = new myFunction("Bill","Gates")
document.getElementById("demo").innerHTML = x.firstName;
</script>
</body>
</html>
运行结果：
Javascript 函数 在这个例子中，myFunction 是一个函数构造函数： Bill
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
构造器调用会创建新对象。新对象会从其构造器继承属性和方法。
构造器内的 this 关键词没有值。
this 的值会成为调用函数时创建的新对象。
