重学前端之（4）函数、做用域、预解析

函数

为何要有函数?

在写代码的时候，有一些经常使用的代码须要书写屡次，若是直接复制粘贴的话，会形成大量的冗余代码。

若是修改呢?? 多个页面呢??

函数能够封装一段重复的JavaScript代码，它只须要声明一次，就能够被屡次调用。

重复代码、冗余代码的缺点：

1. 代码重复，可阅读性差
2. 不易维护，若是代码逻辑改变了，全部地方的代码都要跟着改变，效率过低。

• 使用场景 : 只要js出现的地方都有函数

  ​

函数的声明与调用

就至关于以前数组的建立和使用

声明函数的语法 :

function 函数名() {
    // 函数体
}
复制代码

调用函数的语法 :

函数名
函数名()
复制代码

特色:

1. 函数声明的时候,函数体并不会执行,函数体只有在调用的时候,才会执行;
2. 能够调用屡次;
复制代码

代码示例 :

// 声明函数
function sayHi() {
    console.log('why');
}

// 调用函数
sayHi();
复制代码

---

函数的参数

​ function getSum() {

​ var a = 10;

​ var b = 20;

​ console.log(a+b);

}

​ // 打印的是 10+20

​ getSum();

​ // 想打印 20+30? 怎么办????

​ getSum();

• 形参 ( 形式参数 ) : 在函数声明时, 设置的参数。做用是占位置 。只能在函数内部使用.
• 实参 ( 实际参数 ) : 在函数调用时,传入的参数。 做用 : 函数调用时,会把实参的值赋值给形参, 这样形参就有了值, 在函数体里,,,能够直接使用形参!

语法 :

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

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

如何肯定形参：

在声明函数的时候，碰到不肯定的值的时候，就能够定义成形参。
复制代码

---

注意：

• 形参在声明时，值不固定，只有在调用的时候，形参的值才肯定，形参的值会跟着函数调用时的实参不同而不同。
• 如何肯定形参：在声明函数的时候，碰到不肯定的值的时候，就能够定义成形参。

函数的返回值

当函数执行完的时候，咱们指望函数给我一些反馈（好比计算的结果），这个时候可让函数返回一些东西。也就是返回值。函数经过return返回一个返回值

返回值语法：

//声明一个带返回值的函数
function 函数名(形参1, 形参2, 形参...){
  //函数体
  return 返回值;
}

//能够经过变量来接收这个返回值
var 变量 = 函数名(实参1, 实参2, 实参3);
复制代码

函数返回值注意事项：

• return后面的语句不执行。
• 函数能够没有返回值，函数若是没有return，那么返回结果是undefined。
• 函数的参数能够有多个，可是返回值只能有1个。

---

函数三要素

函数三要素包括：函数名、参数、返回值

注意 : 参数和返回值能够没有,,,可是函数名必定要有;

---

`

函数内部能够调用函数-1

在函数内部是能够继续调用别的函数的。

function chiFan() {

      console.log('开始吃饭');
      console.log('吃完了');
    }
    function qiaoDaiMa() {

      console.log('开始敲代码');
      chiFan()
      console.log('代码敲完了');
    }
    qiaoDaiMa()
复制代码

函数内部能够调用函数-2

递归函数

递归函数：本身直接或者间接调用本身的函数;

注意 : 递归函数必定要留有出口，否则就是死循环了

---

练习:

// 1. 求1-100全部数的和 (使用递归)
 2. 斐波那契数列，有我的想知道，一年以内一对兔子能繁殖多少对？因而就筑了一道围墙把一对兔子关在里面。已知一对兔子每月能够生一对小兔子，而一对兔子从出生后第3个月起每个月生一对小兔子。假如一年内没有发生死亡现象，那么，一对兔子一年内（12个月）能繁殖成多少对？
  //兔子的规律为数列，1，1，2，3，5，8，13，21 ,34 , 55, 89, 144
复制代码

场景 : 少用,,性能也不太好! 100个月

函数也是一种类型

声明函数的两种方式

方式1 : 函数声明：

function 函数名(){
  //函数体
}
复制代码

方式2 : 函数表达式 ( 匿名函数 )

var 函数名 = function(){
  //函数体
}
复制代码

函数能够做为参数

一般，咱们把做为参数传递的函数叫作回调函数

function fn1(fn) {
  fn();
}
fn1(function(){
   console.log("哈哈"); 
});
复制代码

函数能够做为返回值

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

做用域

做用域：变量起做用的区域

全局做用域 ：在script标签内，函数外的区域就是全局做用域，在全局做用内声明的变量叫作全局变量 。全局变量能够在任意地方访问。

函数做用域 ：在 函数内的区域 叫作函数做用域，在函数做用域内声明的变量叫作局部变量 ，局部变量只有在当前函数内才能访问到。

全局变量：在函数外，script标签内声明的变量就是全局变量，全局变量在任何地方都能访问的到。

局部变量：在函数中声明的变量，就是局部变量，局部变量只有在当前函数体内可以访问。

隐式全局变量：没有使用var定义的变量也是全局变量，叫作隐式全局变量。(不要使用)

总结 :

// 全局做用域 : script标签内, 函数外 
// 全局变量 => 任何地方均可以访问
// 函数做用域 : 函数内部 
// 局部变量 => `当前函数`内部

// 除了两个经常使用的变量还有 隐式全局变量 : 任何地方都能访问(前提是已经好) (避免使用)(先执行函数)
复制代码

// 查看哪些是全局、局部、隐式全局
// 计算
 var num = 11;

function fn() {
    var num1 = 12;
    num2 = 22;
    console.log(num);
    console.log(num1);
}
fn();
console.log(num);
// console.log(num1);
console.log(num2);
复制代码

变量的查找规则：

• 函数内部可使用函数外部的变量 (见上例)

• 有局部变量就用局部变量，没有局部变量就用全局变量。 (见下例)

---

demo :

var num = 11;
function fn() {
  var num = 22;
  console.log(num);//22
}
fn();
console.log(num);//11
复制代码

demo :

//1. 
 var num = 11; //全局
   function fn() {
     num = 44; //全局
     console.log(num);
   }
   fn();
   console.log(num);
   // 总结 : 函数内部能够访问函数外部的变量 ,反之不能够

//2.
   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);

//3.
  var num1 = 11; //全局
  function fn() {
    var num1 = 22; //局部
    num1 = 33; //局部
    num2 = 44; //隐式全局
    console.log(num1); 
    console.log(num2);
  }
  fn();
  console.log(num1);
  console.log(num2);
复制代码

预解析

​ console.log(num4);

​ // var num4 = '123';

js执行代码分为两个过程：

• 预解析过程（变量与函数提高）
• 代码一行一行执行

预解析过程：分别举例

// 预解析过程
// 1. 把var声明的变量提高到当前做用域最前面,不会提高赋值 
// 2. 把函数声明 提高到当前做用域的最前面,,
// 3. 若是函数同名 ??? 后者会覆盖前者 
// 4. 若是 var声明的 和 函数声明的同名 , 函数优先
复制代码

面试题：

//1. 
var num = 10;
fn1();
function fn1() {
  console.log(num);
  var num = 20;
}

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

//3.
fn3();
console.log(c);
console.log(b);
console.log(a);
function fn3() {
  var a = b = c = 9;
  console.log(a);
  console.log(b);
  console.log(c);
}

//4. 思考题
var a = 4;
    console.log(a);
    a = 6;
    console.log(a);
    function a() {
      console.log('哈');
    }

    a();

    a = 10;
    console.log(a);

复制代码

匿名函数与自执行函数

匿名函数

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

匿名函数如何使用：

1. 将匿名函数赋值给一个变量，这样就能够经过变量进行调用
2. 自执行（匿名函数自执行）
复制代码

匿名函数自执行的做用：防止全局变量污染。

// 自执行
(function fn(){
  console.log("我能够本身执行哦");
})();

//张三的代码
  ;(function(){
    var num = 11;
    function fn() {
      console.log("呵呵")
    }
    fn();
    console.log(num);
  })();
//李四的代码

注意: 分号
复制代码

// 注意点 : 代码规范

var a = 10
    var b = 20
    b = a
    (function () {

      console.log(b);

    })();
复制代码