JavaScript 函数调用

JavaScript 函数内部的代码会在“某物”调用它时执行。


调用 JavaScript 函数

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

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

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


以函数形式调用函数

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>JavaScript 函数</h1>
  5. <p>全局函数(myFunction)返回参数(a,b)的乘积:</p>
  6. <p id="demo">
  7. <script>
  8. function myFunction(a, b) {
  9. return a * b;
  10. }
  11. document.getElementById("demo").innerHTML = myFunction(10, 2);
  12. </script>
  13. </body>
  14. </html>

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

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

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

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

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>JavaScript 函数</h1>
  5. <p>全局函数自动成为 window 方法。调用 myFunction() 与调用 window.myFunction() 相同。</p>
  6. <p id="demo">
  7. <script>
  8. function myFunction(a, b) {
  9. return a * b;
  10. }
  11. document.getElementById("demo").innerHTML = window.myFunction(10, 2);
  12. </script>
  13. </body>
  14. </html>

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

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


this 关键词

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

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

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


全局对象

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

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

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

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>JavaScript 函数</h1>
  5. <p>在 HTML 中,全局函数中 <b>this </b> 的值是 window 对象。</p>
  6. <p id="demo">
  7. <script>
  8. var x = myFunction();
  9. function myFunction() {
  10. return this;
  11. }
  12. document.getElementById("demo").innerHTML = x;
  13. </script>
  14. </body>
  15. </html>

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


作为方法来调用函数

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

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

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>JavaScript 函数</h1>
  5. <p>myObject.fullName() 将返回 埃隆 马斯克:</p>
  6. <p id="demo">
  7. <script>
  8. var myObject = {
  9. firstName:"埃隆",
  10. lastName: "马斯克",
  11. fullName: function() {
  12. return this.firstName + " " + this.lastName;
  13. }
  14. }
  15. document.getElementById("demo").innerHTML = myObject.fullName();
  16. </script>
  17. </body>
  18. </html>

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

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

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

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>JavaScript 函数</h1>
  5. <p>在对象方法中,<b>this</b> 的值是所有者对象。</p>
  6. <p id="demo">
  7. <script>
  8. var myObject = {
  9. firstName:"埃隆",
  10. lastName: "马斯克",
  11. fullName: function() {
  12. return this;
  13. }
  14. }
  15. document.getElementById("demo").innerHTML = myObject.fullName();
  16. </script>
  17. </body>
  18. </html>

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


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

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

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

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>JavaScript 函数</h1>
  5. <p>在这个例子中,myFunction 是一个函数构造函数:</p>
  6. <p id="demo">
  7. <script>
  8. function myFunction(arg1, arg2) {
  9. this.firstName = arg1;
  10. this.lastName = arg2;
  11. }
  12. var x = new myFunction("埃隆","马斯克")
  13. document.getElementById("demo").innerHTML = x.firstName;
  14. </script>
  15. </body>
  16. </html>

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

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

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

分类导航