欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

深入理解 JavaScript 函数特性（第 4 部分）

最编程 2024-08-05 20:33:21
...

在java中我们为了提高代码的复用性，可以使用方法。同样，在JavaScript中可以使用函数来完成相同的事情。JavaScript中的函数被设计为执行特定任务的代码块，通过关键字function来定义。接下来我们学习一下JavaScript中定义函数的2种语法

4.1 第一种定义格式

第一种定义格式如下：

function 函数名(参数1,参数2..){
    要执行的代码
}

因为JavaScript是弱数据类型的语言，所以有如下几点需要注意：

  • 形式参数不需要声明类型，并且JavaScript中不管什么类型都是let或者var去声明，加上也没有意义。
  • 返回值也不需要声明类型，直接return即可

如下示例：

function add(a, b){
    return a + b;
}

在<script>中定义上述示例的函数：

<script>
     function add(a,b){
        return  a + b;
     }
</script>

但是上述只是定义函数，函数需要被调用才能执行所以接下来我们需要调用函数

第二步：因为定义的add函数有返回值，所以我们可以接受返回值，并且输出到浏览器上，添加如下代码：

let result = add(10,20);
alert(result);

查看浏览器运行结果：浏览器弹框内容为30。

4.2 第二种定义格式

第二种可以通过var去定义函数的名字，具体格式如下：

var functionName = function (参数1,参数2..){   
	//要执行的代码
}

接下来我们按照上述的格式，修改代码如下：只需要将第一种定义方式注释掉，替换成第二种定义方式即可，函数的调用不变

<script>

    //定义函数-1
    // function add(a,b){
    //    return  a + b;
    // }

    //定义函数-2
    var add = function(a,b){
        return  a + b;
    }


    //函数调用
    var result = add(10,20);
    alert(result);
    
</script>

浏览器弹框效果和上述一致

我们在调用add函数时，再添加2个参数，修改代码如下：

var result = add(10,20,30,40);

浏览器打开，发现没有错误，并且依然弹出30，这是为什么呢？

因为在JavaScript中，函数的调用只需要名称正确即可，参数列表不管的。如上述案例，10传递给了变量a，20传递给了变量b,而30和40没有变量接受，但是不影响函数的正常调用。

4.3 自调用函数

自调用函数（也叫立即执行函数表达式，IIFE，读作"iffy"）是一种在JavaScript中定义之后立即执行的函数。IIFE的主要目的是创建一个独立的作用域。在这个作用域里，你可以声明变量或者函数，而不必担心污染全局作用域。这对于临时的、一次性的代码逻辑尤其有用，以及在模块化前（ES6模块出现前）如何隔离代码的问题。

IIFE通常如下面的格式书写：

(function() {
    // 在这个作用域里的代码
    var temp = "这是一个临时变量";
    console.log("这是一个自调用函数");
})();

// temp 在这里是不可访问的

或者带有参数的形式：

(function(a, b) {
    var result = a + b;
    console.log(result); // 输出结果
})(10, 5); // 自调用函数被立即调用，并传递了10和5作为参数

使用IIFE的好处主要包括：

  1. 命名冲突：在IIFE中声明的变量不会污染全局命名空间。
  2. 私有性：任何在IIFE内声明的变量或函数都无法从外部访问，只能通过IIFE内部或者通过暴露的接口访问。
  3. 立即执行：函数被定义后立即执行，适合已知不需要重复执行的代码块。

在现代JavaScript中，由于ES6引入了块作用域变量（如let和const）以及模块系统，全局污染变得容易避免，因此IIFE的必要性已经大幅减少。但在某些特定情况下，IIFEs仍然非常有用，尤其是在你需要快速原型设计或者与老代码库交互的时候。

上一篇： 实战打造你的京东商城——HTML、CSS和JS项目学习指南

下一篇： 玩转JS DOM：添加、删除、替换元素，查找节点，克隆节点，理解回流与重绘，以及文档碎片的使用

推荐阅读