JS基础之函数的一些相关资料

求解决bug的99种方法
894 阅读10分钟

[toc]

函数

function:是被设计为执行特定任务的代码块

解释：把一些相同或相似逻辑的代码块重复包裹起来，通过函数调用这些代码逻辑，有利于精简化代码方便使用。

作用：可以 实现代码复用，提高开发效率

函数的声明语法：

function 函数名（）{
函数体
}

函数的命名：

  • 函数的命名规范
和变量命名基本差不多
尽量小驼峰命名法
前缀为动词
命名：常用动词约定
function getName(){}
动词：   
can 是否执行某个动作
has 是否含某个值
is 是否为某个值
get 获取某个值
set 设置某个值
load 加载某些数据

image-20220330222515561

函数的调用语法：

//函数调用 这些函数内的代码逻辑才会 执行
函数名（）
注意：声明（定义）的函数必须调用才会真正被执行，使用 () 调用函数

//函数一次声明可以多次调用，每调用一次函数，里面的代码会重新执行一次
sayHi()
sayHi()
我们曾经使用的 alert() , parseInt() 这种名字后面跟小括号的本质都是函数的调用

函数的封装：

  • 函数体：需要封装的代码写在函数中，称为：“函数体”，调用才执行
  • 函数不调用，自己不执行

函数体
函数体是函数的构成部分，它负责将相同或相似代码“包裹”起来，直到函数调用时函数体内的代码才会被执行。函数的功能代码都要写在函数体当中。
function sayHi(){
    console.log('爱不爱我')   //函数体
}
sayHi()

函数小结：

函数用function关键字来声明

特点：函数不调用，自己不执行。 调用方式：函数名（）

函数的复用代码和循环重复代码有什么不同？ 循环代码写完即执行，不能很方便控制执行位置 随时调用，随时执行，可重复调用

函数的传参：

为什么要传参：因为封装的代码，一旦固定值，就没有封装的意义。

若函数需要调用者传入数据，那么就需要传参

优点：可以提高灵活性

有参数的函数声明和调用

  • 声明语法：
function 函数名（参数列表）{
函数体
}
参数列表    ：传入数据列表   声明这个函数需要传入几个参数    多个数据用逗号隔开
单个参数：   function getSum(num){document.write(num*num)}
多个参数：   function getSum(num1，num2){document.write(num1*num2)}
  • 调用语法：
getSum(1)   //对应  num = 1
getSum(10,20)  //num=10,num1 = 20
调用函数时，需要传入几个数据就写几个，用逗号隔开

函数的形参和实参

形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）
实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）
形参可以理解为是在这个函数内声明的变量（比如 num1 = 10）实参可以理解为是给这个变量赋值
开发中尽量保持形参和实参个数一致
我们曾经使用过的 alert('打印'), parseInt('11'), Number('11') 本质上都是函数调用的传参
function getSum(num1,num2){     //函数里面 num1,num2为形参    实参没有传参过来，值为undefined
    console.log(num +num2)
}
getSum(10,20)    //调用者里面10,20为实参     最好是一一对应

小结：

函数传递参数的好处是？ 可以极大的提高了函数的灵活性 函数参数可以分为那两类？怎么判断他们是那种参数？ 函数可以分为形参和实参 函数声明时，小括号里面的是形参，形式上的参数 函数调用时，小括号里面的是实参，实际的参数 尽量保持形参和实参的个数一致 参数中间用什么符号隔开？ 逗号

案例-封装求和

需求：采取函数封装的形式：输入2个数，计算两者的和，打印到页面中 兑现承诺： 合理利用逻辑中断 形参如果不被赋值，就是undefined

function getSum(x,y){
    x = x ||0
    y = y ||0
    console.log(x+y)  //30
}
getSum(10,20)

函数的返回值

为什么要让函数有返回值？

函数是被设计为执行特定任务的代码块，执行完特定任务之后， 把任务的结果给我们。

缺点：把计算后的结果处理方式写死了，内部处理了 解决：把处理结果返回给调用者 有返回值函数的概念： 当调用某个函数，这个函数会返回一个结果出来 这就是有返回值的函数

其实我们前面已经接触了很多的函数具备返回值
let getName = prompt("输入名字")
只是这些函数是JS底层内置的.我们直接就可以使用
当然有些函数，则没有返回值
alert('我不需要返回值')
所以要根据需求，来设定需不需要返回值

用return返回数据

当函数需要返回数据出去时，用return关键字

语法：

return 数据
如何使用？
function getSun(num1,num2){
    return num1 +num2
}
let num = getSum(10,20)
console.log(num)   //30

细节： 在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用 函数内部只能运行到 1 次 return，并且 return 后面代码不会再被执行，所以 return 后面的数据不要换行写 return会立即结束当前函数 函数可以没有 return，这种情况函数默认返回值为 undefined

为什么要让函数有返回值? 函数执行后得到结果，结果是调用者想要拿到的（一句话，函数内部不需要输出结果，而是返回结果） 对执行结果的扩展性更高,可以让其他的程序使用这个结果 函数有返回值用那个关键字？ 有什么注意事项呢？ 语法：return 数据 return后面不接数据或者函数内不写return，函数的返回值是undefined return能立即结束当前函数, 所以 return 后面的数据不要换行写

作用域

作用域是什么?

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

全局作用域：作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件

局部作用域：作用于函数内的代码环境，就是局部作用域。 因为跟函数有关系，所以也称为函数作用域

块级作用域： 块作用域由 { } 包括,if语句和for语句里面的{ }等

image-20220330225910931

变量的作用域：

在JavaScript中，根据作用域的不同，变量可以分为：

全局变量：全局变量在变量定义之后区域可以访问和修改

局部变量：局部变量只能在当前函数内部访问和修改

块级变量：let定义的变量,只能在块作用域里访问,不能跨块访问,也不能跨函数访问

image-20220330230122765

变量作用域特殊情况：

  • 如果函数内部或者块级作用域内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐
  • 函数内部的形参可以看做是局部变量，所以形参相当于函数内部定义的局部变量，只有在函数内部可以使用

JS 中作用域分为哪三种？ 全局作用域。函数外部或者整个script 有效 局部作用域。也称为函数作用域，函数内部有效 块级作用域。 { } 内有效 根据作用域不同，变量分为哪三种？ 全局变量 局部变量 块级变量 有一种特殊情况是全局变量是那种？我们提倡吗？ 局部变量或者块级变量 没有let 声明直接赋值的当全局变量看，我们强烈不提倡 还有一种特殊情况，函数内部的形参可以当做局部变量看

变量的访问原则-作用域链

只要是代码，就至少有一个作用域 写在函数内部的局部作用域 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域 根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链

例如：

function f1() {
    let num = 123
    function f2() {
        console.log( num )   //123
    }
    f2()
}
let num = 456
f1()

let a = 1
function fn1() {
    let a = 2
    let b = '22'
    fn2()
    function fn2() {
        let a = 3
        fn3()
        function fn3() {
            let a = 4
            console.log(a) //a的值 4
            console.log(b) //b的值 "22"   就近原则
        }
    }
}
fn1()

变量访问原则是什么？ 作用域链：采取就近原则的方式来查找变量最终的值

image-20220331170259195

image-20220331170916792

循环式调用 function name3（）里面调用name1（） 死循环，会卡死

就近原则 ： 看函数的定义 来寻找

// 重点： 看函数在哪定义，而不是看调用

函数的定义：

函数的调用：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>19-作用域链的测试</title>
  </head>
  <body>
    <script>
        // 判断当前变量  输出是什么
        // 就近原则 判断是要根据 函数的定义 来判断  而不是函数的调用
        // 函数的定义  代码位置来判断 100
        // 函数的调用  判断  200  错误
      let num = 100;
      function name1(params) {
        let num = 200;
        // console.log('func1  ----->  ', "func1");
        name2();
      }
    //   函数的定义--声明
      function name2(params) {
        let num = 300;
        console.log('func2  ----->  ', num); //300
        // 如果注释掉 let num = 300
        //   输100
      }

      name1(); //func1  func2  func3
    //  重点： 看函数在哪定义，而不是看调用
    </script>
  </body>
</html>

image-20220331172948229

就近原则：看函数在 哪定义，而不是看在哪调用。

      let num = 100
        function name1(){
            let num = 200
            name2()
        }
        function name2(){
            let num = 300
            name3()
        }
      //函数的定义----声明
        function name3(){
         console.log('num  ----->  ', num); //100
        //  就近原则  看函数在 哪定义，而不是看在哪调用。
        }
        name1()

匿名函数

匿名函数分为：

匿名函数

声明：let fn = function （）{} 调用：fn()

image-20220330230812630

将匿名函数赋值给一个变量，并且通过变量名称进行调用 我们将这个称为函数表达式 语法：

let fn = function (){
    //函数体
}
调用：fn()   //函数名（）
其中函数的形参和实参使用跟具名函数一致
后期 web API 会使用：

立即执行函数 (自调用函数)

语法： 调用：（function(){}()） (function(){})()

注意： 多个立即执行函数要用 ; 隔开，要不然会报错

场景介绍: 避免全局变量之间的污染

image-20220330231350766

立即执行函数有什么作用？ 防止变量污染 立即执行函数需要调用吗？ 有什么注意事项呢？ 无需调用，立即执行，其实本质已经调用了 多个立即执行函数之间用分号隔开

已知


function fn(a,b){  //注意;实参个数不够的话，等于 let b 未赋值 为undefined
    console.log(a)
    console.log(b)
    return a
    console.log(b)
}
console.log(fn(10))  //10 undefined

image-20220331202556120

关于函数的描述：

函数通过return 来返回值

函数通过function 关键字来声明

函数的形参 顺序和实参顺序是对应的

函数的形参如果对应不上实参的值，默认是undefined

函数的内部代码如果一句，省略花括号（错误）

函数也是一种数据类型

退出函数不再执行函数内后面的代码 return

函数没有return 默认返回值为 undefined

函数有return 返回值也可能undefined

function f1(){
    console.lgo(a)
}
let a = 10  //执行后没有任何反应，函数不调用，自己不执行 

输出最大值
function getMax(a,b,c){
let max = a>b?a:b;
    if(c>max){
        max = c;
    }
    alert(max);
}
getMax(8,2,5)   //8

function f1(){
    let num = 123
    function f2(){
        console.lgo(num)
    }
    f2()
}
let num = 456
f1()
avatar
文章
阅读
粉丝