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 不只是脚本
May 30 Javascript
Tab页界面,用jQuery及Ajax技术实现
Sep 21 Javascript
js中关于String对象的replace使用详解
May 24 Javascript
javascript中的绑定与解绑函数应用示例
Jun 24 Javascript
js为数字添加逗号并格式化数字的代码
Aug 23 Javascript
jQuery使用post方法提交数据实例
Mar 25 Javascript
JQuery实现可直接编辑的表格
Apr 16 Javascript
ES6中class类用法实例浅析
Apr 06 Javascript
深入理解Vue.js源码之事件机制
Sep 27 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
Nov 27 Javascript
Vue中的作用域CSS和CSS模块的区别
Oct 09 Javascript
node.js express框架简介与实现
Jul 23 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/04/16 PHP
php将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
php使用正则表达式获取图片url的方法
2015/01/16 PHP
php根据生日计算年龄的方法
2015/07/13 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
2017/02/04 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
2015/04/03 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
使用javascript插入样式
2016/03/14 Javascript
详解Vue生命周期的示例
2017/03/10 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
2017/11/18 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
2017/12/11 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
2018/02/22 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
webpack的tree shaking的实现方法
2019/09/18 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
2020/07/18 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
关于element的表单组件整理笔记
2021/02/05 Javascript
Python中文字符串截取问题
2015/06/15 Python
python负载均衡的简单实现方法
2018/02/04 Python
详解flask入门模板引擎
2018/07/18 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
Pytorch实现基于CharRNN的文本分类与生成示例
2020/01/08 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
妇产医师自荐信
2014/01/29 职场文书
承诺书怎么写
2014/03/26 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
2014年初级职称工作总结
2014/12/08 职场文书
五年级学生期末评语
2014/12/26 职场文书
学历证明范文
2015/06/16 职场文书
大学文艺委员竞选稿
2015/11/19 职场文书