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判断单选框或复选框是否选中方法集锦
Apr 04 Javascript
RGB颜色值转HTML十六进制(HEX)代码的JS函数
Apr 25 Javascript
js字符串转换成xml对象并使用技巧解读
Apr 18 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
Feb 08 Javascript
详解AngularJS中的filter过滤器用法
Jan 04 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
Jun 12 Javascript
浅谈JavaScript for循环 闭包
Jun 22 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 Javascript
jQuery选择器之子元素选择器详解
Sep 18 jQuery
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
Jul 24 Javascript
JS面向对象编程实现的拖拽功能案例详解
Mar 03 Javascript
Vue使用轮询定时发送请求代码
Aug 10 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访问MYSQL数据库封装类(附函数说明)
2010/12/04 PHP
php post大量数据时发现数据丢失问题解决方法
2015/06/20 PHP
php常用的工具开发整理
2019/09/26 PHP
php中数组最简单的使用方法
2020/12/27 PHP
用JavaScript调用WebService的示例
2008/04/07 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
Extjs4中的分页应用结合前后台
2013/12/13 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
AngularJS入门教程之REST和定制服务详解
2016/08/19 Javascript
JavaScript仿网易选项卡制作代码
2016/10/06 Javascript
layui 设置table 行的高度方法
2018/08/17 Javascript
vue中render函数的使用详解
2018/10/12 Javascript
vue $mount 和 el的区别说明
2020/09/11 Javascript
Python使用PyCrypto实现AES加密功能示例
2017/05/22 Python
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
Python3使用TCP编写一个简易的文件下载器功能
2019/05/08 Python
获取django框架orm query执行的sql语句实现方法分析
2019/06/20 Python
python调用其他文件函数或类的示例
2019/07/16 Python
解决django FileFIELD的编码问题
2020/03/30 Python
Python读取yaml文件的详细教程
2020/07/21 Python
scrapy利用selenium爬取豆瓣阅读的全步骤
2020/09/20 Python
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
经济实惠的豪华家具:My-Furniture
2019/03/12 全球购物
J2EE中的容器都包括哪些
2013/08/21 面试题
专科文秘应届生求职信
2013/11/18 职场文书
中式结婚主持词
2014/03/14 职场文书
小学生暑假家长评语
2014/04/17 职场文书
小学生读书笔记
2015/07/01 职场文书
MySQL查询学习之基础查询操作
2021/05/08 MySQL
超详细Python解释器新手安装教程
2021/05/10 Python
如何利用Matlab制作一款真正的拼图小游戏
2021/05/11 Python
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers
Nginx如何配置根据路径转发详解
2022/07/23 Servers