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 相关文章推荐
默认让页面的第一个控件选中的javascript代码
Dec 26 Javascript
javascript实现简单的Map示例介绍
Dec 23 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 Javascript
js中跨域方法原理详解
Jul 19 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
Nov 05 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
May 14 Javascript
p5.js临摹动态图形实现方法详解
Oct 23 Javascript
node+vue实现文件上传功能
May 28 Javascript
JavaScript实现显示和隐藏图片
Apr 29 Javascript
JavaScript原型链中函数和对象的理解
Jun 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
php中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
php cli 方式 在crotab中运行解决
2010/02/08 PHP
php imagecreatetruecolor 创建高清和透明图片代码小结
2010/05/15 PHP
php实现在站点里面添加邮件发送的功能
2020/04/28 PHP
Yii中的cookie的发送和读取
2016/07/27 PHP
Javascript 同时提交多个Web表单的方法
2009/02/19 Javascript
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
2009/04/10 Javascript
jquery中动态效果小结
2010/12/16 Javascript
Knockout visible绑定使用方法
2013/11/15 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
2015/03/24 Javascript
基于MVC方式实现三级联动(JavaScript)
2017/01/23 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
2017/10/24 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
详解React 服务端渲染方案完美的解决方案
2018/12/14 Javascript
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
Python中SOAP项目的介绍及其在web开发中的应用
2015/04/14 Python
python中的代码编码格式转换问题
2015/06/10 Python
Python正则表达式教程之一:基础篇
2017/03/02 Python
Python自动发邮件脚本
2017/03/31 Python
[原创]教女朋友学Python3(二)简单的输入输出及内置函数查看
2017/11/30 Python
python处理DICOM并计算三维模型体积
2019/02/26 Python
python导入pandas具体步骤方法
2019/06/23 Python
Python将字典转换为XML的方法
2020/08/01 Python
借助HTML5 Canvas API制作一个简单的猜字游戏
2016/03/25 HTML / CSS
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
亚洲最大旅游体验平台:KKday
2017/10/21 全球购物
临床医学专业毕业生的自我评价
2013/10/17 职场文书
小学防溺水制度
2014/01/29 职场文书
办公自动化毕业生求职信
2014/03/09 职场文书
我心目中的好老师活动方案
2014/08/19 职场文书
综合素质自我评价怎么写
2014/09/14 职场文书
成本会计岗位职责
2015/02/03 职场文书
应届毕业生自荐信
2015/03/04 职场文书
校运会通讯稿
2015/07/18 职场文书
python简单验证码识别的实现过程
2021/06/20 Python