JavaScript 函数

• 函数是什么
• 创建函数的方法
• 调用函数的方法
• 变量作用域
• 变量声明提升
• 函数也是数据
• 使用函数思想写程序的思路

函数是什么

• 函数是对象的一种形式
• 函数是一种特殊的数据类型
• 函数是语句的集合
• 函数是执行特定任务的代码块(代码块就是使用大括号包裹起来的语句的集合）。本质上函数是一种代码的分组形式。我们可以通过函数这种形式赋予某组代码一个名字，以便于之后调用。

示例：函数和函数调用

//函数声明
function sum(a,b){
   return a + b
}

//函数调用
sum(2,3) //5

特点1：函数只定义一次，可被调用任意次。

特点2：定义的函数永远不会执行，除非你调用它。

函数调用：

• 直接调用
• 事件调用
• 方法调用
• 作为参数调用
• 自调用

创建函数的方法

• 函数表达式
• 函数声明
  函数声明的语法：

function funtionName(parameter1, parameter2, parameter3) {
  // code to be executed
}

函数声明是创建函数的一种方法。函数声明的过程通常由以下几部分构成。

• function：关键词，用于声明函数。
• 函数名称：声明函数会创建一个变量，函数名称就是变量的名称，这是理解函数的关键。函数名称用于存放代码块。代码块相当于变量的值。
• 形参：形参就是变量，只是省略的声明变量的关键词var。它是小括号里用逗号分隔的参数。一个函数通常具有0个或多个形参。形参用于接收在函数调用时通过形参传入函数内的实参。
• 实参：调用函数写在函数名右边小括号里的叫实参（实际上的参数）
• 函数体 ：使用大括号包裹的代码块。函数体相当于函数名的值。
• return语句：如果你希望函数运行之后计算一个值，需要在函数内使用return语句显示设置返回值。return语句不是必须设置的，如果你没有在函数体内设置return语句，那么函数默认的返回值是undefiend。注意：一个函数只能有一个返回值，如果你需要返回多个值，可以考虑将多个值放入一个数组里，以数组元素的形式返回。

示例: 声明一个求平方的函数

function square(a){
  return a * a
}

示例:声明一个判断一个字符串是否是包含数字的函数

function square(a){
  return a * a
}

示例:声明一个判断一个值是否是奇数的函数

           const arr = [3,2,4,1,12,13]
            var arr1 = arr.filter(function(item){
                return item % 2
            })//返回3，1，13

示例: 声明一个1位数字前置补0的函数

调用函数的方法
当创建了一个函数之后，如果需要使用它，就必须要去调用它，调用函数的方法很简单，只需要在函数名后加一对小括号即可。小括号内传入实际的参数，如果有多个参数，请使用逗号分隔。

注意：函数不调用，就永远不会执行。
语法:

funtionName( 实参1,实参2,实参3,...,实参N )

**实参：** 是调用函数时，通过形参传入到函数内的实际的参数。所有的实参都是为了计算函数返回值而出现的。

示例： 调用square()函数

square(10) // 100

思考：形参数量和实参数量是否必须一致？答案是否定的。了解相关内容，请查阅“arguments'对象。作为函数的初学者，最好让形参与实参数量保持一致。

变量作用域

变量作用域指定义变量的区域。 变量在哪个区域定义,就在哪个区域发生作用。变量作用域决定了变量的可访问性。在当前定义区域内，变量可以被访问到，在这个区域以外，变量不能被访问到。

有两种类型的作用域：

• 全局作用域：局部作用域之外的区域就是全局作用域。
• 局部作用域：局部作用域指函数作用域和块级作用域。这两种局部作用域使用不同的关键词定义：
• 函数作用域：指在函数体内，使用关键词var定义的变量，会创建变量的函数作用域，也就是说变量只能在当前函数体内才可以访问。注：变量定义在if或for创建的代码块内，是不会创建函数作用域的。
• 块级作用域: 指在大括号包裹的区域内，使用关键词let或const定义的变量，会创建块级作用域，只能在大括号内才可以访问。

示例1: 函数作用域

function fn(){
  var a = 100
  console.log(a) // 100 (在函数体内可访问到变量的值)
}
console.log(a) // Uncaught ReferenceError: a is not defined(在函数体外访问不到变量的值）

示例2: let定义的变量存在块级作用域

{
  let a = 100
  console.log(a) // 100
}
console.log(a) // Uncaught ReferenceError: a is not defined

示例3: let定义的变量存在块级作用域(if语句)

if(true){
  let a = 100
  console.log(a) // 100
}
console.log(a) // Uncaught ReferenceError: a is not defined

示例4: let定义的变量存在块级作用域(for语句)

for (let i = 0; i < 3; i++) {
  console.log(i) // 0, 1, 2
}
console.log(i) // Uncaught ReferenceError: i is not defined

示例5: var定义的变量不存在块级作用域

{
  var a = 100
  console.log(a) // 100
}
console.log(a) // 100

示例6: var定义的变量不存在块级作用域

if(true){
  var a = 100
  console.log(a) // 100
}
console.log(a) // 100

示例7: var定义的变量不存在块级作用域

for (var i = 0; i < 3; i++) {
  console.log(i) // 0, 1, 2
}
console.log(i) // 3

示例8：变量提升

console.log(a) //nudfined
var a = 1

示例9：

console.log(a) //报错，a未定义
let a = 1

示例10:

{
  var a = 1
}
console.log(a) //1

示例11:

{
  let a = 1
}

console.log(a) // 报错，未定义

示例11：

var a = 1
function fn(){
  alert(a) //undefined
  var a = 2
}
fn()
alert(a) //1

示例12：

var a = 1
function fn(){
  alert(a) //1
  a = 2
}
fn()
alert(a) //2

示例13：

var a = 1
function fn(a){
  alert(a) //1
  a = 2
}
fn(a)
alert(a) //1

示例14:

var a = 1
function fn(a){
  alert(a) //undefined
  a = 2
}
fn()
alert(a) //1

示例15:

var str = ''
function fn(){
  var a = 'hello'
  str = a
}
fn()
alert(str) //hello

示例16:

function fn1(){
  var a = 'hello'
  fn2(a)
}
fn1()
function fn2(a){
  alert(a) //hello
}

示例17:

var a = 0
function fn1(){
  a++
}
function fn2(){
  a--
}
fn2()
fn1()
fn2()
alert(a) //-1

示例18:

alert(a)//undefined
if(true){
  var a = 1
}

示例19:

alert(fn)//function fn(){ alert(123)}
function fn(){
  alert(123)
}

示例20:

alert(fn()) //123
function fn(){
  alert(123)//undefined
}

示例21:

alert(fn)//undefined
if(true){
  var a = 1
  function fn(){
    alert(123)//123
   }
}

示例22:

alert(fn) //function fn(a) {alert(a)// }
var a = 1
function fn(a){
  alert(a)//
}

示例23：

alert(fn()) //undefined
var a = 1
function fn(a){
  alert(a)//undefined
}

示例24：

foo(); // 报错Uncaught TypeError: foo is not a function
var a = true;

if (a) {
  function foo() { console.log("a"); }
}
else {
  function foo() { console.log("b"); }
}

变量声明提升

变量声明提升是关于函数作用域的一个重要问题。先看一个的例子:

//请问console.log()第一次输出的是什么？
 var n = 123
        function fn() {
            console.log(n) //undefined
            var n = 456
            console.log(n)//456
        }
        fn()

您可能会想当然第认为第一次console.log()输出的是123，也就是全局变量n的值。但事实并非如此，第一个console.log()实际上输出的是undefined。因为在函数体内：变量n也有定义，故局部变量n会覆盖全局变量n。尽管在函数体内，第一次调用局部变量n的时候，n还没有定义，但n实际上已经存在于本地空间(函数体内)了，这种特殊现象叫做提升(hoisting) 。

提升(hoisting) ：指当JS执行过程进入新函数时，新函数内的的所有变量声明(如var n)都会被提升到当前作用域的顶部。

示例：模拟变量声明提升

/**********************
var n  //变量声明被提升至顶部
*********************/
console.log(n) //undefined(在这里可以读取到n的原因就在于变量声明提升)
var n = 123

示例：模拟变量声明提升

/**********************
var n  //变量声明被提升至顶部
*********************/
console.log(n) // undefined(在这里可以读取到n的原因就在于变量声明提升)
var n = 123
function fn(){
    /*****变量声明被提升至顶部******
    var n  
    *************************/
    console.log(n) //undefined(在这里可以读取到n的原因就在于变量声明提升)
    var n = 456
    console.log(n)
}
fn()

示例: 模拟函数提升

/********整个函数被提升到顶部**********
function fn(){
  console.log('hello world')
}           
*******************************/
fn() // 'hello world' (在这里可以读取到fn()的原因就在于函数提升)
function fn(){
  console.log('hello world')
}

函数声明也会创建变量，所以函数声明也会发生变量提升，与变量声明提升不同的是，整个函数，包括函数声明与函数体都会被提升至当前作用域顶部。
函数也是数据

在JavaScript中，函数实际上也是一种数据。这种特殊的数据类型由两个重要特性：

• 它们包含的是语句
• 它们是可执行的

既然函数是一种数据类型。也就是说，我们可以把一个函数赋值给一个变量。

这是创建函数的第二种方法叫做：函数表达式。创建函数表达式的语法是：

函数定义表达式

var myFunction = function name([param[, param[, ... param]]]) { statements }

示例:

//定义函数
var fn = function(a,b){
  return a + b
}
//调用函数
fn(2,3) //5

注：函数表达式和函数声明其实是不同的，两者的差别表现在它们所在的上下文。函数声明只会出现在程序代码里。

使用函数思想写程序的思路：

• HTML结构：请务必一致
• 实现1个核心程序
• 传参