2020-03-31 JavaScript[4]（十八）

函数

• 函数的定义：一堆特定代码的集合体，他负责完成某项特定的任务，而相较于其他代码，具备相对的独立性，一般会有参数和返回值，提供对过程的封装和细节的隐藏
• 函数就是一个功能，具备复用性

声明函数和使用函数

// 声明函数
function 函数名 (){
    // 函数体
}

// 调用函数
函数名();

特点：

• 函数默认不会执行，必须通过函数名()调用才会执行
• 函数的命名尽量遵守：动词或动词+名词的方式 ，这样的函数的作用一目了然
• 函数一次声明可以多次调用，每一次函数调用函数体都会重新执行一次

function greet(){
    console.log(Hi);
}

sayHi();

函数传参

• 函数的参数极大的提高了函数的灵活性
• 在声明函数的小括号里面写的数值我们称之为形式参数，形式参数的作用就是声明了变量，参数与参数之间用逗号隔开
• 在调用函数的小括号里面写的数值我们称之为实际参数，实际参数的作用就是给形式参数赋值，参数与参数之间用逗号隔开

• 形参：声明变量

• 实参：给变量赋值

//带参数的函数声明
function 函数名(形参1, 形参2, 形参...){
  //函数体
}

//带参数的函数调用
函数名(实参1, 实参2, 实参3);

函数的返回值

• 通俗来讲就是这个函数调用后自身的结果（函数调用之后的值），默认是undefined
• 函数的返回值是不必要的，一般用于函数执行完毕之后产生一个结果，这个结果在其他地方需要使用的时候就可以调用
• 如果当前函数没有返回值，浏览器会默认返回一个undefined

 function doSomething(){
        // doing
        return result;
    }

    var jieguo = doSomething();

• 函数三要素：函数名，参数，返回值

函数的高级知识

函数内部可以调用其他函数

function fn1() {
    console.log("fn1开始...");
    fn2();
    console.log("fn1结束...");
}

function fn2 () {
    console.log("执行fn2的代码");
    console.log("执行fn2的代码");
    console.log("执行fn2的代码");
}

//在函数1中调用了函数2
fn1();

断点调试

• F8：跳到下一个断点，如果后面没有断点，那么代码直接执行结束
• F10：单步调试（跳过函数调用）
• F11：单步调试（进入函数调用）
• shift+F11：跳出函数调用

函数细节补充

• 两个相同的函数后面的会覆盖前面的函数
• 在JavaScript中，实参的个数和形参的个数可以不一致
  (1)如果实参过多，那么多余的实参会被忽略
  (2)如果形参过多，会自动填补undefined
• 函数碰到return就不会再往下执行了，函数的结束用return（循环的结束用break）
• return; 的写法相当于return undefined;

作用域

• 作用域：变量起作用的区域
• 全局作用域:再script标签内，再函数外的区域，再全局作用域内声明的变量是全局变量，全局变量再任何地方都可以访问到
• 局部作用域：在函数内部的区域，在函数内部声明的变量是局部变量，局部变量只能在当前的函数内部访问才有效
• 当全局变量和局部变量同名时，会优先使用局部变量

var num1 = 11;
var num2 = 22;
function fn() {
    var num1 = 33;
    num1 = 44;
    num2 = 55;
    console.log(num1);
    console.log(num2);
}

fn();

console.log(num1);
console.log(num2);

预解析

• JS在真正执行前，JS解析器会将JS代码先解析：将变量和函数的声明提前（不包括函数的赋值）
• 如果遇到同名的函数和变量，函数优先（权重高）

var a = 18;
fn2();
function fn2() {
    var b = 9;
    console.log(a);
    console.log(b);
}

匿名函数

• 匿名函数：没有名字的函数

function(){

}

问题：函数没有名字，没有办法直接使用

解决：

通过将匿名函数赋值交给一个变量，我们将这个称为函数表达式（函数表达式值会预解析前面的var，后面的值不解析）

 function a (){}  // 函数声明
    var a = function () {
       console.log(1)
     } // 函数表达式
     a();

函数自执行：

函数的自执行不是为了复用性，而是为了避免全局变量的污染

//(function(){  })(); 
 (function () {
      console.log(1)
    })();

函数也是一种类型

声明函数的两种方式

1.函数声明

function 函数名(){
  //函数体
}

2.函数表达式（匿名函数）

var 函数名 = function(){
  //函数体
}

函数可以作为参数

我们把作为参数传递的函数叫做回调函数

function fn1(fn) {
  fn();
}
fn1(function(){
   console.log("哈哈");
});

函数可以作为返回值

后期闭包中将会使用

function fn1() {
    return function(){
      console.log("呵呵");
    }
}
fn1()();//调用