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 相关文章推荐
2010年最佳jQuery插件整理
Dec 06 Javascript
js为空或不是对象问题的快速解决方法
Dec 11 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 Javascript
jQuery实现跟随鼠标运动图层效果的方法
Feb 02 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
Mar 26 Javascript
Angular.js回顾ng-app和ng-model使用技巧
Apr 26 Javascript
Bootstrap编写导航栏和登陆框
May 30 Javascript
完美的js div拖拽实例代码
Sep 24 Javascript
vue数字类型过滤器的示例代码
Sep 07 Javascript
webpack实用小功能介绍
Jan 02 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
Aug 22 Javascript
浅谈Vue为什么不能检测数组变动
Oct 14 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数组中包含中文的排序方法
2014/06/03 PHP
大家须知简单的php性能优化注意点
2016/01/04 PHP
jquery乱码与contentType属性设置问题解决方案
2013/01/07 Javascript
jquery 列表双向选择器之改进版
2013/08/09 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
javascript基本类型详解
2014/11/28 Javascript
推荐一款jQuery插件模板
2015/01/09 Javascript
使用jQuery处理AJAX请求的基础学习教程
2016/05/10 Javascript
vue中如何引入jQuery和Bootstrap
2017/04/10 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017/07/19 jQuery
解决Mac安装thrift因bison报错的问题
2018/05/17 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
2018/09/15 Javascript
基于vue和react的spa进行按需加载的实现方法
2018/09/29 Javascript
详解vuex commit保存数据技巧
2018/12/25 Javascript
vue响应式系统之observe、watcher、dep的源码解析
2019/04/09 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
2019/11/05 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
vue项目实现图片上传功能
2019/12/23 Javascript
go和python调用其它程序并得到程序输出
2014/02/10 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
python+numpy+matplotalib实现梯度下降法
2018/08/31 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
Python解压 rar、zip、tar文件的方法
2019/11/19 Python
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
英国最大的线上保健品零售商之一:Vitamin Planet
2016/12/01 全球购物
JOSEPH官网:英国奢侈时尚品牌
2018/01/31 全球购物
JAVA代码查错题
2014/10/10 面试题
Linux如何压缩可执行文件
2014/03/27 面试题
廉洁自律承诺书
2014/03/27 职场文书
《冬阳童年骆驼队》教学反思
2014/04/15 职场文书
办公室主任岗位承诺书
2014/05/29 职场文书
离婚起诉书范文2015
2015/05/19 职场文书
庆七一晚会主持词
2015/06/30 职场文书
领导离职感言
2015/08/03 职场文书
浅谈redis五大数据结构和使用场景
2021/04/12 Redis
mybatis使用oracle进行添加数据的方法
2021/04/27 Oracle