本篇主要介绍了Web前端Javascript开发--JavaScript作用域，通过具体的内容展现，希望对大家web前端JavaScript开发的学习有一定的帮助。

本文重点

函数案例

函数作为参数使用

arguments

作用域：写代码要注意变量的在哪声明和使用的问题

预解析：什么叫预解析, 什么东西发生了什么事

01 作用域:使用范围

全局变量:

声明的变量是使用var声明的,那么这个变量就是全局变量,

全局变量可以在页面的任何位置使用

除了函数以外,其他的任何位置定义的变量都是全局变量

如果页面不关闭,那么就不会释放,就会占空间,消耗内存

全局作用域:全局变量的使用范围

局部变量:

在函数内部定义的变量,是局部变量,外面不能使用

局部作用域:局部变量的使用范围

注意:

块级作用域:一对大括号就可以看成是一块,在这块区域中定义的变量,只能在这个区域中使用,但是在js中在这个块级作用域中定义的变量,外面也能使用;

说明:js没有块级作用域,只有函数除外

隐式全局变量:声明的变量没有var,就叫隐式全局变量

全局变量是不能被删除的,隐式全局变量是可以被删除的

定义变量使用var是不会被删除的,没有var是可以删除的

function f1() { 

  number=1000;//是隐式全局变量 

}

f1();

console.log(number); 

 var num1=10; 

 num2=20; 

 delete num1;//把num1删除了 

 delete num2;//把num2删除了 

 console.log(typeof num1); 

 console.log(num1+10); 

 console.log(typeof num2); 

num=100; 

console.log(num); 

function f1() { 

  var num=100; 

  num+=10; 

}

f1();//这个函数结束之后

{

  var num=10; 

  console.log(num);//10 

}

console.log(num); 

if(true){ 

  var num=10; 

}

console.log(num); 

for(var i=0;i<5;i++){ 

  var number=20; 

}

console.log(number); 

 var i=0; 

 while (i<5){ 

   var num=100; 

   i++; 

 }

 console.log(num); 

function f1() { 

  var num=10; 

}

f1(); 

console.log(num); 

var num=10; 

console.log(num);//10 

作用域链

  var num=10; 

    function f1() { 

      var num=20; 

      function f2() { 

        var num=30; 

        function f3() { 

          var num=50; 

          console.log(num); 

        }

        f3(); 

      }

      f2(); 

    }

    f1(); 

03 函数案例

求2个数中的最大值

  function getMax(num1, num2) { 

    return num1 > num2 ? num1 : num2; 

  }

  console.log(getMax(10,20)); 

  //console.log(getMax);//函数的代码

  function getMax(num1, num2) { 

    return num1 > num2 ? num1 : num2; 

  }

  var num1=10; 

  var num2=20; 

  //函数外面的num1和函数的形参num1不是同一个变量

  var result=getMax(num1,num2); 

  console.log(result); 

  console.log(getMax);//函数的代码 

求3个数中的最大值

  function getThreeMax(x, y, z) { 

    return x > y ? (x > z ? x : z) : (y > z ? y : z); 

  }

  console.log(getThreeMax(10,2,24)); 

判断一个数是否是素数(质数),只能被1和自身整除，质数是从2开始

用这个数字和这个数字前面的所有的数字整除一次(没有1的,没有自身的)

 function isPrimeNumber(num) { 

   for (var i = 2; i < num; i++) { 

     if (num % i == 0) { 

       //说明有一个数字整除了，就没有必要向后继续整除了，

       //此时就已经验证出不是质数

       return false; 

     }

   }

   return true; 

 }

//  console.log(isPrimeNumber(7) ? "yyyyyes" : "nnnnnno")

 var aa = isPrimeNumber(17); 

 if (aa) { 

   console.log("yes"); 

 } else { 

   console.log("no"); 

 }

 function isPrimeNumber(num) { 

   for(var i=2;i<num;i++){ 

     if(num%i==0){ 

       //说明有一个数字整除了,就没有必要向后继续整除了,此时就已经验证出不是质数

       return false; 

     }

   }

   return true; 

 }

 console.log(isPrimeNumber(8)?"是质数":"不是质数"); 

    var result=isPrimeNumber(2); 

    if(result){ 

      console.log("这个数字是质数"); 

    }else{ 

      console.log("这个数字不是质数"); 

    }

 function aaa(x,y){ 

   return x-y; 

 }

 console.log(aaa(99,88)) 

通过函数实现数组反转

 function reverseArray(arr) { 

      for (var i = 0; i < arr.length / 2; i++) { 

        var temp = arr[i]; 

        arr[i] = arr[arr.length - 1 - i]; 

        arr[arr.length - 1 - i] = temp; 

      }

      return arr; 

    }

    console.log(reverseArray([1, 2, 3, 4, 5])); 

通过函数实现冒泡排序

 function sortArray(arr) { 

      //控制比较的轮数

      for (var i = 0; i < arr.length - 1; i++) { 

        //控制每一轮的比较次数

        for (var j = 0; j < arr.length - 1 - i; j++) { 

          if (arr[j] > arr[j + 1]) { 

            var temp = arr[j]; 

            arr[j] = arr[j + 1]; 

            arr[j + 1] = temp; 

          }//end if

        }//end for

      }//end for

      return arr;

    }

    console.log(sortArray([0, 19, 34, 10, 100, 2])); 

求一个数字的阶乘

function getJieCheng(num) { 

 var result = 1; 

  for (var i = 1; i <= num; i++) { 

    result *= i; 

  }

  return result; 

}

console.log(getJieCheng(5));//1*2*3*4*5 

求斐波那契数列

  function getFib(num){ 

    var num1=1; 

    var num2=1; 

    var num3=0; 

    for(var i=3;i<=nnum;i++){ 

      sum=num1+num2; 

      num1=num2; 

      num2=sum; 

    }

    return sum; 

  }

  console.log(getFib(12)) 

02 函数作为参数使用

函数是有数据类型,数据类型:是function类型的

函数可以作为参数使用,如果一个函数作为参数,那么我们说这个参数(函数)可以叫回调函数 只要是看到一个函数作为参数使用了,那就是回调函数

function sayHi(fn) { 

  console.log("GOOD"); 

  fn();//fn此时应该是一个函数

}

function suSay() { 

  console.log("HELLO"); 

}

sayHi(suSay); 

function f1(x,y) { 

  console.log(x+y); 

}

f1(10,20); 

function f2(x,y) { 

  console.log(x+y); 

}

f2("HLS","MISS"); 

function f3(x) { 

  console.log(x); 

}

f3(true);

04 arguments

计算n个数字的和

定义一个函数,如果不确定用户是否传入了参数,或者说不知道用户传了几个参数,没办法计算,但是如果在函数中知道了参数的个数,等于也知道了每个参数的值.

//定义

function f1() { 

  //获取的是函数在调用的时候,传入了几个参数

  //console.log(arguments.length); 

  //使用arguments对象可以获取传入的每个参数的值

  console.log(arguments); 

} 

f1(10,20,30,40,100,200);//调用 

 function f1() { 

   //arguments----->数组使用------伪数组---

   var sum=0; 

   for(var i=0;i<arguments.length;i++){ 

     sum+=arguments[i]; 

   }

   return sum; 

 }

 console.log(f1(10,20,30)); 

05 预解析:提前解析代码

预解析:就是在解析代码之前,预解析做什么事?

把变量的声明提前了----提前到当前所在的作用域的最上面

函数的声明也会被提前—提前到当前所在的作用域的最上面

函数调用的时候, 把会函数的声明提升到作用域的上面

函数的声明提升到作用域

 f1();//调用 

 var num=20;//这个变量的声明会提升到变量使用之前 

 function f1() { 

   console.log(num); 

   //var num=10; 

 }

 function f1() { 

   console.log("小苏好猥琐"); 

 }

 f1();  

 function f1() { 

   console.log("小苏没有助教猥琐"); 

 }

 f1(); 

把变量的声明提前

   var num; 

   console.log(num); 

   num=10;  

   function f1() { 

     console.log("哈哈,助教好猥琐哦"); 

   }

   //f1();//报错 

注意：预解析中,变量的提升,只会在当前的作用域中提升,提前到当前的作用域的最上面

  function f1() { 

    console.log(num);//undefined 

    var num = 10; 

  }

  f1(); 

  console.log(num);//报错  

函数中的变量只会提前到函数的作用域中的最前面,不会出去

预解析会分段(多对的script标签中函数重名,预解析的时候不会冲突)

 function f1() { 

   console.log(num);//undefined 

   var num=10;

 }

 f1();

 console.log(num);//

 function f1() {

   console.log("哈哈");

 }

我是小职，记得找我

✅ 解锁高薪工作

✅ 免费获取基础课程·答疑解惑·职业测评