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

2021-10-18    前端达人

图片

本文重点

  • 函数案例

  • 函数作为参数使用

  • 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("哈哈"); }

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

分享此文一切功德,皆悉回向给文章原作者及众读者.

转自:csdn
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档