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和json从后台获得数据集的代码
Nov 07 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
Mar 04 Javascript
快速学习jQuery插件 Form表单插件使用方法
Dec 01 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
Aug 01 Javascript
微信小程序实现多个按钮toggle功能的实例
Jun 13 Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 Javascript
vue3 源码解读之 time slicing的使用方法
Oct 31 Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 Javascript
微信分享invalid signature签名错误踩过的坑
Apr 11 Javascript
在Uni中使用Vue的EventBus总线机制操作
Jul 31 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 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
咖啡与水的关系
2021/03/03 冲泡冲煮
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
php SQL防注入代码集合
2008/04/25 PHP
手把手教你打印出PDF(关于fpdf的简单应用)
2013/06/25 PHP
有关PHP 中 config.m4 的探索
2020/08/26 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
javascript测试题练习代码
2012/10/10 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
Actionscript与javascript交互实例程序(修改)
2016/09/22 Javascript
老生常谈combobox和combotree模糊查询
2017/04/17 Javascript
Vuex之理解Mutations的用法实例
2017/04/19 Javascript
vue.js获取数据库数据实例代码
2017/05/26 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
PHP实现基于Redis的MessageQueue队列封装操作示例
2019/02/02 Javascript
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
pycharm下打开、执行并调试scrapy爬虫程序的方法
2017/11/29 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
Python flask框架post接口调用示例
2019/07/03 Python
python3 下载网络图片代码实例
2019/08/27 Python
Python selenium的基本使用方法分析
2019/12/21 Python
tensorflow实现从.ckpt文件中读取任意变量
2020/05/26 Python
解决PyCharm不在run输出运行结果而不是再Console里输出的问题
2020/09/21 Python
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
即将毕业大学生自荐信
2014/01/24 职场文书
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
先进单位事迹材料
2014/12/25 职场文书
我们的节日重阳节活动总结
2015/03/24 职场文书
公司奖励通知
2015/04/21 职场文书
田径运动会通讯稿
2015/07/18 职场文书