四，JavaScript的函数 · 上

木12138

已于 2022-03-31 20:38:48 修改

阅读量968

点赞数

分类专栏： javascript 文章标签： javascript 开发语言 ecmascript

于 2022-03-10 16:38:33 首次发布

本文链接：https://blog.csdn.net/weixin_50337713/article/details/123404800

版权

javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文深入探讨JavaScript中的函数，包括其作为代码复用和模块化工具的概念，详细介绍了函数的定义和调用语法，如系统提供的函数和自定义函数。此外，还讨论了函数的本质——内存中的变量，以及赋值式、匿名和自调用函数的特性。进一步讲解了带参数和返回值的函数，阐述了预解析的概念和执行顺序。通过实例解析，帮助读者理解函数在JavaScript中的重要性和使用方式。

摘要由CSDN通过智能技术生成

一，函数的概念

函数是代码的一种工具，公式

可以用来处理重复代码，将重复代码放在一个容器中，通过调用这个容器，就能自动执行容器中的代码

函数的优点：

实现了代码的可重用性
实现了模块化编程

二，函数的语法

一般分成两种

系统提供的
- isNaN（）
- Number（）
- String（）
- parseInt（）
- parseFloat（）
自定义的

语法：

【定义】

function 函数名称（）{

代码段 - 希望能重复执行的代码段

}

【调用】 ------ 让函数中的代码段执行

函数名称（）
// 定义一个函数 做一个乘法表
function fn(num) {        
        // fu 【函数名称】   定义函数
    for(var a=1; a<=num; a++) {
        for(var b=1; b<=a; b++) {
            document.write(b + '*' + a + '=' + a*b + '&nbsp;');
        }
        document.write('<br>');
    }
 document.write('<br>');
}

// 调用函数
fn(9)
fn(4)
fn(13)

三，函数的本质

函数定义：相当于定义了一个变量，且不会自动在页面中显示
函数的定义其实就是内存中开辟了一个内存空间，空间名称叫函数名称，里面的值，就是函数这段代码
函数定义跟变量的定义是一样的，只是多了一种值的类型
输出函数名称会把函数里面的代码给输出
检测一个函数的类型 ------ function

四，赋值式函数

var hanshu=function fn（）{
    var a=1
    var b=2
    var c=a+b
    console.log(c);
}

console.log(hanshu);   // 输出：函数代码
console.log(typeof hanshu);    // 输出：function

注意：

一旦是赋值式的函数，函数代码中的函数名称就不能在使用了

Eg：

hanshu（） // 正常调用

fn（） // fn is not defined

A.匿名函数

一般把没有设置函数名称的函数代码叫做匿名函数

var hanshu =function() {
    var a=1
    var b=2
    var c=a+b
    console.log(c);
}

console.log(hanshu);        // 函数内容
console.log(typeof hanshu);        // function
hanshu()        // 3

匿名函数不能独立出现（因为多行，看起来不像一个整体） ------ 除非将整个匿名函数用小括号包起来

// 例如

    (function(){
        console.log(11);
    })

    var fn = function(){
        console.log('这是fn函数');
    }
    
// 控制台输出为 
ƒ (){
    console.log(11);
}

B.自调用函数

将匿名函数用小括号包起来，后面再加小括号,就相当于这个函数被调用了，为此这个函数只能被调用一次。

(function(){
    console.log('这是fn函数');
})()

// 输出 ：  这是fn函数

五，带参数的函数

定义一个函数，用来计算两个数的和
当函数代码中某些数据在多次调用时发生变化，就需要将这个数据当做是变量
最终是需要赋值的，这个变量需要放在定义函数时的小括号中
定义函数时的小括号，是在给函数中变量占位

function add(a, b) {  // a,b 为形参 ‘现在只是个空容器’
    var c = a + b
    console.log(c);
}

// 当调用函数时，给定义时的变量赋值
add(1, 2)
         // ‘这边调用函数中的 1,2 表示 实参  调用时会 将值赋值给形参’
add(3, 5)
add(5, 6)
注意：

没有实参给对应的形参赋值，形参默认就是undefined
函数一旦加上形参，就相当于隐形的，在函数内部定义了这个变量了，只是没赋值而已
当实参的数量超出形参时，超出的部分无效，
实参可以为任何值

六，带返回值的函数

思路：

将函数中的核心代码写好
用function将核心代码包裹
代码中哪些数据会发生变化，就把他制作成形参
判断调用函数后，需不需要得到结果，还是直接输出这个结果，如果要得到结果，需要将写下return
调用函数

function fn(a,b,c){
    var sum = a + b + C
    // 调用函数需要得到的结果需要在函数中使用return
    return sum      //  将sum返回


fn(1,2,3)
//  调用得到的这3个数和后，再去计算这个三个数的平均数

var avg  = fn(1,2,3) / 3
console.log(avg)

如果函数中写下 return后没有返回一个结果，那调用的时候会接收到一个undefined
function fn() {
    console.log(1);

    console.log(2);
}

var res = fn()
console.log(111, res);

当函数中的return后没有值，默认返回undefined

function fn() {
    for(var i=1; i<=5; i++) {
        console.log(i);
        if(i === 3) {
        }
    }
    console.log(666);
}
var res = fn()
console.log(res);