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 支持链式调用的异步调用框架Async.Operation
Aug 04 Javascript
JavaScript 轻松搞定快捷留言功能 只需一行代码
Apr 01 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
Dec 23 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
Oct 28 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
Nov 30 Javascript
Canvas 绘制粒子动画背景
Feb 15 Javascript
ng2学习笔记之bootstrap中的component使用教程
Mar 09 Javascript
Angularjs 实现动态添加控件功能
May 25 Javascript
Node.js 回调函数实例详解
Jul 06 Javascript
js实现全选反选不选功能代码详解
Apr 24 Javascript
JavaScript键盘事件响应顺序详解
Sep 30 Javascript
深入理解Vue的数据响应式
May 15 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
图形数字验证代码
2006/10/09 PHP
php配合jquery实现增删操作具体实例
2013/12/12 PHP
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
php swoole多进程/多线程用法示例【基于php7nts版】
2019/08/12 PHP
如何用js控制frame的隐藏或显示的解决办法
2013/03/20 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
jQuery多个input求和的实现方法
2015/02/12 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
jQuery移动web开发中的页面初始化与加载事件
2015/12/03 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
vue使用Axios做ajax请求详解
2017/06/07 Javascript
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
浅谈react性能优化的方法
2018/09/05 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
详解nuxt路由鉴权(express模板)
2018/11/21 Javascript
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
vue.js实现三级菜单效果
2019/10/19 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
Python实现抓取HTML网页并以PDF文件形式保存的方法
2018/05/08 Python
python pcm音频添加头转成Wav格式文件的方法
2019/01/09 Python
selenium+Chrome滑动验证码破解二(某某网站)
2019/12/17 Python
python获取引用对象的个数方式
2019/12/20 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
python实现简单的井字棋游戏(gui界面)
2021/01/22 Python
Python使用cn2an实现中文数字与阿拉伯数字的相互转换
2021/03/02 Python
美国销售第一的智能手机和平板电脑保护壳:OtterBox
2017/12/21 全球购物
小米旗下精品生活电商平台:小米有品
2018/12/18 全球购物
Farfetch美国:奢侈品牌时尚购物平台
2019/05/02 全球购物
关于毕业的广播稿
2014/01/10 职场文书
避暑山庄导游词
2015/02/04 职场文书
慰问信范文
2015/02/14 职场文书
离婚案件答辩状
2015/05/22 职场文书
考生诚信考试承诺书(2016版)
2016/03/25 职场文书
诚信高考倡议书
2019/06/24 职场文书