js 函数的概念,定义,调用,声明与赋值,预解析,参数,默认值,返回值

103 阅读4分钟
  1. 函数 前端的函数, 与数学的函数, 完全是两个概念 可以粗暴的理解为 一个盒子 当一段需要多次使用的复杂代码段, 我们可以把它放在(抽离)一个盒子中(就是函数) 在需要使用的地方去调用即可 如何拥有(使用)函数 函数分为 定义(创建)和调用 定义(创建): 必须要有, 没有的话, 无法调用 调用: 也必须要有, 没有的话, 定义就没有意义了

  2. 定义 语法: function () {} 1.赋值式定义 var fn = function () {} 声明式定义 function 函数名() {} 具体含义: function ---> 关键字 函数名(可以不写) ---> 不写的函数, 我们称之为匿名函数, 如果有 叫具名函数(函数) () ---> 书写参数的位置(暂时不讲) {} ---> 代码, 函数调用要执行的代码 2.调用 函数的定义分两种方式, 调用 只有 1 种 语法: 函数名() 3.声明式与赋值式的区别 区别: 1. 书写 2. 调用 赋值式定义, 不能再定义前 调用函数, 声明式可以 fn() fn1() // 正常调用 var fn = function () { console.log(1) } function fn1() { console.log(2) }

     fn()
     fn1()
    
  3. 变量提升 在 浏览器读 JS 代码的时候 有一个 预解析, 此时会有一个变量提升 什么是变量提升 在预解析时, 将 JS 内部的 变量 全部提升到 当前作用域顶端(当前代码的最上边) 变量提升的时候, 值不会到最顶端, 可以理解为, 把声明变量提升到最顶端, 但是没赋值 什么是 变量提升 自己写的代码: fn() var fn = function () { console.log(1) } fn()

         浏览器预解析
             fn()                        ---> 不需要变量提升
             var fn = function () {      ---> 需要变量提升
                 console.log(1)
             }
             fn()                        ---> 不需要变量提升
    
         变量提升后
             var fn;         ---> fn == undefined
    
             fn()            ---> undefined()
             fn = function () {console.log(1)}
             fn()            ---> 打印1
    

    浏览器在预解析的时候, 除了会做 变量提升 还会做一件事; 函数的声明提升(值也跟着上去了) 自己写的代码 fn() function fn() { console.log(1) } fn()

         浏览器预解析
         fn()                ---> 不需要提升
         function fn() {     ---> 需要 函数声明提升
             console.log(1)
         }
         fn()                ---> 不需要提升
    
         函数声明提升后
         function fn() {
             console.log(1)
         }
    
         fn()            ---> 正常打印
         fn()            ---> 正常打印  
    
  4. 函数的参数 为什么要有 参数? 如果 没有 参数, 那么函数的功能 相对单一, 不够灵活 函数的参数 他的 作用 ---> 能够让函数的功能更加灵活, 更方便在多个地方调用 参数也可以让我们的函数更具有 差异性 参数语法 1. 形参 ---> function或者函数名后的 小括号 2. 实参 ---> 函数调用时的 小括号中 参数的作用 1. 形参 每书写一个形参, 就相当于在函数内部创建一个变量, 形参的值 是由 实参传递进来的 2. 实参 按照书写顺序 一一对应, 传递给形参

  5. 函数参数的数量 参数数量不一致 1. 形参少, 实参多 2. 实参少, 形参多 1. 形参少, 实参多 function fn(a) { console.log(a) } fn(1, 2, 3)

      1. 形参少, 实参多
         我们当前案例, 传递 1个形参, 3个实参
         第一个实参, 传递给 对应的形参
         后续的所有参数, 都不能通过形参获取
      2. 实参少, 形参多
         我们当前案例, 传递 3个形参, 1个实参
         第一个实参, 传递给对应的形参
         后续没有实参
         所以, 后续的形参相当于 之声明不赋值 ===> undefined  
    
  6. 函数参数的默认值 函数参数的默认值 创建形参的时候, 直接赋值 如果传递对应实参, 按照实参的值 如果没有传递对应实参, 按照默认值 function fn(a, b, c){ console.log(a, b, c) } fn(200)

         function fn1(a, b = 100, c = 200){
             console.log(a, b, c)
         }
         fn1(50)
         fn1(50,100)
         fn1(50,100,200)
    
  7. 函数的返回值 函数的返回值 每一个函数都有返回值, 不管是否写了返回值 每个函数 默认都会有返回值 ---> 默认返回 undefined 如果我们自己手写了 返回值, 那么就不会返回默认值了, 返回的是 我们书写的 函数返回值书写语法 return 要返回的内容 注意点: 函数的返回值具有中断函数的功能, 所以我们手写返回值需要放在最后 var num = prompt('请输入一个值') function fn() { console.log(1) } var myFn = fn() // fn 函数的返回值, 会赋值给 变量 myFn console.log(myFn) // ---> undefined

     function fn1() {
         return '我是 fn1 的返回值'
     }
     var myFn1 = fn1()
     console.log(myFn1)  // 我是 fn1 的返回值
    
     function fn() {
         console.log(1)
         console.log(2)
         console.log(3)
    
         return 500
     }
    
     fn()
    
     function fn(a) {
         规定, 函数不能接受数字。
         if (typeof (a) == 'number') {
             console.log('哈哈哈')
             return
         }
         if (typeof (a) == 'number') return
         console.log('参数 a 不是数字类型的, 所以会执行到我这个位置')
         }
         fn('100')