JS作用域深度解析


Posted in Javascript onDecember 29, 2016

本文实例为大家深度剖析JS的作用域,代码注释详细,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>作用域问题</title>
</head>
<body>
<script>
 /*
 * 1.全局变量与局部变量
 * 外层变量可以在内层调用(全局),内层变量不能在外层调用(局部)
 * */

 var a = 1;
 (function () {
  // 外部变量可以在内部调用
  alert(a);
 })();

 /*function test() {
  // 内部变量不能在外部调用
  var a = 2;
 }
 alert(a); // 报错*/

 /*
 * 下面举个例子:
 * 函数调用只是回到函数定义的地方,调用一下函数
 * 这里在bbb函数中,调用aaa函数,
 * 这时的aaa函数并不是被放入bbb函数中,而是在原定义的地方
 * 这是的aaa中没有变量a,所以去访问全局变量中的a
 * */

 /*var a = 10;
 function aaa() {
  alert(a);
 }
 function bbb() {
  var a = 20;
  aaa();
 }
 bbb(); // 10*/

 /*
 * 2.当var不加的时候,会自动变成全局变量
 * 在全局环境中,不加var和加var效果一样,都是全局变量
 * 在局域环境中,加var会被定义为局部变量,不加var会被定义为全局变量
 * */

 /*function test() {
  var a = 10; // 外部访问不到
  b = 10;  // 相当于全局变量
  // 上面相当于:var a = b = 10;
 }
 test();
 alert(b); // 10
 alert(a); // 报错*/

 /*
 * 3.变量查找按照就近原则去查找
 * var定义的变量,当就近查找没有找到就去外层查找
 * */

 /*var a = 10;
 (function() {
  var a = 20;
  // a在匿名函数中var定义了,所以找到为20
  alert(a); // 20
 })();*/

 /*var a = 10;
 (function() {
  a = 20; // 相当于全局变量,将外部的var a = 20;
  // 在匿名函数中没有找到var定义的a,然后去外层去查找
  // 外部查找到了,var a = 10 = 20;
  alert(a); // 20
 })();*/

 /*var a = 10;
 (function() {
  // 在匿名函数中没有找到var定义的a,然后去外层去查找
  // 外部查找到了,var a = 10
  alert(a); // 10
  a = 20;
 })();*/

 /*var a = 10;
 (function() {
  // 在匿名函数中找到var定义的a,
  // 这里的var a = 20,存在变量提升,
  // 在执行alert(a)之前,变量提示有var a;
  // 但是a没有值,所有返回undefined
  alert(a); // undefined
  var a = 20;

  // 在变量提升的情况下,相当于下面:
  // var a;
  // alert(a);
  // a = 20;
 })(;*/

 /*var a = 10;
 (function() {
  // 执行bbb,bbb中的a=20,但是与匿名函数和全局变量a无关
  bbb();
  // 在匿名函数中查找var定义的a,发现没有
  // 继续在外层中查找,发现了 var a = 10;
  alert(a); // 10
  function bbb() {
   var a = 20;
  }
 })();*/

 /* var a = 10;
 (function() {
  bbb();
  // 在匿名函数中查找var定义的a,发现没有
  // 继续在外层中查找,发现了 var a = 10 = 20;
  alert(a); // 20
  function bbb() {
   // 没有var定义,所有为全局变量,外面的全局变量 var a = 10 = 20;
   a = 20;
  }
 })();*/


 /*
 * 当参数与局部变量重名时,优先级等同
 * */

 /*var a = 10;
 (function (a) {
  // 这里的参数a是基本类型,按值传参的
  // 相当于在匿名函数内部重新定义了一个a,
  // 且与外层的a不相关
  a += 3;
 })(a);
 alert(a); // 10*/

 /*var a = [1,2,3];
 (function (a) {
  // 这里的参数a是特殊类型,按引用传参的
  // 相当于在匿名函数内部重新定义了一个a,
  // 但是这个a是外层a的一个别名,它们引用了同一个地址
  // 所以内部a添加值,外部a可以访问到
  a.push(4);
 })(a);
 alert(a); // [1,2,3,4]*/


 /*var a = [1,2,3];
 (function (a) {
  // 这里的参数a是特殊类型,按引用传参的
  // 相当于在匿名函数内部重新定义了一个a,
  // 但是这个a是外层a的一个别名,它们引用了同一个地址
  // 所以内部a添加值,外部a可以访问到

  // 但是,这里的a又重新赋值了新的数组,断开了与外层的关系
  a = [1,2,3,4];
 })(a);
 alert(a); // [1,2,3]*/



</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Mozilla中显示textarea中选择的文字
Sep 07 Javascript
基于jQuery图片平滑连续滚动插件
Apr 27 Javascript
Javascript Select操作大集合
May 26 Javascript
jQuery实现原理的模拟代码 -6 代码下载
Aug 16 Javascript
JavaScript中的排序算法代码
Feb 22 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
May 08 Javascript
jQuery中height()方法用法实例
Dec 24 Javascript
JavaScript中的null和undefined区别介绍
Jan 01 Javascript
AngularJS转换响应内容
Jan 27 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
Aug 09 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
May 09 Javascript
手把手教你如何编译打包video.js
Dec 09 Javascript
javascript中的深复制详解及实例分析
Dec 29 #Javascript
canvas学习之API整理笔记(一)
Dec 29 #Javascript
Javascript Function.prototype.bind详细分析
Dec 29 #Javascript
jQuery自定义插件详解及实例代码
Dec 29 #Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 #Javascript
JavaScript获取短信验证码(周期性)
Dec 29 #Javascript
JavaScript实现同一个页面打开多张图片
Dec 29 #Javascript
You might like
1 Tube Radio
2021/03/02 无线电
PHP抽象类与接口的区别实例详解
2019/05/09 PHP
Jquery跨域获得Json时invalid label错误的解决办法
2011/01/11 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
2012/11/19 Javascript
node.js中的console.warn方法使用说明
2014/12/09 Javascript
Webwork 实现文件上传下载代码详解
2016/02/02 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
JavaScript动态添加事件之事件委托
2016/07/12 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
NodeJs使用Mysql模块实现事务处理实例
2017/05/31 NodeJs
Javascript实现基本运算器
2017/07/15 Javascript
vue.js删除列表中的一行
2018/06/30 Javascript
vue在手机中通过本机IP地址访问webApp的方法
2018/08/15 Javascript
vue-cli webpack 引入swiper的操作方法
2018/09/15 Javascript
跨域解决之JSONP和CORS的详细介绍
2018/11/21 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
Python 异常处理实例详解
2014/03/12 Python
用tensorflow搭建CNN的方法
2018/03/05 Python
Django 跨域请求处理的示例代码
2018/05/02 Python
Django项目开发中cookies和session的常用操作分析
2018/07/03 Python
Python常见内置高效率函数用法示例
2018/07/31 Python
Python实战之制作天气查询软件
2019/05/14 Python
Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析
2019/11/07 Python
python 实现非极大值抑制算法(Non-maximum suppression, NMS)
2020/10/15 Python
巴西电子产品购物网站:Saldão da Informática
2018/01/09 全球购物
美国在线家具网站:GDFStudio
2021/03/13 全球购物
EJB的几种类型
2012/08/15 面试题
护士专业推荐信
2013/11/02 职场文书
简历中求职的个人自我评价
2013/12/03 职场文书
高考寄语大全
2014/04/08 职场文书
聋哑人盗窃罪辩护词
2015/05/21 职场文书
元旦晚会开场白
2015/05/29 职场文书
尼克胡哲观后感
2015/06/08 职场文书
手把手教你制定暑期学习计划,让你度过充实的暑假
2019/08/22 职场文书
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL