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 parsefloat parseint 转换函数
Jan 21 Javascript
JQuery获取文本框中字符长度的代码
Sep 29 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
Jan 22 Javascript
模拟多级复选框效果的jquery代码
Aug 13 Javascript
node.js中的fs.existsSync方法使用说明
Dec 17 Javascript
JS实现数字格式千分位相互转换方法
Aug 01 Javascript
微信小程序 倒计时组件实现代码
Oct 24 Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 Javascript
webpack 插件html-webpack-plugin的具体使用
Apr 09 Javascript
JS实现随机抽选获奖者
Nov 07 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
Jun 10 Javascript
ant design的table组件实现全选功能以及自定义分页
Nov 17 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
Sony CFR 320 修复改造
2020/03/14 无线电
Apache下禁止php文件被直接访问的解决方案
2013/04/25 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
PHP实现可添加水印与生成缩略图的图片处理工具类
2018/01/16 PHP
ExtJS Grid使用SimpleStore、多选框的方法
2009/11/20 Javascript
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
2010/06/04 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
2010/10/20 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
2015/11/30 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
jQuery网页定位导航特效实现方法
2016/12/19 Javascript
详解Vue.js Mixins 混入使用
2017/09/15 Javascript
jquery animate动画持续运动的实例
2017/11/29 jQuery
详解webpack模块加载器兼打包工具
2018/09/11 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
Vue基础配置讲解
2019/11/29 Javascript
JS 5种遍历对象的方式
2020/06/16 Javascript
[03:17]2016完美“圣”典风云人物:冷冷专访
2016/12/08 DOTA
Python的Scrapy爬虫框架简单学习笔记
2016/01/20 Python
dataframe设置两个条件取值的实例
2018/04/12 Python
Python 确定多项式拟合/回归的阶数实例
2018/12/29 Python
django数据关系一对多、多对多模型、自关联的建立
2019/07/24 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
python的reverse函数翻转结果为None的问题
2020/05/11 Python
python异常处理之try finally不报错的原因
2020/05/18 Python
Python logging日志库空间不足问题解决
2020/09/14 Python
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
李敖北大演讲稿
2014/05/24 职场文书
企业挂职心得体会
2014/09/10 职场文书
死亡证明书样本说明
2014/10/18 职场文书
会议欢迎词范文
2015/01/27 职场文书
Redis RDB技术底层原理详解
2021/09/04 Redis