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 相关文章推荐
js常用代码段整理
Nov 30 Javascript
javascript闭包的高级使用方法实例
Jul 04 Javascript
用JS做的简单的可折叠的两级树形菜单
Sep 21 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
Oct 22 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
Bootstrap CSS布局之表单
Dec 17 Javascript
Vue中的$set的使用实例代码
Oct 08 Javascript
用npm-run实现自动化任务的方法示例
Jan 14 Javascript
详解基于React.js和Node.js的SSR实现方案
Mar 21 Javascript
Angular CLI 使用教程指南参考小结
Apr 10 Javascript
详解jQuery设置内容和属性
Apr 11 jQuery
解决echarts中横坐标值显示不全(自动隐藏)问题
Jul 20 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下正则来匹配dede模板标签的代码
2010/08/21 PHP
Yii2使用自带的UploadedFile实现的文件上传
2016/06/20 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
jQuery 1.0.4 - New Wave Javascript(js源文件)
2007/01/15 Javascript
asp批量修改记录的代码
2008/06/25 Javascript
Javascript 模式实例 观察者模式
2009/10/24 Javascript
弹出最简单的模式化遮罩层的js代码
2013/12/04 Javascript
Javascript基础教程之数据类型转换
2015/01/18 Javascript
JS控制网页动态生成任意行列数表格的方法
2015/03/09 Javascript
解决js图片加载时出现404的问题
2020/11/30 Javascript
javascript实现随机显示星星特效
2016/01/28 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
2016/09/26 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
React降级配置及Ant Design配置详解
2018/12/27 Javascript
[01:03]悬念揭晓 11月26日DOTA2完美盛典不见不散
2017/11/23 DOTA
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
[48:24]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第一场 12.09
2020/12/12 DOTA
Python中方法链的使用方法
2016/02/23 Python
shelve  用来持久化任意的Python对象实例代码
2016/10/12 Python
Python利用itchat对微信中好友数据实现简单分析的方法
2017/11/21 Python
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
Python实现的逻辑回归算法示例【附测试csv文件下载】
2018/12/28 Python
Python代码一键转Jar包及Java调用Python新姿势
2020/03/10 Python
通过自学python能找到工作吗
2020/06/21 Python
python设置中文界面实例方法
2020/10/27 Python
纯CSS3打造属于自己的“小黄人”
2016/03/14 HTML / CSS
HTML5的新特性(1)
2016/03/03 HTML / CSS
研究生自荐信
2013/10/09 职场文书
区优秀教师事迹材料
2014/02/10 职场文书
竞选演讲稿范文大全
2014/05/12 职场文书
医院见习总结
2015/06/24 职场文书
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技