函数

1.函数介绍

1.函数

①function(执行特定任务的代码块 )

2.说明

① 精简代码方便复用。

②可以实现代码复用，提高开发效率

2.函数运用

1.函数声明语法

function 函数名(){
    函数体
}

2.函数命名规范

①和变量命名基本一致

②尽量小驼峰式命名法

③前缀应该为动词

④命名建议：常用动词约定

3.语法:

function getName(){}
function addSquares(){}

4.动词

①can (判断是否可执行某个动作)

②has (判断是否含义某个值)

③is (判断是否为某个值)

④get (获取某个值)

⑤set (设置某个值)

⑥load (加载某些数据)

5.案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 函数的声明
        function sayHi() {
            console.log('你好');
            console.log('你最好');
            console.log('你真棒');
        }

        // 函数调用
        sayHi();
        sayHi();
    </script>
</body>
</html>

6.总结

1.函数不调用会执行吗？如何调用函数？

①函数不调用自己不执行

②调用方式: 函数名()

2.函数的复用代码和循环重复代码有什么不同？

①循环代码写完即执行，不能很方便控制执行位置

② 随时调用，随时执行，可重复调用

3.形参和实参

1.形参

①声明函数时写在函数名右边小括号里的叫形参（形式上的参数）

②形参可以理解为是在这个函数内声明的变量（比如 num1 = 10）实参可以理解为是给这个变量赋值

③开发中尽量保持形参和实参个数一致

④我们曾经使用过的 alert('打印'), parseInt('11'), Number('11') 本质上都是函数调用的传参

2.实参

①调用函数时写在函数名右边小括号里的叫实参（实际上的参数）

3.语法

function getSun(num1,num2){    //num1 num2形参 
    document.write(num1 + num2)
}
getSun(1o,20)     //10,20实参

4.案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>09-函数和参数.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      // // 函数的声明
      // function sayHi(a) {
      //   a = '大家好';
      //   // a="海贼王";
      //   // a 用来代表这 外部会传入尽量的 一个数据 而已  别名  这个家伙
      //   console.log(a);
      // }
      // // 函数的调用 + 传参
      // // sayHi('你好');

      // sayHi('大家好');

      // let userName = '海贼王';
      // sayHi(userName);

      // 希望有一个函数 可以自动针对传入的 数组 来求和
      function calcSum(a) {
        // 默认a就是一个数组 =[1,2,3]  [4,5,6]
        let sum = 0;
        for (let index = 0; index < a.length; index++) {
          sum += a[index];
        }
        console.log(sum);
      }

      // 实参和形参有几个

      // 函数调用的时候，括号里面有几个数据 就是几个参数
      calcSum([1, 2, 3, 4]);
      calcSum([1, 33, 23, 43]);
    </script>
  </body>
</html>

5.总结

1.函数传递参数的好处是？

①②可以极大的提高了函数的灵活性

2.函数参数可以分为那两类？怎么判断他们是那种参数？

① 函数可以分为形参和实参

② 函数声明时，小括号里面的是形参，形式上的参数

③ 函数调用时，小括号里面的是实参，实际的参数

④尽量保持形参和实参的个数一致

3.参数中间用什么符号隔开？

①逗号

4.函数返回值

1.return(返回数据)

①当函数需要返回数据出去时，用return关键字

②函数执行后得到结果，结果是调用者想要拿到的（函数内部不需要输出结果，而是返回结果）

2.语法

function getSun(x,y){
    return x + y
}
let num = getSun(10,30)
document.write(num)

3.注意

①在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用

②函数内部只能出现 1 次 return，并且 return 后面代码不会再被执行，第一个return生效, 所以 return 后面的数据不要换行写

③ return会立即结束当前函数

④ 函数可以没有 return，这种情况函数默认返回值为 undefined

4.案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>14-函数的返回值.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      // function getMax() {}

      // function getSum() {}

      // // 这个num1 就是  函数getMax调用的返回值 （ num1 = 1 2 。。）

      // // let num2 = getSum();

      // let num1 = getMax();// 我们自己写的函数 只能返回 undefined
      // let num3 = parseInt(1.3);// js自己内部写的 返回值  1

      // console.log(num3); //

      function getMax() {
        // 100 就是 函数在执行完毕的时候 会返回的数据
        return 300;
      }

      let num1 = getMax(); // num1 =100

      console.log(num1);
    </script>
  </body>
</html>

5.作用域

1.作用域概述

①一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这

个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

2.全局作用域

①全局有效

②作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件

3.局部作用域

①局部有效

②作用于函数内的代码环境，就是局部作用域。因为跟函数有关系，所以也称为函数作用域。

4.块级作用域

①{} 内有效

②块作用域由 { } 包括 , if 语句和 for 语句里面的{ }等

6.变量作用域

1.全局变量

①函数外部let 的变量

2.局部变量

①函数内部let的变量

②局部变量只能在当前函数内部访问和修改

案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>20-局部变量.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      // 局部变量
      // 如果是在函数内部定义的变量 就叫做局部变量
      // 局部变量 不能在 它的大括号之外使用的，否则就会报错！！ 
      
      let msg = 10000; // 全局变量

      // 局部变量  函数内部 声明的变量
      function getMax() {
        // 声明一个数字
        let num = 200; // 局部变量
      }


      // 局部变量 不能在 超出它的大括号来使用
      console.log(num); // 会报错 
    </script>
  </body>
</html>

3.块级变量

①{} 内部的let变量

②let定义的变量,只能在块作用域里访问,不能跨块访问,也不能跨函数访问

案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>21-块级变量.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      // 块级变量 就是我们在块级作用域内 定义的变量
      // 块级变量 类似局部变量，也是超出了自身的大括号 不能使用

       for (let index = 0; index < 2; index++) {
      //   // num 块级变量 
        let num = 100;
      // }
      // console.log(num);// 使用块级变量  出错！！ 


       {
         let num =10;
       }
       {
        console.log(num);
      }

      /* 
      小结
      1 分类     分成两类即可  
      1 全局变量
        直接放在 script标签内的变量
      2 局部变量 用大括号包起来的变量
        1 函数内部变量
        2 块级变量 
      
       */
    </script>
  </body>
</html>

4.作用域特殊情况

1.如果函数内部或者块级作用域内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐

但是有一种情况，函数内部的形参可以看做是局部变量。

7.作用域链

1.作用域链

只是代码寻找变量的一种机制,规定 就近原则

①先找自己的作用域 num, (没找到)

②往外部(父级)的作用域来找 (没找到)

③继续往外部 (父级)来找

④直到找到全局作用域就停止下来

2.案例测试

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>27-作用域链-测试.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      // let num = 100;
      // function func1() {
      //   let num = 200;
      //   fun2();
      // }

      // function fun2() {
      //   let num = 300;
      //   console.log(num); // 300
      // }

      // func1();

      // 判断当前变量 输出是什么  
      // 就近原则   判断是要根据 函数的定义 来判断 而不是函数的调用 
      // 函数的定义 代码位置来判断  100  这个！！ 
   

      let num = 100;
      function func1() {
        let num = 200;
        // 函数的调用 
        fun2();
      }

   

      // 函数的定义-声明 
      function fun2() {
        console.log(num);
      }

      func1();
    </script>
  </body>
</html>

8. 匿名函数

1.具名函数

①声明：function fn() {}

②调用：fn()

2.匿名函数

①function() {}

1.作用:

①避免全局变量之间的污染

②执行一次性的认为

2.语法:

//方法1
(function(){ console.log(11)})();
//方法2
(function(){ console.log(11)}());
//不需要调用,立即执行
//注意:多个立即执行函数之间用 分号 隔开,不然会报错

3.案例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>30-匿名函数-了解.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      // 函数按照有没有名字 分成两种
      // 有名字 具名函数
      // 没有名字 匿名函数

      // 具名函数  函数名称  func1
      // function func1() {
      // }

      // 匿名函数  = function () {}; 匿名函数 了解即可 

      //    let func2 = function () {};  叫做 函数表达式 
      // 表达式 可以表示结果的一段代码  函数表达式  了解 
      let func2 = function () {
        console.log("123");
      };


      // 调用
      func2();
    </script>
  </body>
</html>

js基础第五天

函数

1.函数介绍

1.函数

2.说明

2.函数运用

1.函数声明语法

2.函数命名规范

3.语法:

4.动词

5.案例:

6.总结

3.形参和实参

1.形参

2.实参

3.语法

4.案例

5.总结

4.函数返回值

1.return(返回数据)

2.语法

3.注意

4.案例

5.作用域

1.作用域概述

2.全局作用域

3.局部作用域

4.块级作用域

6.变量作用域

1.全局变量

2.局部变量

3.块级变量

4.作用域特殊情况

7.作用域链

1.作用域链

2.案例测试

8. 匿名函数

1.具名函数

2.匿名函数