JS作用域闭包、预解释和this关键字综合实例解析


Posted in Javascript onDecember 16, 2016

本文实例分析了JS作用域闭包、预解释和this关键字。分享给大家供大家参考,具体如下:

var number = 2;
var obj = {number : 5,
  fn1 : ( function() {
  this.number *= 2;
  number=number*2;
  var number=3;
    return function() {
      this.number *= 2;
      number*=3;
      alert(number);
    }
  } )()
};
var fn1 = obj.fn1;
alert(number);
fn1();
obj.fn1();
alert(window.number);
alert(obj.number);

【解析】

1. fn1本身后面就有(),所以var fn1 = obj.fn1;时他已经被执行,但是里面的return function并没有被执行

2. alert(number);输出全局的number,本来是2,经过var fn1 = obj.fn1;后,相当于执行了

this.number *= 2;
number=number*2;
var number=3;

这三句话

注意:任何一个直接执行的匿名方法,他的this指向window

所以this.number *= 2;使得全局变量变成4,即输出4

而number=number*2;他是去看作用域块里的number,var number=3;作用域声明在先,但是没有赋值,所以number=number*2;这句话其实没用

3. 执行到fn1();就是执行fn1里面的return function,也就是这三句话

this.number *= 2;
number*=3;
alert(number);

这时候依然是个匿名方法,所以this.number *= 2;使得全局变量变为8,number*=3;去找作用域块里的number,外层定义number为3,所以alert(number);就是9,如果是alert(this.number);则指向全局变量,即输出8

4. obj.fn1();,依然执行fn1里面的return function,也就是这三句话

this.number *= 2;
number*=3;
alert(number);

但这时this指向obj,this.number *= 2;使得obj里的number变为10,number*=3;还是去找作用域块,由于上面变为9,所以这里就是27,alert(number);输出的是作用域块的number,即27,如果是alert(this.number);则指向obj的number,即输出10

5. alert(window.number);经过上面几轮,全局变量变为8(即执行obj.fn1();对全局变量无影响)

6. alert(obj.number);只有这句话obj.fn1();,改变了obj.number,所以输出10

(function(){
   var a=10;
  fn();
  function fn(){
    var a=a+10;
    console.log(a);
     return a;
  }
  console.log(a);
  console.log(fn()+10);
})();

fn函数里的a先被声明但是没有赋值,然后进行运算,他不会去找函数外面的同名变量,因为他已经在里面被声明了。一个不是数字的和数字进行运算,输出NaN

console.log(fn()+10);这句话要输出两个值:console.log(fn());和console.log(fn()+10);

结果:

NaN
10
NaN
NaN

如果题目改成

(function(){
  var a=10;
  fn();
  function fn(){
    a=a+10;
    console.log(a);
    return a;
  }
  console.log(a);
  console.log(fn()+10);
})();

结果:

20

20

30

40

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jquery中this的使用说明
Sep 06 Javascript
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
如何判断元素是否为HTMLElement元素
Dec 06 Javascript
JavaScript阻止回车提交表单的方法
Dec 30 Javascript
AngularJS教程之MVC体系结构详解
Aug 16 Javascript
js实现时间轴自动排列效果
Mar 09 Javascript
Taro集成Redux快速上手的方法示例
Jun 21 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
Vue 前端实现登陆拦截及axios 拦截器的使用
Jul 17 Javascript
Vue封装全局过滤器Filters的步骤
Sep 16 Javascript
JavaScript仿京东轮播图效果
Feb 25 Javascript
详解js的事件处理函数和动态创建html标记方法
Dec 16 #Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 #Javascript
JS限制条件补全问题实例分析
Dec 16 #Javascript
Node.js用readline模块实现输入输出
Dec 16 #Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 #Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
Dec 16 #Javascript
概述jQuery中的ajax方法
Dec 16 #Javascript
You might like
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
第七节--类的静态成员
2006/11/16 PHP
深入分析php之面向对象
2013/05/15 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
Laravel框架自定义验证过程实例分析
2019/02/01 PHP
thinkphp5框架扩展redis类方法示例
2019/05/06 PHP
js关闭子窗体刷新父窗体实现方法
2012/12/04 Javascript
html超链接打开窗口大小的方法
2013/03/05 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
删除javascript中注释语句的正则表达式
2014/06/11 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
JS比较两个数值的大小实例
2016/11/25 Javascript
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
vue v-model动态生成详解
2018/06/30 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
2018/08/30 Javascript
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
Vue分页效果与购物车功能
2019/12/13 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
分析python服务器拒绝服务攻击代码
2014/01/16 Python
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
python实现的简单FTP上传下载文件实例
2015/06/30 Python
Python+Opencv识别两张相似图片
2020/03/23 Python
Python输入二维数组方法
2018/04/13 Python
Python pyinotify模块实现对文档的实时监控功能方法
2018/10/13 Python
Python实现实时数据采集新型冠状病毒数据实例
2020/02/04 Python
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
Ibood荷兰:互联网每日最佳在线优惠
2019/02/28 全球购物
医务人员竞聘职务自我评价分享
2013/11/08 职场文书
《两个铁球同时着地》教学反思
2014/02/13 职场文书
大学军训感言600字
2014/02/25 职场文书
2015年求职自荐信范文
2015/03/04 职场文书
2015年乡镇安全生产工作总结
2015/05/19 职场文书
JS不要再到处使用绝对等于运算符了
2021/04/30 Javascript
Spring Bean是如何初始化的详解
2022/03/22 Java/Android