JavaScript中的函数解析

以你之姓@ 2023-01-02 04:27 193阅读 0赞

# 1、函数 #

我们经常需要在脚本的许多地方执行很相似的操作。

例如，当访问者登录、注销或者在其他地方时，我们需要显示一条好看的信息。

函数是程序的主要“构建模块”。函数使该段代码可以被调用很多次，而不需要写重复的代码。

--------------------

# 2、函数说明 #

--------------------

## 2.1、内置函数 ##

如 `alert(message)`、`prompt(message, default)` 和 `confirm(question)`。

内置函数（官方提供的函数，系统自身拥有函数）

alert();

document.write();

console.log();

parseInt();

parseFloat();

--------------------

## 2.2、自定义函数 ##

使用 **函数声明** 创建函数。

`function` 关键字首先出现，然后是 **函数名**，然后是括号之间的 **参数** 列表（用逗号分隔，在上述示例中为空），最后是花括号之间的代码（即“函数体”）。  
实例：

function showMessage() {
      alert( 'Hello everyone!' );
    }
    
    showMessage();
    showMessage();

调用 `showMessage()` 执行函数的代码。这里我们会看到显示两次消息。

这个例子清楚地演示了函数的主要目的之一：避免代码重复。

如果我们需要更改消息或其显示方式，只需在一个地方修改代码：输出它的函数。

--------------------

## 3、函数作用域 ##

## 3.1、局部变量 ##

*  局部变量是定义在函数内部的变量.这个变量只能在函数内使用.例外,函数中的形参也是局部变量.
 *              每一次调用时创建，调用结束会销毁。

实例：

如果在函数外调用变量b，会报错。

--------------------

## 3.2、全局变量 ##

*  直接写在Script标签中的变量，在页面中的任意位置都可以访问到。
 *  在页面打开创建，在页面关闭时销毁。
 *  函数对全局变量拥有全部的访问权限。函数也可以修改全局变量。
 *  全局变量在任意函数中都是可见的（除非被局部变量遮蔽）。
 *  减少全局变量的使用是一种很好的做法。现代的代码有很少甚至没有全局变量。大多数变量存在于它们的函数中。但是有时候，全局变量能够用于存储项目级别的数据。
 *  实例：
    
        let userName = 'John';
        
        function showMessage() {
          userName = "Bob"; // (1) 改变外部变量
        
          let message = 'Hello, ' + userName;
          alert(message);
        }
        
        alert( userName ); // John 在函数调用之前
        
        showMessage();
        
        alert( userName ); // Bob，值被函数修改了
    
    ### 注意： ###

1.  只有在没有局部变量的情况下才会使用外部变量。
2.  如果在函数内部声明了同名变量，那么函数会 **遮蔽** 外部变量。

实例：

let userName = 'John';
    
    function showMessage() {
      let userName = "Bob"; // 声明一个局部变量
    
      let message = 'Hello, ' + userName; // Bob
      alert(message);
    }
    
    // 函数会创建并使用它自己的 userName
    showMessage();
    
    alert( userName ); // John，未被更改，函数没有访问外部变量。

--------------------

## 4、函数的参数和返回值 ##

可以使用参数（也称“函数参数”）来将任意数据传递给函数。

实例：

function showMessage(from, text) { // 参数：from 和 text
      alert(from + ': ' + text);
    }
    
    showMessage('Ann', 'Hello!'); // Ann: Hello! (*)
    showMessage('Ann', "What's up?"); // Ann: What's up? (**)

当函数在 `(*)` 和 `(**)` 行中被调用时，给定值被复制到了局部变量 `from` 和 `text`。然后函数使用它们进行计算。

如果调用未提供参数，那么其默认值则是 `undefined`。

--------------------

## [返回值][Link 1] ##

函数可以将一个值返回到调用代码中作为结果。

*          return:结束当前函数，并将return后面的值（表达式/变量）作为函数的运行结果返回。
 *          当我们需要对函数的运算结果进行不同的处理时，需要将函数的结果返回。
 *          只使用 `return` 但没有返回值也是可行的。但这会导致函数立即退出。
 *           在一个函数中可能会出现很多次 `return`。

例如：

unction checkAge(age) {
      if (age >= 18) {
        return true;
      } else {
        return confirm('Got a permission from the parents?');
      }
    }
    
    let age = prompt('How old are you?', 18);
    
    if ( checkAge(age) ) {
      alert( 'Access granted' );
    } else {
      alert( 'Access denied' );
    }

注意：不要在 `return` 与返回值之间添加新行，如果换行，实际的返回值变成了空值。

如果想要将返回的表达式写成跨多行的形式，那么应该在 `return` 的同一行开始写此表达式。

--------------------

# #

## 5、函数命名 ##

函数就是行为（action）。所以它们的名字通常是动词。它应该简短且尽可能准确地描述函数的作用。这样读代码的人就能清楚地知道这个函数的功能。

一个函数 —— 一个行为

一个函数应该只包含函数名所指定的功能，而不是做更多与函数名无关的功能。

两个独立的行为通常需要两个函数，即使它们通常被一起调用（在这种情况下，可以创建第三个函数来调用这两个函数）。

--------------------

## 总结 ##

*  作为参数传递给函数的值，会被复制到函数的局部变量。
 *  函数可以访问外部变量。但它只能从内到外起作用。函数外部的代码看不到函数内的局部变量。
 *  函数可以返回值。如果没有返回值，则其返回的结果是 `undefined`。