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 相关文章推荐
html向js方法传递参数具体实现
Aug 08 Javascript
HTML页面登录时的JS验证方法
May 28 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
JS时间特效最常用的三款
Aug 19 Javascript
深入理解Node.js的HTTP模块
Oct 12 Javascript
JS实现弹出下载对话框及常见文件类型的下载
Jul 13 Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 Javascript
Vue 表单控件绑定的实现示例
Aug 11 Javascript
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
JavaScript程序设计高级算法之动态规划实例分析
Nov 24 Javascript
Angular CLI 使用教程指南参考小结
Apr 10 Javascript
CountUp.js实现数字滚动增值效果
Oct 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
漂亮但不安全的CTB
2006/10/09 PHP
PHP与MySQL交互使用详解
2006/10/09 PHP
一个很不错的PHP翻页类
2009/06/01 PHP
PHP中去除换行解决办法小结(PHP_EOL)
2011/11/27 PHP
CodeIgniter输出中文乱码的两种解决办法
2014/06/12 PHP
详细解读PHP的Yii框架中登陆功能的实现
2015/08/21 PHP
ExtJs扩展之GroupPropertyGrid代码
2010/03/05 Javascript
浅谈javascript的数据类型检测
2010/07/10 Javascript
过虑特殊字符输入的js代码
2010/08/05 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
2015/02/16 Javascript
cookie的secure属性详解
2015/04/08 Javascript
JavaScript实现求最大公共子串的方法
2018/02/03 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
2018/11/06 Javascript
python中函数总结之装饰器闭包详解
2016/06/12 Python
对PyQt5中树结构的实现方法详解
2019/06/17 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
django 快速启动数据库客户端程序的方法示例
2019/08/16 Python
django实现模型字段动态choice的操作
2020/04/01 Python
使用Python构造hive insert语句说明
2020/06/06 Python
学会迭代器设计模式,帮你大幅提升python性能
2021/01/03 Python
五款漂亮的纯CSS3动画按钮的实例教程
2014/11/21 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
HTML5 textarea高度自适应的两种方案
2020/04/08 HTML / CSS
阿里健康官方海外旗舰店:阿里健康国际自营
2017/11/24 全球购物
英国复古服装购物网站:Collectif
2019/10/30 全球购物
Zatchels官网:英国剑桥包品牌
2021/01/12 全球购物
英语专业个人求职自荐信
2013/09/21 职场文书
岗位职责定义及内容
2013/11/08 职场文书
幼师自我鉴定
2014/02/01 职场文书
计算机专业职业规划
2014/02/28 职场文书
《穷人》教学反思
2014/04/08 职场文书
禁毒心得体会范文
2016/01/15 职场文书
女人创业励志语录,句句蕴含能量,激发你的潜能
2019/08/20 职场文书