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 相关文章推荐
javascript定义函数的方法
Dec 06 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
Apr 30 Javascript
javascript删除元素节点removeChild()用法实例
May 26 Javascript
JS拖拽组件学习使用
Jan 19 Javascript
javaScript知识点总结(必看篇)
Jun 10 Javascript
JS调用某段SQL语句的方法
Oct 20 Javascript
jquery easyui DataGrid简单示例
Jan 23 Javascript
ES6新数据结构Map功能与用法示例
Mar 31 Javascript
JS正则获取HTML元素的方法
Mar 31 Javascript
JS实现显示当前日期的实例代码
Jul 03 Javascript
JavaScript解析机制与闭包原理实例详解
Mar 08 Javascript
js+canvas实现两张图片合并成一张图片的方法
Nov 01 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
PHP函数之日期时间函数date()使用详解
2013/09/09 PHP
5种PHP创建数组的实例代码分享
2014/01/17 PHP
使用php语句将数据库*.sql文件导入数据库
2014/05/05 PHP
php随机取mysql记录方法小结
2014/12/27 PHP
PHP扩展开发教程(总结)
2015/11/04 PHP
javascript编程起步(第七课)
2007/01/10 Javascript
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
javascript 带有滚动条的表格,标题固定,带排序功能.
2009/11/13 Javascript
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
2012/02/03 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
利用毫秒减值计算时长的js代码
2013/09/22 Javascript
JS控制伪元素的方法汇总
2016/04/06 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
2017/05/17 jQuery
JS实现字符串翻转的方法分析
2018/08/31 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
2018/09/20 jQuery
Web安全之XSS攻击与防御小结
2018/12/13 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
Python实现给文件添加内容及得到文件信息的方法
2015/05/28 Python
Python Socket实现简单TCP Server/client功能示例
2017/08/05 Python
PyQt5实现简易计算器
2020/05/30 Python
详解将Pandas中的DataFrame类型转换成Numpy中array类型的三种方法
2019/07/06 Python
Python使用字典实现的简单记事本功能示例
2019/08/15 Python
python 制作python包,封装成可用模块教程
2020/07/13 Python
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
日本即尚网:JSHOPPERS.com(支持中文)
2019/12/03 全球购物
阿迪达斯印尼官方网站:adidas印尼
2020/02/10 全球购物
Ruby中的保护方法和私有方法与一般面向对象程序设计语言的一样吗
2013/05/01 面试题
家佳咖啡店创业计划书
2013/12/27 职场文书
代理人委托书
2014/09/16 职场文书
村党支部对照检查材料思想汇报
2014/09/28 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书