一、this易错分析

在学习闭包的时候,有一个概念this很重要,关于this的理解,下面3种情况:this指向谁?

fn.call(obj1);
obj2.fn()
fn()

答案是obj1 obj2 window

判断this的指向有3条规则:

执行函数的过程中肯定存在两方,一方是调用函数的人caller,一方是被调用的人callee,callee永远是函数fn,caller遵循以下的规范:

  • fn.call(xxx) fn.apply(xxx)的时候,this永远指向xxx
  • ooo.fn()或者ooo['fn']()的时候,this永远指向ooo
  • fn()的时候this指向window
    所以针对上面代码:
  1. call/apply的作用是改变函数的调用者,或者说是改成this,改变this为 call /apply的第一个参数

  2. 一个函数没人调用的时候,相当于window调用了他

  3. 函数中除去this和arguments的其它变量,均遵守闭包规则,闭包的位置永远是函数定义的位置。

二、闭包易错代码分析

下面看两个代码实例,它们来源于阮一峰的文章闭包讲解。

 var name = "The Window";var object = {name : "My Object",getNameFunc : function(){return function(){return this.name;};}};alert(object.getNameFunc()());

返回结果是:

the window

分析:

alert(object.getNameFunc()());

这个里面有2个括号,要分析两次,把语句拆开:
第一步:var fn = object.getNameFunc();这时执行getNameFunc的时候,this是object,第一次return返回:function(){return this.name;}
第二步fn(),这时候函数由于没有调用者,根据规则3,函数的this ->window,这个函数里面的this.name实际上是window.name

var name = "The Window";var object = {name : "My Object",getNameFunc : function(){var that = this;return function(){return that.name;};}};alert(object.getNameFunc());
返回结果:My Object

分析

同样分成两步执行:
第一步执行:var fn = object.getNameFunc();这个时候,this指向object,同时在函数执行的过程中,在getNameFunc所在的闭包内创建了变量that,that = this 所以that指向object,然后第二步执行fn(),这个时候由于没有作用对象,fn里面的this指向window,但是我们在这访问的是that.name,在fn里面没有找到叫that的东西,然后根据闭包规则找到fn的上一级闭包getNameFunc,我们发现在这有一个变量that,它指向object,所以that,name就是object.name,是my object

由此可见,闭包的概念更好理解了:

  1. 闭包就是函数的局部变量集合,只是这些局部变量在函数返回后会继续存在。
  2. 闭包就是就是函数的“堆栈”在函数返回后并不释放,我们也可以理解为这些函数堆栈并不在栈上分配而是在堆上分配
  3. 当在一个函数内定义另外一个函数就会产生闭包

简单来说,闭包就是在另一个作用域中保存了一份它从上一级函数或作用域取得的变量(键值对),而这些键值对是不会随上一级函数的执行完成而销毁。周爱民说得更清楚,闭包就是“属性表”,闭包就是一个数据块,闭包就是一个存放着“Name=Value”的对照表。就这么简单。但是,必须强调,闭包是一个运行期概念。有两个主要特点:

  • 作为一个函数变量的一个引用 - 当函数返回时,其处于激活状态。
  • 一个闭包就是当一个函数返回时,一个没有释放资源的栈区。

三、闭包的作用

  1. 可以读取函数内部的变量
  2. 让这些变量的值始终保持在内存中。

四、闭包的缺点

1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。
2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。

参考资料:
学习Javascript闭包:http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html
javascript的闭包:http://www.cnblogs.com/rubylouvre/archive/2009/07/24/1530074.html
JavaScript 闭包深入理解:http://www.jb51.net/article/18303.htm
理解 Javascript 的闭包:http://www.oschina.net/question/28_41112

转载于:https://www.cnblogs.com/QingFlye/p/4480952.html

ife task0003学习笔记(三):JavaScript闭包相关推荐

  1. Mr.J-- jQuery学习笔记(三十二)--jQuery属性操作源码封装

    扫码看专栏 jQuery的优点 jquery是JavaScript库,能够极大地简化JavaScript编程,能够更方便的处理DOM操作和进行Ajax交互 1.轻量级 JQuery非常轻巧 2.强大的 ...

  2. GEE (Google Earth Engine)最基础代码学习笔记三

    GEE (Google Earth Engine)代码学习笔记三 本次学习核心为:将JavaScript objects and primitives放入Earth Engine 容器传到服务器,并处 ...

  3. 【AngularJs学习笔记三】Grunt任务管理器

    为什么80%的码农都做不了架构师?>>>    #0 系列目录# AngularJs学习笔记 [AngularJs学习笔记一]Bower解决js的依赖管理 [AngularJs学习笔 ...

  4. J2EE学习笔记三:EJB基础概念和知识 收藏

    J2EE学习笔记三:EJB基础概念和知识 收藏 EJB正是J2EE的旗舰技术,因此俺直接跳到这一章来了,前面的几章都是讲Servlet和JSP以及JDBC的,俺都懂一些.那么EJB和通常我们所说的Ja ...

  5. tensorflow学习笔记(三十二):conv2d_transpose (解卷积)

    tensorflow学习笔记(三十二):conv2d_transpose ("解卷积") deconv解卷积,实际是叫做conv_transpose, conv_transpose ...

  6. Ethernet/IP 学习笔记三

    Ethernet/IP 学习笔记三 原文为硕士论文: 工业以太网Ethernet/IP扫描器的研发 知网网址: http://kns.cnki.net/KCMS/detail/detail.aspx? ...

  7. iView学习笔记(三):表格搜索,过滤及隐藏列操作

    iView学习笔记(三):表格搜索,过滤及隐藏某列操作 1.后端准备工作 环境说明 python版本:3.6.6 Django版本:1.11.8 数据库:MariaDB 5.5.60 新建Django ...

  8. 吴恩达《机器学习》学习笔记三——多变量线性回归

    吴恩达<机器学习>学习笔记三--多变量线性回归 一. 多元线性回归问题介绍 1.一些定义 2.假设函数 二. 多元梯度下降法 1. 梯度下降法实用技巧:特征缩放 2. 梯度下降法的学习率 ...

  9. Python基础学习笔记三

    Python基础学习笔记三 print和import print可以用,分割变量来输出 import copy import copy as co from copy import deepcopy ...

  10. MYSQL学习笔记三:日期和时间函数

    MYSQL学习笔记三:日期和时间函数 1. 获取当前日期的函数和获取当前时间的函数 /*获取当前日期的函数和获取当前时间的函数.将日期以'YYYY-MM-DD'或者'YYYYMMDD'格式返回 */ ...

最新文章

  1. 业务代码解构利器--SWAK
  2. linux 查看可执行文件动态链接库相关信息(转)
  3. 字典生成工具_CANOpen系列教程09_CANOpen对象字典
  4. host 'xx' is not allowed to connect to this MySql server
  5. centos7 最小化安装 无 ifconfig,netstat 的安装
  6. 人类一败涂地电脑版_《漫威复仇者联盟》帧数对比丨PS4《人类一败涂地》新地图上线...
  7. NYOJ 364 田忌赛马
  8. 括号匹配问题(九度教程第 26 题)
  9. UITableViewCell的选中时的颜色设置
  10. Eclipse的安装
  11. 《Python程序设计(第3版)》课后习题答案
  12. 车联网在智慧城市中的发展与应用
  13. Matlab Four-Wheel Drive Testbed
  14. 计算机桌面图标的使用,电脑桌面图标不见了怎么恢复 如何规范使用电脑
  15. wordpress友联_WordPress添加友情链接功能
  16. 美团leaf生成分布式唯一id
  17. 观点| 如何避免GitHub那样断网43秒瘫痪 24 个小时?
  18. Altium Designer10铺铜技巧小结
  19. C++:最小二乘法拟合直线
  20. 概率与数理统计学习图

热门文章

  1. 月薪三万,依然买不起房
  2. buuct 假如给我三天光明 misc_【习作园地】假如给我三天光明读后感
  3. element-ui组件dialog遇到form
  4. Divisibility题解
  5. HTML5:web socket 和 web worker
  6. PHP关于函数的参数问题
  7. 《程序是怎样跑起来的》第六章有感
  8. 【洛谷P1800】software_NOI导刊2010提高(06)
  9. 数据结构之队列java版
  10. App Icon 和 LaunchImage 尺寸