js作用域问题一步步透彻理解

简介: 原文:js作用域问题一步步透彻理解黄金守则第一条:     js没有块级作用域(你可以自己闭包或其他方法实现),只有函数级作用域,函数外面的变量函数里面可以找到,函数里面的变量外面找不到。    first try:      这是为什么呢??   1 var a = 10; ...
原文: js作用域问题一步步透彻理解

黄金守则第一条:

    js没有块级作用域(你可以自己闭包或其他方法实现),只有函数级作用域,函数外面的变量函数里面可以找到,函数里面的变量外面找不到。

   first try:

  

  这是为什么呢??

 

 1 var a = 10;
 2         function aaa(){//step-4
 3             alert(a);//step-5->执行alert,此时只能找到外面的a=10故弹框10
 4         }
 5         function bbb(){//step-2
 6             var a = 20;
 7             aaa();//step-3
 8         }
 9         //定义了函数没啥用,调用才是真格的所以这里是step-1
10         bbb();//step-1

 

其实原理大家都懂,应该就是易错而已,万变不离其综。

 

 second try:

这是为什么呢? 因为给a赋值b的时候,b还没有定义,所以a是undefined,b是10.

 

黄金守则第二条:

   变量的查找是就近原则,去寻找var定义的变量,当就近没有找到的时候就去查找外层。

look:

  

 

这是为什么呢、? 这里面有两个原因,一是预解析,二是就近查找。

 

 1         var a=10;
 2         function aaa(){
 3             alert(a);//undefined,查找a的时候会现在函数内查找,由于预解析的作用,此时的a是undefined,因此永远不会去查找外面的10了
 4             var a = 20;
 5 
 6             /*预解析
 7             var a
 8             alert(a);
 9             var a = 20;*/
10 
11         }
12         aaa();

 

attention:

 

这个吧,就验证了第二条,虽然是就近原则,但是是就近找var声明的变量,这个是因为没有var声明的变量是全局的,这里只是修改了a的值。所以上面就是因为在函数内没找到var的a,于是到外面去找了,一找就找到了,于是a就alert出10了;不过没错的是a=20后,a确实为20了,只不过alert的时候还没有执行到那~~

看吧~

 

下面这个例子,更加验证了js的函数作用域 而已:

这是因为在alert(a)的时候,bbb函数中的a确实为20 ,可是它对于这时的alert(a)这句话来说是局部的,alert(a)根本找不到bbb函数中的a,所以在aaa函数中它找不到a,于是乎去外面找,一找,就找到了10。

 

 

黄金守则第三条:

    当参数跟局部变量重名时,优先级是等同的。

 

例:

 

 还有:传参时,基本类型传值,引用类型传引用。(但是重新赋值之后就不是这样了喔)

1         var a = 5;
2         var b = a;
3         b +=3;
4         alert(a);//5
5 
6         var a = [1,2,3];
7         var b=a;
8         b.push(4);
9         alert(a);//[1,2,3,4];

上面代码没有问题,但是下面就不一样啦。

 

 

因为b被重新赋值了,不指向a了。

 

此外,参数与变量的作用域是相似的:

对比上下这两个:

上面是参数是基本类型,只传了值进去,下面的传个引用类型:(同样也包含重新赋值的情况)

 

 

目录
相关文章
|
JavaScript 前端开发
js的作用域作用域链
【10月更文挑战第29天】理解JavaScript的作用域和作用域链对于正确理解变量的访问和生命周期、避免变量命名冲突以及编写高质量的JavaScript代码都具有重要意义。在实际开发中,需要合理地利用作用域和作用域链来组织代码结构,提高代码的可读性和可维护性。
|
JavaScript 前端开发
浅谈js作用域
浅谈js作用域
139 0
|
前端开发 JavaScript 数据处理
CSS 变量的作用域和 JavaScript 变量的作用域有什么不同?
【10月更文挑战第28天】CSS变量和JavaScript变量虽然都有各自的作用域概念,但由于它们所属的语言和应用场景不同,其作用域的定义、范围、覆盖规则以及与其他语言特性的交互方式等方面都存在明显的差异。理解这些差异有助于更好地在Web开发中分别运用它们来实现预期的页面效果和功能逻辑。
203 11
|
JavaScript 前端开发
javascript的作用域
【10月更文挑战第19天javascript的作用域
|
JavaScript 前端开发
如何在 JavaScript 中实现块级作用域?
【10月更文挑战第29天】通过使用 `let`、`const` 关键字、立即执行函数表达式以及模块模式等方法,可以在JavaScript中有效地实现块级作用域,更好地控制变量的生命周期和访问权限,提高代码的可维护性和可读性。
|
JavaScript 前端开发
JavaScript 作用域
JavaScript 作用域是指程序中可访问的变量、对象和函数的集合。它分为函数作用域和局部作用域。函数作用域内的变量仅在函数内部可见,而全局作用域的变量在整个网页中均可访问。局部变量在函数执行完毕后会被销毁,而全局变量则在整个脚本生命周期中都存在。未使用 `var` 关键字声明的变量默认为全局变量。
|
JavaScript 前端开发
JavaScript基础知识-作用域(action scope)
关于JavaScript基础知识中作用域的介绍。
180 1
JavaScript基础知识-作用域(action scope)
|
JavaScript 前端开发
js作用域
js作用域
94 1
|
JavaScript 前端开发
js 变量作用域与解构赋值| 22
js 变量作用域与解构赋值| 22
|
缓存 JavaScript 前端开发
了解js基础知识中的作用域和闭包以及闭包的一些应用场景,浅析函数柯里化
该文章详细讲解了JavaScript中的作用域、闭包概念及其应用场景,并简要分析了函数柯里化的使用。
了解js基础知识中的作用域和闭包以及闭包的一些应用场景,浅析函数柯里化