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 相关文章推荐
js字符串的各种格式的转换 ToString,Format
Aug 08 Javascript
ajax读取数据后使用jqchart显示图表的方法
Jun 10 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
原生js实现放大镜效果
Jan 11 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
Feb 18 Javascript
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
Bootstrap输入框组件使用详解
Jun 09 Javascript
详解vue+vueRouter+webpack的简单实例
Jun 17 Javascript
微信小程序后台解密用户数据实例详解
Jun 28 Javascript
vue2.0 中使用transition实现动画效果使用心得
Aug 13 Javascript
vue实现购物车选择功能
Jan 10 Javascript
使用typescript快速开发一个cli的实现示例
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
使用 eAccelerator加速PHP代码的方法
2007/09/30 PHP
preg_match_all使用心得分享
2014/01/31 PHP
php 字符串中的\n换行符无效、不能换行的解决方法
2014/04/02 PHP
php类的自动加载操作实例详解
2016/09/28 PHP
PHP获取当前系统时间的方法小结
2018/10/03 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
IE6下javasc#ipt:void(0) 无效的解决方法
2013/12/23 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
js判断鼠标左、中、右键哪个被点击的方法
2015/01/27 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
jQuery读取本地的json文件(实例讲解)
2017/10/31 jQuery
vue表单验证你真的会了吗?vue表单验证(form)validate
2019/04/07 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
使用Vant完成Dialog弹框案例
2020/11/11 Javascript
Python使用Mechanize模块编写爬虫的要点解析
2016/03/31 Python
python+pyqt实现右下角弹出框
2017/10/26 Python
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
Python Json序列化与反序列化的示例
2018/01/31 Python
python使用PyQt5的简单方法
2019/02/27 Python
Python3列表内置方法大全及示例代码小结
2019/05/10 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
Selenium之模拟登录铁路12306的示例代码
2020/07/31 Python
python利用platform模块获取系统信息
2020/10/09 Python
雅诗兰黛(Estee Lauder)英国官方网站:世界顶级化妆品牌
2016/12/29 全球购物
Lou & Grey美国官网:主打舒适性面料服饰
2017/12/21 全球购物
应届生高等护理求职信
2013/10/12 职场文书
中学教师请假制度
2014/02/03 职场文书
开业庆典活动策划方案
2014/09/21 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
赔偿协议书
2015/01/27 职场文书
杜甫草堂导游词
2015/02/03 职场文书
司机个人年终总结
2015/03/03 职场文书
创业计划书之甜品店
2019/09/18 职场文书
vue特效之翻牌动画
2022/04/20 Vue.js