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的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 Javascript
javascript中数组中求最大值示例代码
Dec 18 Javascript
JavaScript操作XML文件之XML读取方法
Jun 09 Javascript
js判断子窗体是否关闭的方法
Aug 11 Javascript
jquery实现的3D旋转木马特效代码分享
Aug 25 Javascript
JS跨域解决方案之使用CORS实现跨域
Apr 14 Javascript
第九篇Bootstrap导航菜单创建步骤详解
Jun 21 Javascript
js学习总结之dom2级事件基础知识详解
Jul 27 Javascript
vue 组件 全局注册和局部注册的实现
Feb 28 Javascript
layui的table中显示图片方法
Aug 17 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 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
水质对咖图啡风味的影响具体有哪些
2021/03/03 冲泡冲煮
关于shopex同步ucenter的redirect问题,导致script不运行
2013/04/10 PHP
PHP判断FORM表单或URL参数来的数据是否为整数的方法
2016/03/25 PHP
php和redis实现秒杀活动的流程
2019/07/17 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
a标签的css样式四个状态
2021/03/09 HTML / CSS
FF火狐下获取一个元素同类型的相邻元素实现代码
2012/12/15 Javascript
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
JS实现图片放大镜效果的方法
2015/02/27 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
使用 vue-i18n 切换中英文效果
2018/05/23 Javascript
详解Vue源码之数据的代理访问
2018/12/11 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
2019/03/07 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
2020/04/22 Javascript
微信小程序实现底部弹出模态框
2020/11/18 Javascript
Python for Informatics 第11章之正则表达式(二)
2016/04/21 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
python 解决Windows平台上路径有空格的问题
2020/11/10 Python
Web前端页面跳转并取到值
2017/04/24 HTML / CSS
英国手工布艺沙发在线购买:Sofas & Stuff
2018/03/02 全球购物
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
Hotels.com越南:酒店预订
2019/10/29 全球购物
中职生自荐信
2013/10/13 职场文书
高一自我鉴定
2013/12/17 职场文书
信息总监管理职责范本
2014/03/08 职场文书
招股说明书范本
2014/05/06 职场文书
优秀大学生自荐信
2014/06/09 职场文书
党员个人整改方案及措施
2014/10/25 职场文书
幼儿园法制宣传日活动总结
2014/11/01 职场文书
思想品德评语大全
2014/12/31 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python
golang如何去除多余空白字符(含制表符)
2021/04/25 Golang