JavaScript入门 函数介绍/函数参数/return/函数类型/预解析Day04

函数介绍

---

• 作用：将任意功能的代码进行‘封装’
• 目的：复用代码，在需要的时候进行调用
• 语法：

  //声明定义函数
  function 函数名 (){
          封装代码
  }
  
  函数名()  //函数调用语句

  //函数执行流程
  console.log('函数定义开始')
  function fun(){  //定义一个名为fun的函数
      console.log('成功调用')   //函数体
  }
  fun()  //函数调用语句
  console.log('函数调用完成')

• 函数的封装  

  //封装 求两数的最大值的函数
  function getMax(){  //定义名为getMax的函数
      var m = 54
      var n = 67
      var max = m         //函数体 封装在最外层的{}内
      if (n > max){
          max = n
      }
      console.log('最大值是：'+max)
  }
  getMax()   //函数调用

函数参数 

---

• 形参：定义函数时在函数名括号中定义的变量称为形参
• 实参：使用函数调用语句，调用函数时，传入的实际参数值
• 语法：

  function 函数名(形参1,形参2){
      函数体
  }
  函数名(实参1，实参2)

  function fun(m){
      document.write('m:'+m)
  }
  fun(100)  //调用时将100传入m

参数个数 

形参多，实参少: 100传给m，n只是声明了这个变量，无值（默认为undefined）

实参多，形参少：一一对应，多余的实参没有作用

function fun(m , n){
    document.write('m:'+m)
}
fun(100)

函数作用:封装代码 

//封装 求两数的最大值的函数
function getMax(x , z){  //定义名为getMax的函数
    var m = x    //54
    var n = z    //67
    var max = m         //函数体 封装在最外层的{}内
    if (n > max){
        max = n
    }
    document.write('最大值是：'+max)
}
getMax(54 , 67)   //函数调用

函数返回值：return语句

---

中断函数：return

作用：和循环里的break相同，在函数体中，使用return终止函数体代码向下执行

function fun(m){
    document.write('m:'+m)
    return    //终止
    document.write('终止的内容')   //被终止
}
fun(100)  

返回值：return 值

function fun(f){
    document.write('f:')
    return 100    //返回值
}
var m = fun()    //定义 m 接收函数fun() 的返回值
document.write('m:'+m)

例：

//封装 求两数的最大值的函数
function getMax(x , z){  //定义名为getMax的函数
    var m = x    //54
    var n = z    //67
    var max = m         //函数体 封装在最外层的{}内
    if (n > max){
        max = n
    }
    return max
}
var m1 = getMax(54 , 67)   //函数调用 定义m1来接收return返回值
var m2 = getMax(34, 89)   //函数调用 定义m2来接收return返回值
document.write('m1:'+m1+'m2:'+m2)

函数类型

---

 无参无返回值

function fun(){
}

有参无返回值

function fun(m){
    //函数体
}

无参有返回值 

function fun(){
    return 100
}
var m = fun()

 有参有返回值

function fun(m){
    //函数体
    return m+100
}
var m = fun(200)

参数默认值 

function fun(m){
    m = m || 10    //没有实参，这里m默认值为10，逻辑或默认值为false，所以最后为10它就为10
    document.write('m'+m)
}
fun()  //无实参

预解析

---

• 浏览器JavaScript引擎解析执行JavaScript代码
• 执行JavaScript代码之前，扫描通读JS代码，如果发现声明式函数和var声明的变量，将其提前
• 声明式函数：function 函数名（）{}   预解析成功，var fun = 函数名（）预解析失败
• var声明的变量:  var fun
• 预解析同名情况：声明式函数优先提前 ,如果在最开头将函数赋值，则调用时会报错
• 注：不要出现函数和变量同名的情况
•  

 

var fun = 100 //给函数fun赋值成了变量  第二行fun()函数调用失效，报错 ：

代码：

 预解析为：

			console.log(num)   //undefined  f2与其同理
			var num = 10       
			f()
			console.log(f2)    //undefined

			function f() {
				console.log(n)   //undefined
				var n = 20
				console.log(n)  //20
			}
			console.log(num)  //10
            
			var f2 = function () {
				console.log('我是f2')
			}

            var data = 'abc'

			fun(data)

			console.log(data)    //abc

			function fun(data) {    //abcxyz
				data += 'xyz'
			}