【举栗说明】JavaScript作用域,一次性给你总结!

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
简介: 【举栗说明】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(); 


02 函数案例


求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)) 


03 函数作为参数使用


函数是有数据类型,数据类型:是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("哈哈");
 }


相关文章
|
1月前
|
JavaScript 前端开发
js的作用域作用域链
【10月更文挑战第29天】理解JavaScript的作用域和作用域链对于正确理解变量的访问和生命周期、避免变量命名冲突以及编写高质量的JavaScript代码都具有重要意义。在实际开发中,需要合理地利用作用域和作用域链来组织代码结构,提高代码的可读性和可维护性。
|
4月前
|
JavaScript 前端开发
浅谈js作用域
浅谈js作用域
38 0
|
1月前
|
自然语言处理 JavaScript 前端开发
[JS]作用域的“生产者”——词法作用域
本文介绍了JavaScript中的作用域模型与作用域,包括词法作用域和动态作用域的区别,以及全局作用域、函数作用域和块级作用域的特点。通过具体示例详细解析了变量提升、块级作用域中的暂时性死区等问题,并探讨了如何在循环中使用`var`和`let`的不同效果。最后,介绍了两种可以“欺骗”词法作用域的方法:`eval(str)`和`with(obj)`。文章结合了多位博主的总结,帮助读者更快速、便捷地掌握这些知识点。
37 2
[JS]作用域的“生产者”——词法作用域
|
1月前
|
前端开发 JavaScript 数据处理
CSS 变量的作用域和 JavaScript 变量的作用域有什么不同?
【10月更文挑战第28天】CSS变量和JavaScript变量虽然都有各自的作用域概念,但由于它们所属的语言和应用场景不同,其作用域的定义、范围、覆盖规则以及与其他语言特性的交互方式等方面都存在明显的差异。理解这些差异有助于更好地在Web开发中分别运用它们来实现预期的页面效果和功能逻辑。
|
1月前
|
JavaScript 前端开发
如何在 JavaScript 中实现块级作用域?
【10月更文挑战第29天】通过使用 `let`、`const` 关键字、立即执行函数表达式以及模块模式等方法,可以在JavaScript中有效地实现块级作用域,更好地控制变量的生命周期和访问权限,提高代码的可维护性和可读性。
|
1月前
|
JavaScript 前端开发
javascript的作用域
【10月更文挑战第19天javascript的作用域
|
2月前
|
JavaScript 前端开发
JavaScript 作用域
JavaScript 作用域是指程序中可访问的变量、对象和函数的集合。它分为函数作用域和局部作用域。函数作用域内的变量仅在函数内部可见,而全局作用域的变量在整个网页中均可访问。局部变量在函数执行完毕后会被销毁,而全局变量则在整个脚本生命周期中都存在。未使用 `var` 关键字声明的变量默认为全局变量。
|
2月前
|
JavaScript 前端开发
js作用域
js作用域
19 1
|
3月前
|
JavaScript 前端开发
js 变量作用域与解构赋值| 22
js 变量作用域与解构赋值| 22
|
3月前
|
JavaScript 前端开发
JavaScript基础知识-作用域(action scope)
关于JavaScript基础知识中作用域的介绍。
46 1
JavaScript基础知识-作用域(action scope)