web函数

• 声明

  • 普通声明

    声明：function 函数名(){  代码块 }
    调用：函数名()

  • 表达式声明

    声明：var 变量 = function (){ 代码块 }
    调用：变量名（）

• 参数

  • 使用场景：当函数中出现不确定的值

  • 名词：

    • 形式(形式参数)：function 函数名(a,b) a -- 形参

    • 实参(实际参数)：函数名(10,20) 调用的时候实参给形参赋值，一一对应赋值

  • 参数个数

    • 1个参数：直接定义

    • 多个参数：多个参数之间用逗号隔开

    • 个数不确定：arguments实参集合，函数内置对象

      ==注意：实参个数比形参个数少,一一对应赋值，如果没有被赋值的形式默认是undefined，实参个数比形参多，多的不要==

      function fun(a,b){
          console.log(a+b);
      }
      fun(10); //NaN

      ==注意：重名会覆盖（变量名、函数）==

      function fun(){
          console.log("哈哈");
      }
      var fun = 10;
      fun();  //报错 fun is not a function

2 . 作用域

• 概念：变量或函数的有效使用范围

• 分类：局部作用域、全局作用域

• 名词

  • 全局变量/函数：在函数外声明的变量/函数，可以在任意地方被访问和修改，一直存储在内存中，直到页面关闭

  • 局部变量/函数：在函数内部声明的变量/函数，只能在函数里面使用，出了函数括号就会被销毁

2.1 全局变量

• 全局变量/函数：在函数外声明的变量/函数，可以在任意地方被访问和修改，一直存储在内存中，直到页面关闭

  //1.全局变量:可以在任意地方被访问和修改
  var a = 10;
  a = 20;
  console.log(a);
  ​
  function fun1(){
      console.log(a); //20
      a = 100;
  }
  fun1();
  console.log(a); // 100

2.2 局部变量

• 局部变量/函数：在函数内部声明的变量/函数，只能在函数里面使用，出了函数括号就会被销毁

  ​

2.3 作用域链

• JS中的一种查找机制，先找自身作用域范围内，依次往父级作用域查找，一直到全局(window),找不到 is not defined

  //2.局部变量：只能在函数内部使用，出了函数括号就会被销毁
  function fun2(){
      var c = 10;
      console.log(c); //10
  }
  fun2(); 
  // console.log(c); // c is not defined

• 练习题

  //练习题1：
  var a = 10; //全局变量，在任意地方可以被访问和修改
  function fun(){
      var b = 20; //局部变量，只能在函数内使用和修改
      console.log(a,b); //10,20  
      a = 30;//修改值  30
      b = 40;//修改值  40
      c = 50;//全局变量
  }
  fun();
  console.log(c);//50
  console.log(a);//30
  // console.log(b);//b is not defined
  ​
  ​
  //练习题2：
  var x = 0;
  var y = 10;
  function fun2(){
      var x = 20;
      console.log(x,y);//20,10
      x = 30;//修改局部变量x
  }
  fun2();
  console.log(x,y);//0 10 
  ​
  //练习3：
  var n = 10;
  var m = 100;
  function fun3(){
      var m = 20;
      console.log(n,m);//10,20
      n = 40;
  }
  fun3();
  console.log(n,m);//40,100
  ​

3.预解析(变量提升)

• 分析

  //通过以下代码得出，代码并不是单纯的从上往下执行
  console.log(a); //undefined
  var a = 10;
  console.log(a); //10
  ​
  sum(); //hahaha
  function sum(){
      console.log("hahaha");
  }
  sum(); //hahaha

  ==通过以下代码得出，代码并不是单纯的从上往下执行==

• 预解析(变量提升)

  浏览器在解析js的时候，其中至少两步：

  1.预解析(变量提升)

  a.找var关键字，提前声明变量(只看等号左边)，如果变量重名，只声明一次

  b.找function关键字，提前声明整个函数，如果函数重名会多次声明

  2.逐行执行

  //1.a.找var关键字，提前声明变量(只看等号左边)，如果变量重名，只声明一次
  console.log(a);//undefined
  var a = 10;  //a = 10  声明在预解析完成，执行的时候只走赋值
  console.log(a); //10
  ​
  ​
  //b.找function关键字，提前声明整个函数，如果函数重名会多次声明
  console.log(fun); //function fun(){console.log("函数1");}
  function fun() {
      console.log("函数1");
  }
  console.log(fun);

• 练习

  //3.练习1
  console.log(f1);//function f1(){console.log("函数2")}
  function f1(){
      console.log("函数1");
  }
  console.log(f1);//function f1(){console.log("函数2")}
  function f1(){
      console.log("函数2");
  }
  console.log(f1);//function f1(){console.log("函数2")}
  ​
  ​
  //4.练习2：
  console.log(c);//function c(){console.log("函数2");}
  var c = 10;
  function c(){
      console.log("函数1");
  }
  console.log(c); //10
  var c = 20;
  function c(){
      console.log("函数2");
  }
  console.log(c); //20
  ​
  var c = 30;
  console.log(c); //30
  ​