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 相关文章推荐
jquery ui对话框实例代码
May 10 Javascript
Jquery easyui 下loaing效果示例代码
Aug 12 Javascript
JS常用表单验证方法总结
May 22 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
Jun 10 Javascript
Vue.js仿微信聊天窗口展示组件功能
Aug 11 Javascript
Node.js实现连接mysql数据库功能示例
Sep 15 Javascript
Angular4自制一个市县二级联动组件示例
Nov 21 Javascript
Vue.js组件间的循环引用方法示例
Dec 27 Javascript
聊聊JS动画库 Velocity.js的使用
Mar 13 Javascript
es6新特性之 class 基本用法解析
May 05 Javascript
ES6扩展运算符和rest运算符用法实例分析
May 23 Javascript
详解Node.js使用token进行认证的简单示例
May 25 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
PHP4实际应用经验篇(9)
2006/10/09 PHP
《PHP编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
探讨PHP调用时间格式的参数详解
2013/06/06 PHP
PHP内核探索之解释器的执行过程
2015/12/22 PHP
php加密之discuz内容经典加密方式实例详解
2017/02/04 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
菜鸟javascript基础资料整理2
2010/12/06 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
2016/02/14 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
2016/05/14 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
js+html5实现半透明遮罩层弹框效果
2020/08/24 Javascript
vue 中 命名视图的用法实例详解
2019/08/14 Javascript
[54:05]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第一场 1月9日
2021/03/11 DOTA
Python操作Word批量生成文章的方法
2015/07/28 Python
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
django+echart绘制曲线图的方法示例
2018/11/26 Python
tensorflow如何批量读取图片
2019/08/29 Python
python批量修改xml属性的实现方式
2020/03/05 Python
Python自动化测试中yaml文件读取操作
2020/08/20 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
利用CSS3实现的文字定时向上滚动
2016/08/29 HTML / CSS
ECOSUSI官网:女式皮革背包
2019/09/27 全球购物
招商经理岗位职责
2013/11/16 职场文书
财务工作个人求职的自我评价
2013/12/19 职场文书
高二美术教学反思
2014/01/14 职场文书
《池塘边的叫声》教学反思
2014/04/12 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书
个人借条范本
2015/05/25 职场文书
详解Python自动化之文件自动化处理
2021/06/21 Python
Win11 PC上的Outlook搜索错误怎么办?
2022/07/15 数码科技