JavaScript-5.函数和作用域大纲

前言: 完成以下练习

编写代码:计算 1-100 相加并输出结果, 计算 1-200 相加,并输出结果, 计算 1-300 相加,并输出结果

没学函数前, 我们可能会写三遍 for 循环, 有了函数之后只需要写一遍即可.

一.函数的声明函数的调用

函数就是封装(打包)多行代码,元素函数就是运行函数封装的多行代码

1.函数声明和调用

2.对象中的函数(方法),alert就是window对象的一个方法

3.函数和声明提前

4.函数表达式

1.函数声明和调用

1.声明函数function(){}

2.调用函数xxx{},函数被调用的时候,函数体(函数内部的代码)才会运行

3.js代码的运行分俩部:

• 先解析代码
• 运行代码

4,函数和变量的声明会提前

• 函数是"一等公民", 程序运行的时候, 不管函数定义在什么位置, 都会先执行声明, 所以在任何地方都可以调用函数.
• 变量也会一开始运行就声明, 等到代码运行到变量声明的那句代码才可以对其进行赋值

<script>
        // 调用函数
        sum();//可以输出count;
        console.log('ghkjhkhk');
        // 声明函数
        function sum() {
          var count=0;
          for(var i=0;i<100;i++) {
            count+=i;
          }
          console.log('count',count);
        }  
        // 调用函数
        sum();
      </script>
          
          
      <script>
          console.log('str',str); // 不会报错,输出undefined
          var str = 'hello';
          console.log('str',str); // hello
</script>   

2.对象中的函数(方法)

定义在对象中的函数就是对象的方法,下面say函数是obj对象的一个方法

alert,console,prompt都是window对象的方法

<script>
  var obj = {
    name: 'zhangsan',
    age: 18,
    say: function() {
      console.log('它是张三');
    }
  }
  obj.say();
</script> 

3.函数表达式(先了解)

使用函数表达式来创建函数的时候,调用函数必须放在函数之后.

<script> 
  // 使用函数表达式时, say在这里还没赋值, 所以它的值就是undefined, 所以不能调用
  console.log('say',say); 
  var say = function () {
    console.log('它居然会说话')
  };
  // 必须在赋值之后去调用(就是在表达式之后才能调用)
  say();
</script>

二.函数的调用方式

1.手动调用

2.绑定一个事件来触发函数的运行

<button onclick="say()">sb</button>
    <script>
        say();
        function say(){
           alert('hahaha');
        }
        say();
    </script>

练习

1.写一个函数,实现50 到 500 相加, 并输出到网页上

<script>
      sb();
      function sb(){
        var str=0;
        for (var i=50;i<501;i++){
            str +=i;
        }
        document.write(str);
      }
</script>

2.需求: 从页面上输入两个加数,绑定事件,计算两个加数相加的结果,并显示在页面上

 <input class="inp"> + <input class="inp">
<button class="btn" onclick="deng()">=</button><span>?</span>
        <script>
            function deng(){
                var $inputs = document.querySelectorAll('.inp');
                var num1 = $inputs[0].value*1;
                var num2 = $inputs[1].value*1;
                var $sp = document.querySelector('span');
                $sp.innerText = num1+num2;
            }
            
        </script>

三.函数传递参数(重要)

1.调用函数可以通过()传入任何类型参数,被调用函数通过()接收参数(demo1)

• 调用时传入声明数据,函数就接收到什么数据
• 传入的参数可以是任何类型

2.传入的参数叫实参,接收的参数叫形参,形参和实参的位置一一对应(像数学)(demo2)

3.基本数据类型和引用数据类型参数的区别(先了解)

//demo1
<script>
      function say(a) {
        document.write(a+'<br>');
      }
      say(100);
      say("abcd");
      say({ name: "zhangsan", age: 100 });
</script>

//demo2
<script>
        var a = 100;
        var b = 200;
        say(a,b);
  
        function say(x,y) {
          console.log(x,y);
        } 
</script>

练习

1.编写一个累加的函数,用户输入任意俩个数都能计算累加的结果,比如用户输入10,20,函数计算10-20累加的值.

<script>
            add(0,10)
            function add(x,y){
                var str = 0;
                for(var i =x;i<y;i++){
                    str +=i;
                }
                document.write(str);
            }
</script>

四函数返回值

4.1使用return 返回计算的结果(是否需要返回根据你自己的需要)

<script>
            function add(a,b){
                var sum  = a+b;
                return sum;
            }
            var sb =add(10,20);
            console.log(sb);
</script>

<script>
            var num1 = prompt('请输入从一累加到的数');
            var sb = add(num1);
           
            function add(x){
                var sum =0;
                for(var i=1;i<x*1;i++){
                    sum +=i;
                    
                }
                return sum;
            }
            alert(sb);
</script>

ps:return记得在循环后使用,多次犯错误,

五.作用域

什么是作用域?

答:变量的作用域指的是变量起作用的领域(范围)就是变量的作用域.

1.作用域和变量

2.作用域访问规则

1.作用域和变量

1.全局作用域和全局变量: 全局作用域就是window,在window下定义的变量就是全局变量

var num = 100; // 全局变量num会自动的变成window的一个属性
window.num2 = 200;
console.log(window.num2);
consoel.log(num2);  // 全局变量可以直接访问, 省略window.

2.函数运行时, 函数内部就形成了局部作用域, 在函数内部声明的变量就是局部变量

局部变量在函数运行的时候存在, 函数运行结束就被销毁

ps: 区分全局和局部变量的标准就是看这个变量是否是在函数内声明的

  <script>
    // num是全局变量
    var num = 100; 
	// sum,a,b都是局部变量, 因为它们都是函数add内
    function add(a, b) {
      var sum = a + b;
      return sum;
    } 
  </script> 

3.js没有块级作用域(后台语言有块级作用域, 以{}进行区分)

解释: js的作用域以函数作为区分标准, 而不是以{}作为区分标准

<script> 
    for(var i=0;i<5;i++) {
      console.log(2222);
    } 
    console.log(i);
</script>

2.作用域访问规则

1. 函数内部可以访问函数外部的变量

2. 函数外部不可以访问函数内部的变量

<script>
  var x = 100; 
  function aa() {
    var y = 200;
    console.log(x); // 里面可以访问外面
  } 
  aa();  
  console.log(y);  // 外面无法访问里面
</script>

3.多个嵌套的作用域形成了作用域链

当访问一个变量时, 从最近的作用域开始查找, 若没有就查找向上一层作用域, 一直到全局作用域为止, 若找到就返回, 找不到就报错"xxx is not defined"

<script>
  var x = 100; 
  function aa() {
    var a = 10;
    function bb() {
      var b = 20;
      function cc() {
        var c = 30;
         console.log(x);
         console.log(y);
      }
      cc();
    }
    bb();
  } 
  aa();   
</script>