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基础第一章 JavaScript与用户端
Jul 22 Javascript
js获取URL的参数的方法(getQueryString)示例
Sep 29 Javascript
JavaScript中switch判断容易犯错的一个细节
Aug 27 Javascript
javascript省市级联功能实现方法实例详解
Oct 20 Javascript
jquery 动态增加删除行的简单实例(推荐)
Oct 12 Javascript
微信小程序中使用ECharts 异步加载数据的方法
Jun 27 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
Apr 10 Javascript
vue+element实现表格新增、编辑、删除功能
May 28 Javascript
vue + typescript + 极验登录验证的实现方法
Jun 27 Javascript
vue v-for 使用问题整理小结
Aug 04 Javascript
Layui给switch添加响应事件的例子
Sep 03 Javascript
Vue-CLI与Vuex使用方法实例分析
Jan 06 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
一个简单的MySQL数据浏览器
2006/10/09 PHP
利用php+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
解析二进制流接口应用实例 pack、unpack、ord 函数使用方法
2013/06/18 PHP
php调用c接口无错版介绍
2014/03/11 PHP
DEDE实现转跳属性文档在模板上调用出转跳地址
2016/11/04 PHP
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
PHP实现的日历功能示例
2018/09/01 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
JQuery的ajax获取数据后的处理总结(html,xml,json)
2010/07/14 Javascript
jQuery右键菜单contextMenu使用实例
2011/09/28 Javascript
js拦截alert对话框另类应用
2013/01/16 Javascript
js判断undefined类型示例代码
2014/02/10 Javascript
jquery统计用户选中的复选框的个数
2014/06/06 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
2018/08/15 Javascript
vue初始化动画加载的实例
2018/09/01 Javascript
jQuery each和js forEach用法比较
2019/02/27 jQuery
你不可不知的Vue.js列表渲染详解
2019/10/01 Javascript
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
python实现根据文件关键字进行切分为多个文件的示例
2018/12/10 Python
python 通过麦克风录音 生成wav文件的方法
2019/01/09 Python
Python3多线程版TCP端口扫描器
2019/08/31 Python
python并发爬虫实用工具tomorrow实用解析
2019/09/25 Python
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
2013/01/31 HTML / CSS
英国书籍、CD、DVD和游戏的第一道德零售商:Awesome Books
2020/02/22 全球购物
出纳担保书范文
2014/04/02 职场文书
《大江保卫战》教学反思
2014/04/11 职场文书
物理学专业求职信
2014/07/04 职场文书
平安工地汇报材料
2014/08/19 职场文书
给老婆的检讨书1000字
2015/01/01 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书
Apache压力测试工具的安装使用
2021/03/31 Servers
Spring Security中用JWT退出登录时遇到的坑
2021/10/16 Java/Android
如何利用golang运用mysql数据库
2022/03/13 Golang
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫