JavaScript闭包和范围实例详解


Posted in Javascript onDecember 19, 2016

本文实例分析了JavaScript闭包和范围。分享给大家供大家参考,具体如下:

1.

if (!("a" in window)) {
  var a = 1;
}
alert(a);

【分析】代码含义:如果window不包含属性a,就声明一个变量a并赋值为1

①JS引擎会先扫描所有的变量声明

②所有的全局变量都是window的属性

③变量声明和赋值一起用时,Js引擎会自动将它分成两部分:变量声明提前,变量赋值没有(不将赋值提前是因为他有可能影响代码执行出不可预期的结果)

所以代码执行顺序等价于

var a;
if(!("a" in window)) {
  a = 1;
}
alert(a);

解析:声明变量a,判断a是否存在,不存在就赋值为1,而这里a永远在window里存在,赋值语句永不执行,所以结果是undefined

2.

if (!("a" in window)) {
  function a() { window.a = 1; }
}
alert(a);

【分析】

①函数声明也会提前并且会覆盖变量声明,但不会覆盖变量赋值,如下例子

function value(){
  return 1;
}
var value;
alert(typeof value);  //"function"

function value(){
  return 1;
}
var value = 1;
alert(typeof value);  //"number"

②所有全局变量都是window属性,语句var a=1;等同于window.a=1;

所以代码执行顺序等价于

function a() {window.a = 1;}
if(!("a" in window)) {
  function a() { var a = 1; }
}
alert(a);

输出结果:function a() {window.a = 1; }

变形:

if ("a" in window) {
  function a() { window.a = 1; }
}
alert(a);

输出结果:a is not defined

函数声明里的变量定义,要到执行函数时才会定义,并不会在预编译阶段就声明变量

3.

if (!("a" in window)) {
  var a = function () { window.a = 1; }
}
alert(a);

【分析】

①函数声明和函数表达式区别

函数声明:

function functionName(arg1, arg2){
  //函数体
}

函数表达式(相当于变量赋值):

var functionName = function(arg1, arg2){
  //函数体
};

所以代码执行顺序等价于

var a;
if (!("a" in window)) {
  a = function () { window.a = 1; }
}
alert(a);

结果和第一题一样,undefined

4.

var a = 1,
  b = function a(x) {
    x && a(--x);
  };
alert(a);

【分析】

①进入执行上下文的阶段

VO(global) = {
  a: undefined,
  b: undefined
}

这阶段的顺序:函数的形参->函数声明->变量声明

②执行代码阶段

VO(global) = {
  x: undefined,
  a: 1
}

③定义变量b,赋值名字为a的函数(这个a只能在函数体内使用)

④如果x是任何true值(这这里应该是非0)则执行后面的语句

⑤换成更能理解的代码

var a = 1,
  b = function(x) {
    x && b(--x);
  };
alert(a);

结果为1

5.

function b(x, y, a) {
  arguments[2] = 10;
  alert(a);
}
b(1, 2, 3);

【分析】没有难点,输出10,如果改成

function b(x, y, a) {
  arguments[2] = 10;
  alert(a);
}
b(1, 2);

则输出undefined,因为没有传递a的值

6.

function a() {
  alert(this);
}
a.call(null);

【分析】

①a.call(b)表示a对象的方法应用到b对象上(即b对象继承了a对象),根据规定,第一个参数是null或undefined,call方法就把全局对象(也就是window)作为this的值

②call()和apply()的区别:功能一样,第二个参数形式不一样,call传递多个参数,任意形式,apply第二个参数必须是数组形式,如

a.call(b,2,3); ==>  a.apply(b,[2,3]);

输出结果:[object Window]

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
prettify 代码高亮着色器google出品
Dec 28 Javascript
用C/C++来实现 Node.js 的模块(二)
Sep 24 Javascript
使用AJAX实现Web页面进度条的实例分享
May 06 Javascript
Node.js连接MongoDB数据库产生的问题
Feb 08 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
Jul 16 Javascript
JS中的多态实例详解
Oct 15 Javascript
详解使用webpack构建多页面应用
Dec 21 Javascript
浏览器调试动态js脚本的方法(图解)
Jan 19 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
Mar 07 Javascript
使用微信SDK自定义分享的方法
Jul 03 Javascript
详解JS深拷贝与浅拷贝
Aug 04 Javascript
JavaScript 实现下雪特效的示例代码
Sep 09 Javascript
JS前端笔试题分析
Dec 19 #Javascript
利用vue实现模态框组件
Dec 19 #Javascript
JS中如何实现复选框全选功能
Dec 19 #Javascript
BootStrapValidator校验方式
Dec 19 #Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
Dec 19 #Javascript
JavaScript中this的用法实例分析
Dec 19 #Javascript
JS填写银行卡号每隔4位数字加一个空格
Dec 19 #Javascript
You might like
php 数组的指针操作实现代码
2011/02/08 PHP
php的4种常见运行方式
2015/03/20 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
javascript 操作select下拉列表框的一点小经验
2010/03/20 Javascript
jquery获得下拉框值的代码
2011/08/13 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
2014/09/01 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
javascript拖拽效果延伸学习
2016/04/04 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
2017/05/24 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
JS实现拖拽元素时与另一元素碰撞检测
2020/08/27 Javascript
目前最全的python的就业方向
2018/06/05 Python
对TensorFlow的assign赋值用法详解
2018/07/30 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
Python使用re模块验证危险字符
2020/05/21 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
Falconeri美国官网:由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
Strathberry苏贝瑞中国官网:西班牙高级工匠手工打造
2020/10/19 全球购物
shell程序中如何注释
2012/02/17 面试题
日语翻译个人求职的自我评价
2013/10/14 职场文书
学校十一活动方案
2014/02/01 职场文书
服务承诺书范文
2014/05/19 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
2016中秋节广告语
2016/01/28 职场文书
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python