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 相关文章推荐
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
Nov 30 Javascript
基于KMP算法JavaScript的实现方法分析
May 03 Javascript
jQuery Mobile操作HTML5的常用函数总结
May 17 Javascript
JavaScript设计模式之单体模式全面解析
Sep 09 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
Sep 18 Javascript
jQuery实现页面滚动时智能浮动定位
Jan 08 Javascript
利用 spin.js 生成等待效果(js 等待效果)
Jun 25 Javascript
微信小程序自定义组件
Aug 16 Javascript
AngularJs点击状态值改变背景色的实例
Dec 18 Javascript
用Fundebug插件记录网络请求异常的方法
Feb 21 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
Nov 23 Javascript
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
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分页类
2013/10/26 PHP
php遍历目录与文件夹的多种方法详解
2013/11/14 PHP
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
PHP7+Nginx的配置与安装教程详解
2016/05/10 PHP
php基于Redis消息队列实现的消息推送的方法
2018/11/28 PHP
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
javascript中使用css需要注意的地方小结
2010/09/01 Javascript
js精度溢出解决方案
2012/12/02 Javascript
jQuery图片的展开和收缩实现代码
2013/04/16 Javascript
jquery取消选择select下拉框示例代码
2014/02/22 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
Google 地图API资料整理及详细介绍
2016/08/06 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
2017/06/14 Javascript
详解微信小程序 登录获取unionid
2017/06/27 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
2018/02/26 Javascript
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
vue+iview使用树形控件的具体使用
2020/11/02 Javascript
nuxt 路由、过渡特效、中间件的实现代码
2020/11/06 Javascript
Django中更改默认数据库为mysql的方法示例
2018/12/05 Python
Python实现的企业粉丝抽奖功能示例
2019/07/26 Python
tensorboard实现同时显示训练曲线和测试曲线
2020/01/21 Python
python实现自动打卡的示例代码
2020/10/10 Python
美国家喻户晓的保健品品牌:Vitamin World(维他命世界)
2016/08/19 全球购物
EMU Australia澳大利亚官网:澳大利亚本土雪地靴品牌
2019/07/24 全球购物
初婚未育未抱养证明
2014/01/12 职场文书
信访工作者先进事迹
2014/01/17 职场文书
初中生期末评语大全
2014/04/24 职场文书
新闻编辑求职信
2014/07/13 职场文书
禁毒宣传活动总结
2014/08/26 职场文书
Django migrate报错的解决方案
2021/05/20 Python
Python音乐爬虫完美绕过反爬
2021/08/30 Python