JavaScript学习：函数

问题导向

函数的基本使用？

如果你都有了答案，可以忽略本文章，或去JS学习地图寻找更多答案

---

function函数

在JS中，函数是一种特殊的数据类型，它让JS动了起来，有了能力，它可以是一个方法，或者是一个功能，提供某种能力
它常用来 封装 一些方法，供应用重复调用

函数特点

• 具有特定功能/作用的
• 能够重复调用的
• 闭合状态的代码块
• 能够兼容代码变化的

---

参数

形参：函数声明时填的参数
实参：函数调用时填的参数

例子：使用function关键字声明一个函数

function sayHi(name, age){
      //声明（）里的是形参
    console.log(`你好，我是${
     name}，我今年${
     age}岁了`)
}
sayHi('小李', 18)  //调用（）里的是实参
输出：你好，我是小李，我今年18岁了

---

封装

两个概念：公共与私有
抽离公共逻辑，传递私有参数
怎么封装：取决于想怎么调用

如上面的例子：两个人都有打招呼的方法，打招呼的语句是共有的，名字和年龄是私有的

function sayHi(name,age){
   
    console.log(`你好，我是${
     name}，我今年${
     age}岁了`)
}
sayHi('小李', 18)  你好，我是小李，我今年18岁了
sayHi('小陈', 19)  你好，我是小陈，我今年19岁了

只要调用函数，输入需要的参数即可，可根据实际业务封装想要的方法

---

函数深入

函数的几种写法

函数声明
function fn(x, y){
   
   console.log(x + y)
}
fn(5,3) //8
​

函数表达式(表达式就是 什么 = 什么)
let fn = function(x, y){
   
   console.log(x + y)
}
fn(4,3) //7


箭头函数：ES6写法
const fn = () => {
    console.log('hello js') }
fn()
​

匿名函数
window.onload = function(){
   
   console.log('匿名函数')
}
​

立即执行函数，自调用
(function(x, y){
   
   console.log(x + y)
})(6,7)

---

函数提升hoisting

预解析：代码执行时，JS会预先解析代码，再一行一行执行(过两遍)

函数提升：先调用，再声明，函数声明可以提升，函数表达式不可以提升

正常执行：代码是1行1行往下执行的，执行在前，声明在后，任可正常执行，说明函数的声明被提前解析了
fn() 
function fn(){
   
   console.log('函数提升')
}

报错
fn()
const fn = function(){
   
	console.log('hello')
}

---

函数的书写结构

有参数，有返回值
注意：没传实参是undefined，少写实参是NaN
因为undefined + 数字 = NaN（not a number）

function fn(a, b){
   
   return a + b
}
const result = fn(2,5)  //将结果返回，赋值给result
console.log(result) //7


有参数，无返回值
function fn(a, b){
   
   console.log(a + b)
}
fn(3, 4) //7

​
无参数，有返回值
注意：实参无效，能得到结果
function fn(){
   
   console.log(1 + 2)
}
fn(3,4) //3

---

return返回值

将值或函数返回给函数，单独成行，后面的代码不再执行

直接返回，fn存了a + b的结果，调用fn就可以得到它
function fn(a,b){
   
   return a + b
   console.log('这句不再执行')
}
console.log(fn(2,5)) //7
​

返回变量
function fn(a, b) {
   
    let num = a + b
    return num
}
console.log(fn(2, 5))
​

返回函数
function fn(a, b){
   
   return function(){
   
       return a + b
  }
}
let result = fn(2,3)  //fn现在存的是一个return的匿名函数，需要再次调用result才能得到结果
console.log(result()) //5

---

一等公民

函数不仅可以声明与调用，还可以像简单值一样，赋值，传参，返回

1.函数可以像普通值一样，作为属性的值
var obj = {
   
    'eat': function () {
   
        console.log('吃东西')
    }
};
obj.eat() //吃东西



2.函数可以像普通值一样，赋值给变量