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 相关文章推荐
jQuery 使用手册(四)
Sep 23 Javascript
Extjs学习过程中新手容易碰到的低级错误积累
Feb 11 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
May 26 Javascript
FireFox下XML对象转化成字符串的解决方法
Dec 09 Javascript
jquery判断至少有一个checkbox被选中的方法
Jun 05 Javascript
AngularJs基本特性解析(一)
Jul 21 Javascript
Node做中转服务器转发接口
Oct 18 Javascript
简单的vuex 的使用案例笔记
Apr 13 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
Aug 12 Javascript
解决vue 打包发布去#和页面空白的问题
Sep 04 Javascript
node实现分片下载的示例代码
Oct 17 Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 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 adodb连接mssql解决乱码问题
2009/06/12 PHP
函数中使用require_once问题深入探讨 优雅的配置文件定义方法推荐
2014/07/02 PHP
php判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
php提交post数组参数实例分析
2015/12/17 PHP
PHP解耦的三重境界(浅谈服务容器)
2017/03/13 PHP
Windows下php+mysql5.7配置教程
2017/05/16 PHP
PHP实现会员账号单唯一登录的方法分析
2019/03/07 PHP
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
2012/12/19 Javascript
js+html5实现canvas绘制椭圆形图案的方法
2016/05/21 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
Vuex简单入门
2017/04/19 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
2017/05/07 Javascript
easyui简介_动力节点Java学院整理
2017/07/14 Javascript
angular使用bootstrap方法手动启动的实例代码
2017/07/18 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
2017/09/20 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
2017/12/05 Javascript
实时监控input框,实现输入框与下拉框联动的实例
2018/01/23 Javascript
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
Python全局变量用法实例分析
2016/07/19 Python
python 编程之twisted详解及简单实例
2017/01/28 Python
解决PyCharm的Python.exe已经停止工作的问题
2018/11/29 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
Spring Boot中使用IntelliJ IDEA插件EasyCode一键生成代码详细方法
2020/03/20 Python
python 一维二维插值实例
2020/04/22 Python
python同时遍历两个list用法说明
2020/05/02 Python
建筑总经理岗位职责
2014/02/02 职场文书
《尊严》教学反思
2014/02/11 职场文书
股份合作协议书
2014/04/12 职场文书
新农村建设汇报材料
2014/08/15 职场文书
弄虚作假心得体会
2014/09/10 职场文书
郭明义电影观后感
2015/06/08 职场文书
驾驶员管理制度范本
2015/08/06 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
使用golang编写一个并发工作队列
2021/05/08 Golang