[label][JavaScript]闭包阅读笔记
原文链接来源:
当嵌套函数在被嵌套函数之外调用的时候,就形成了闭包。 (By nowmagic)
// 函数内部可以直接读取全局变量
var n = 999;
function f1() {
alert(n);
}
f1(); // 999
// 函数外部无法读取函数内部的变量,主义函数内部声明变量的时候,一定要使用var。
// 如果不用,则相当于声明了一个全局变量。
function f2() {
var n = 999;
}
alert(n);
// FF: ReferenceError: n is not defined
// Chrome: Uncaught ReferenceError: n is not defined
// IE8: n is undefined
// 如果函数内部不使用var来声明变量,那么相当于声明了一个全局变量。
function f3() {
n = 999;
}
f3(); //
alert(n);
// 不声明全局变量,我们要如何才能读取函数内部的变量呢?
// 一个变通的方法就是,在函数的内部,再定义一个函数。
function f4() {
var n = 999;
function f5() {
alert(n); // 999
}
f5();
}
f4();
/*
函数f5就被包括在函数f4内部,这时f4内部的所有局部变来那个,对f5都是可见的。但是反过来就不行,f5内部的局部变量,对f4是不可见的。这就是JavaScript语言特有的“链式作用域”结构(chain scope),子对象会一级一级地向上寻找所有父对象的变量。所以,父对象的所有变量,对子对象都是可见的,反之则不成立。
*/
// 既然f5可以读取f4中的局部变量,那么只要把f5作为返回值,我们不就可以在f4外部读取它的内部变量了吗?
function f4() {
var n = 999;
function f5() {
alert(n);
}
return f5;
}
var result = f4();
result();
// 上面代码中的f5函数,就是闭包。
// 闭包就是能够读取其他函数内部变量的函数。
// 由于在JavaScript语言中,只有函数内部的字函数才能读取局部变量,因此可以把闭包简单理解成“定义在一个函数内部的函数”。
// 所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。
// 闭包的最大用途,一个是可以读取函数内部的变量,另一个是让这些变量的值始终保存在内存中。
function f6() {
var n = 999;
nAdd = function() {
n+=1;
console.log(this);// Object window
};
function f7(){
alert(n);
console.log(this); // Object window
}
return f7;
}
var result = f6();
result(); // 999
nAdd();
result(); // 1000
// result实际上就是闭包函数f7,它一共运行两次,第一次的值为999,第二次的值是1000。这证明了,函数f6中的局部变量n
// 一直保存在内存中,并没有在f1调用结束后被自动清除。
// 为什么会这样呢?原因在于f6是f7的父函数,而f7被赋值给一个全局变量,这导致f7始终在内存中,而f7的存在依赖于f6,因此
// f6也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage collection)回收。
// JavaScript垃圾回收机制(garbage collection)规则就是:不会再被对象调用的。
// nAdd前面没有使用var关键字,因此nAdd是一个全局变量,而不是局部变量。其次,nAdd的值
//是一个匿名函数(anonymous function),这个函数本身也是一个闭包。
// nAdd的作用相当于一个setter,可以在函数外部对函数内部的变量进行操作。
// 使用闭包的注意点:
// 1. 函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用,解决办法是,在退出函数之前,将不使用的局部变量全部删除。
// 2. 闭包会在父函数外部,改变父函数内部变量的值。如果把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method)
// 把内部变来那个当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。
var name = 'The Window';
var obj = {
name: 'My Object',
getNameFunc: function() {
return function() {
return this.name;
}
}
}
alert(obj.getNameFunc()());
// 调用getNameFun方法对象是obj,返回匿名函数(anonymous function)作为一个
// 全局变量,它的调用对象是window,所以输出为 "The Window"
var name = 'The Window';
var obj = {
name: 'My Object',
getNameFunc: function() {
var that = this;
return function() {
return that.name;
}
}
}
alert(obj.getNameFunc()()); // Output: My Object
[label][JavaScript]闭包阅读笔记的更多相关文章
- JavaScript闭包学习笔记
此文都是大牛们关于闭包的观点,在此只是总结. 闭包应用的两种情况即可——函数作为返回值,函数作为参数传递. 1 深入理解javascript原型和闭包 判断一个变量是不是对象非常简单.值类型的类型判断 ...
- <<Javascript Patterns>>阅读笔记 -- 第2章 基本技巧(一)
第一次写这种东西, 有些生涩和蹩脚, 也是为了自己在表达或是总结方面有所提高, 同时为看过的东西留个痕迹, 以便日后查阅. 有错误或是不妥的地方, 还望各位指正, 谢谢! 第1章 简介 本章主要介绍了 ...
- <<Javascript Patterns>>阅读笔记 -- 第2章 基本技巧(二)
关于for-in循环 循环数据时, 强烈不推荐使用for-in循环.因为当Array对象被扩展后, 再用for-in循环遍历数据会导致逻辑上的错误, 举例说明: var arr = ['a', 'b' ...
- <<Javascript Patterns>>阅读笔记 – 第3章 字面量和构造函数
对象字面量 首先给出对象字面量的定义语法: 1. 将对象定义在一对括号中(左大括号“{”和右大括号”}”) 2. 对象中以逗号分隔属性和方法. 每个属性或方法以key-value的形式出现, key和 ...
- javascript高级程序设计阅读笔记(一)
javascript高级程序设计阅读笔记(一) 工作之余开发些web应用作为兴趣,在交互方面需要掌握javascript和css.HTML5等技术,因此读书笔记是必要的. javascript简介 J ...
- JavaScript高级程序设计 - 阅读笔记
[本博客为原创:http://www.cnblogs.com/HeavenBin/] 前言: 大致花费了一个星期的时间把这本书认真看了半本,下面是我做的阅读笔记,希望能够让看这本书的人有个大致的参考. ...
- 阅读笔记《JavaScript语言精粹》
阅读笔记<JavaScript语言精粹> 对象 1.检索属性 使用[]和. 2.引用传递 JavaScript的简单数据类型包括数字.字符串.布尔值.null值和undefined值.其它 ...
- 昼猫笔记 JavaScript -- 闭包
本次主要内容是 闭包 阅读时间: 约 3分钟 记得点个赞支持支持我哦 初步了解 先看下代码,输出结果是多少? function fn1 () { var a = 2 function fn2 () ...
- javascript闭包获取table中tr的索引 分类: JavaScript 2015-05-04 15:10 793人阅读 评论(0) 收藏
使用javascript闭包获取table标签中tr的索引 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...
随机推荐
- [DP题]登山
描述 五一到了,PKU-ACM队组织大家去登山观光,队员们发现山上一个有N个景点,并且决定按照顺序来浏览这些景点,即每次所浏览景点的编号都要大于前一个浏览景点的编号.同时队员们还有另一个登山习惯,就是 ...
- Java-Runoob-高级教程-实例-字符串:05. Java 实例 - 字符串反转
ylbtech-Java-Runoob-高级教程-实例-字符串:05. Java 实例 - 字符串反转 1.返回顶部 1. Java 实例 - 字符串反转 Java 实例 以下实例演示了如何使用 J ...
- Bootstrap-CL:页面标题
ylbtech-Bootstrap-CL:页面标题 1.返回顶部 1. Bootstrap 页面标题(Page Header) 页面标题(Page Header)是个不错的功能,它会在网页标题四周添加 ...
- Bootstrap-CL:分页
ylbtech-Bootstrap-CL:分页 1.返回顶部 1. Bootstrap 分页 本章将讲解 Bootstrap 支持的分页特性.分页(Pagination),是一种无序列表,Bootst ...
- Educational Codeforces Round 37-F.SUM and REPLACE题解
一.题目 二.题目链接 http://codeforces.com/contest/920/problem/F 三.题意 给定$N$个范围在$[1, 1e6)$的数字和$M$个操作.操作有两种类型: ...
- javascript的propertyIsEnumerable()方法
/* propertyIsEnumerable()是用来检测属性是否属于某个对象的,如果检测到了,返回true,否则返回false. 1.这个属性必须属于实例的,并且不属于原型. 2.这个属性必须是可 ...
- centos使用163 yum源
备份# cp /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.bak修改# vi /etc/yum.repos ...
- Solr Facet 统计查询
一)概述 Facet是solr的高级搜索功能之一,可以给用户提供更友好的搜索体验.在搜索关键字的同时,能够按照Facet的字段进行分组并统计.例如下图所示,你上淘宝,输入“电脑”进行搜索,就会出现品牌 ...
- Rhythmk 一步一步学 JAVA (20) JAVA enum常用方法
JAVA 枚举定义常用方法: 1.static Enum valueOf(Class enum,String name) 返回指定name的枚举类型 2.Static Enum values[] 返回 ...
- JS判断不能为空实例代码
JS判断不能为空实例代码.分享在此. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " ...