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 相关文章推荐
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
Jquery实战_读书笔记2 选择器
Jan 22 Javascript
jQuery学习笔记[1] jQuery中的DOM操作
Dec 03 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
Jun 05 Javascript
Bootstrap基本组件学习笔记之面板(14)
Dec 08 Javascript
js判断一个字符串是以某个字符串开头的简单实例
Dec 27 Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 Javascript
jQuery中绑定事件bind() on() live() one()的异同
Feb 23 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
Oct 09 Javascript
微信小程序 动画的简单实例
Oct 12 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
js实现列表向上无限滚动
Jan 13 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
NT IIS下用ODBC连接数据库
2006/10/09 PHP
PHP使用pdo实现事务处理操作示例
2018/09/05 PHP
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
2013/06/05 Javascript
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
js实现大转盘抽奖游戏实例
2015/06/24 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
vue watch关于对象内的属性监听
2019/04/22 Javascript
百度小程序自定义通用toast组件
2019/07/17 Javascript
JavaScript观察者模式原理与用法实例详解
2020/03/10 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
2020/07/26 Javascript
详解vue v-model
2020/08/31 Javascript
解决vue项目 build之后资源文件找不到的问题
2020/09/12 Javascript
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
sqlalchemy对象转dict的示例
2014/04/22 Python
Python中的time模块与datetime模块用法总结
2016/06/30 Python
Python存取XML的常见方法实例分析
2017/03/21 Python
python爬虫爬取淘宝商品信息
2018/02/23 Python
python使用Pandas库提升项目的运行速度过程详解
2019/07/12 Python
Python实现随机取一个矩阵数组的某几行
2019/11/26 Python
python中的 zip函数详解及用法举例
2020/02/16 Python
深入浅析python变量加逗号,的含义
2020/02/22 Python
如何使用python socket模块实现简单的文件下载
2020/09/04 Python
武汉东之林科技有限公司机试
2013/09/17 面试题
历史专业大学生职业生涯规划书
2014/03/13 职场文书
《将心比心》教学反思
2014/04/08 职场文书
教室标语大全
2014/06/21 职场文书
关于读书的演讲稿600字
2014/08/27 职场文书
2014年爱国卫生工作总结
2014/11/22 职场文书
2015年小学辅导员工作总结
2015/05/27 职场文书
PHP解决高并发问题
2021/04/01 PHP