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 相关文章推荐
jquery 事件执行检测代码
Dec 09 Javascript
关于javascript中的typeof和instanceof介绍
Dec 04 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
Jun 24 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
限制上传文件大小和格式的jQuery插件实例
Jan 24 Javascript
JavaScript函数的调用以及参数传递
Oct 21 Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 Javascript
js+canvas绘制五角星的方法
Jan 28 Javascript
关于Javascript中document.cookie的使用
Mar 08 Javascript
简单理解Vue中的nextTick方法
Jan 30 Javascript
用npm-run实现自动化任务的方法示例
Jan 14 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
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中调用ASP.NET的WebService的代码
2011/04/22 PHP
thinkPHP5框架自定义验证器实现方法分析
2018/06/11 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
IE8 下的Js错误HTML Parsing Error...
2009/08/14 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
2014/06/12 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
2015/10/23 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
vue.js入门教程之计算属性
2016/09/01 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
2017/01/20 Javascript
Angularjs中的ui-bootstrap的使用教程
2017/02/19 Javascript
Angular2平滑升级到Angular4的步骤详解
2017/03/29 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
2017/08/12 Javascript
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
nuxt中使用路由守卫的方法步骤
2019/01/27 Javascript
在Vue中实现随hash改变响应菜单高亮
2020/03/09 Javascript
如何使用django的MTV开发模式返回一个网页
2019/07/22 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
python 负数取模运算实例
2020/06/03 Python
html5 div布局与table布局详解
2016/11/16 HTML / CSS
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
总经理职责
2013/12/22 职场文书
葛优非诚勿扰搞笑征婚台词
2014/03/17 职场文书
企业元宵节主持词
2014/03/25 职场文书
安全生产演讲稿
2014/05/09 职场文书
大专学生求职信
2014/07/04 职场文书
中华魂放飞梦想演讲稿
2014/08/26 职场文书
运动会加油稿100字
2014/09/19 职场文书
2014年高数考试作弊检讨书
2014/12/14 职场文书
为自己工作观后感
2015/06/11 职场文书
2015年教师个人业务工作总结
2015/10/23 职场文书
详解运行Python的神器Jupyter Notebook
2021/06/03 Python