JavaScript.The.Good.Parts阅读笔记（二）作用域&闭包&减缓全局空间污染

如代码块


代码如下:

if (true) {
int i = 100;
}
print(i); //错误，变量i没有声明

如上面例子所示，代码块外的函数是无法访问i变量的。
但在javaScript里，情况则完全不同。


代码如下:

if (true) {
var i = 100;
}
alert(i); //弹出框并显示100

很多现代语言都推荐尽可能迟地声明变量，但在Javascript里这是一个最糟糕的建议。由于缺少块级作用域，最好在函数体的顶部声明函数中可能用到的所有变量。

闭包特性：
虽然缺少块级作用域，但是函数的作用域还是存在的。
这种作用域有一个好处，就是内部函数可以访问定义它们的外部函数的参数和变量（除了this和argument）。
利用这种特性，则可以这样来设计代码。


代码如下:

var bankAccount = function () {
var value = 0;
return {
deposit: function (inc) {
value += inc;
},
getValue: function (){
return value;
}
}
}

var myAccount = bankAccount(); //新开一个银行账户
myAccount.deposit(1000); //存1000块进去
alert(myAccount.getValue()); //should alert(1000);

value由于在bankAccount这个function里，外部无法对它进行直接操作，必须通过bankAccount function给他返回的对象来进行操作，通过这样来实现C#和java里的private的字段。

减缓全局变量污染全局空间：利用函数的作用域，我们在写js库的时候可以减少跟其他库冲突。


代码如下:

(function () {
var hello = 'Hello World.';
})();
alert(hello); //error: hello no exist.

这里的语法很有点诡异，主要思想是定义一个匿名方法，并且马上执行。由于function开头这个litertal会被解释作为函数定义，这里加上了一对括号包住它，然后再用一对括号表示调用此函数。外部的alert访问不到在函数内部定义的hello。

陷阱一：var的陷阱

“减缓全局变量污染全局空间”的例子改成


代码如下:

(function () {
hello = 'Hello World.'; //remove var
})();
alert(hello); //alert ('Hello World.');

当变量hello没有用var显式声明时，hello成为了一个全局变量！！

虽然利用这个特性，咱们可以提供一个对外接口，但不建议这样做。


代码如下:

(function () {
var hello = 'Hello World.';
sayHello = function () { //不建议采用这种方式来提供接口，看起来很不明显。
alert(hello);
}
})();
sayHello();

可以改进为


代码如下:

(function (window) {
var hello = 'Hello World.';
window.$ = {
sayHello: function () {
alert(hello);
}
};
})(window);
$.sayHello(); //看起来像jQuery那么酷

或

代码如下:

var obj = (function () {
var hello = 'Hello World.';
return {
sayHello: function () {
alert(hello);
}
};
})();
obj.sayHello();

陷阱二： 闭包的陷阱

代码如下:

(function () { //函数a
var arr = [];
　 var i = 0;
var j;
for ( ; i < 3; i++) {
arr.push(function () { //函数b
alert(i * 10);
});
}

for (j in arr) {
arr[j]();
}
})();

原以为函数数组arr里各个函数执行后，会弹出0,10,20，但是结果不是如此。结果是弹出30,30,30。
函数b访问的不是当时的 i的值, 而是直接访问变量i(用于都是取i最新的值)。
原因是函数b是函数a的内部函数，变量i对函数b是可见的，函数b每次都从i处获取最新的值。

这次改成：


代码如下:

(function () { //函数a
var arr = [];
var i = 0;
　 var j;
for ( ; i < 3; i++) {
arr.push((function (anotherI) { //函数m
return function () { //函数b
alert(anotherI * 10);
}
})(i)); // 此处为(function b(anotherI) {})(i)
}

for (j in arr) {
arr[j]();
}
})();

这次执行后，终于弹出0,10,20。这是为什么呢。

函数b访问的是anotherI(当时的i的值)，而不是直接访问变量i。
每次在arr.push前，都会定义一个新匿名的函数m。本例中定义了3个匿名函数m0,m1,m2，每当被调用后，他们的anotherI都得到当前i的值。每个m函数执行后都返回一个b函数。b0在m0里，b1在m1里，b2在m2里。b0只能访问m0的anotherI（为0），而b0访问不了m1的anotherI，因为m0和m1为不同的函数。

赞 (0)

相关推荐

  • 举例讲解Go语言中函数的闭包使用

    和变量的声明不同,Go语言不能在函数里声明另外一个函数.所以在Go的源文件里,函数声明都是出现在最外层的. "声明"就是把一种类型的变量和一个名字联系起来. Go里有函数类型的变量,这样,虽然不能在一个函数里直接声明另一个函数,但是可以在一个函数中声明一个函数类型的变量,此时的函数称为闭包(closure). 例: 复制代码 代码如下: packagemain   import"fmt"   funcmain(){     add:=func(baseint)fun

  • 深入分析golang多值返回以及闭包的实现

    一.前言 golang有很多新颖的特性,不知道大家的使用的时候,有没想过,这些特性是如何实现的?当然你可能会说,不了解这些特性好像也不影响自己使用golang,你说的也有道理,但是,多了解底层的实现原理,对于在使用golang时的眼界是完全不一样的,就类似于看过http的实现之后,再来使用http框架,和未看过http框架时的眼界是不一样的,当然,你如果是一名it爱好者,求知欲自然会引导你去学习. 二.这篇文章主要就分析两点:      1.golang多值返回的实现;      2.golan

  • 简单了解Go语言中函数作为值以及函数闭包的使用

    函数作为值 Go编程语言提供灵活性,以动态创建函数,并使用它们的值.在下面的例子中,我们已经与初始化函数定义的变量.此函数变量的目仅仅是为使用内置的Math.sqrt()函数.下面是一个例子: 复制代码 代码如下: package main import (    "fmt"    "math" ) func main(){    /* declare a function variable */    getSquareRoot := func(x float64

  • 深入理解Go语言中的闭包

    深入理解Go语言中的闭包

    闭包 在函数编程中经常用到闭包,闭包是什?它是怎么产生的及用来解决什么问题呢?先给出闭包的字面定义:闭包是由函数及其相关引用环境组合而成的实体(即:闭包=函数+引用环境).这个从字面上很难理解,特别对于一直使用命令式语言进行编程的程序员们. Go语言中的闭包 先看一个demo: func f(i int) func() int { return func() int { i++ return i } } 函数f返回了一个函数,返回的这个函数就是一个闭包.这个函数中本身是没有定义变量i的,而是引用

  • JavaScript.The.Good.Parts阅读笔记（二）作用域&闭包&减缓全局空间污染

    如代码块 复制代码 代码如下: if (true) { int i = 100; } print(i); //错误,变量i没有声明 如上面例子所示,代码块外的函数是无法访问i变量的. 但在javaScript里,情况则完全不同. 复制代码 代码如下: if (true) { var i = 100; } alert(i); //弹出框并显示100 很多现代语言都推荐尽可能迟地声明变量,但在Javascript里这是一个最糟糕的建议.由于缺少块级作用域,最好在函数体的顶部声明函数中可能用到的所有变

  • JavaScript.The.Good.Parts阅读笔记（一）假值与===运算符

    JavaScript的假值列表如下, 值 类型 0 Number NaN (非数字) Number '' (空字符串) String false Boolean null Object undefined Undefined 以上的值作为判断条件,都将为假值,如: 复制代码 代码如下: if(undefined) { alert('undefined'); //这行代码不会执行 } while(null) { alert('null'); //这行代码不会执行 } 虽然这些值全部都等同于假,但它

  • 《JavaScript高级程序设计》阅读笔记（二） ECMAScript中的原始类型

    2.6 原始类型 ECMAScript有5种原始类型(primitive type),即Undefined.Null.Boolean.Number和String.ECMAScript提供了typeof来判断值的类型. 1.typeof运算符: 复制代码 代码如下: var sTemp="test string"; alert(typeof sTemp);//outpus "string" alert(typeof 95);//outpus "number&

  • 《JavaScript高级程序设计》阅读笔记（三） ECMAScript中的引用类型

    2.8 引用类型 1.Object类 ECMAScript中的所有类都是由Object类继承而来. Object类具有下列属性: Constructor:对创建对象的函数的引用(指针),对于Object类,该指针指向原始的Object()函数 Prototype:对该对象的对象原型的引用. Object类还有几个方法: HasOwnProperty(property):判断对象是否有某个特定的属性.必须用字符串指定该属性值 IsPrototypeOf(object):判断该对象是否为另一个对象的

  • 《JavaScript高级程序设计》阅读笔记（一） ECMAScript基础

    2.1 语法 区分大小写.变量弱类型.行尾分号可有可无.注释为双斜线.括号表明代码块 2.2 变量 变量用var声明,变量的命名规则:第一个字符必须是字母.下划线或美元符号:余下的字符可以是下划线.美元符号或任何字母或数字字符. 变量命名规范: Camel标记法:首字母小写,接下来的单词都以大写字母开头.例如:var myTestValue=0,mySecondTestValue="hi"; Pascal标记法:首字母大写,接下来的单词都以大写字母开头.例如:var MyTestVal

  • Javascript中的对象和原型(二)

    在上篇文章中JavaScript中的对象和原型(一)提到了JavaScript中对象的创建的一些基本操作,接下来讨论下继续讨论. 一 工厂模式 我们知道,要创建一个对象我们可以用如下代码: var user = new Object(); //使用new运算符创建一个对象 user.name = '念在三角湖畔'; //给对象添加属性 user.age = 22; user.address = '湖北武汉'; alert(user.name + " " +user.age);//返回

  • javascript学习笔记(十三) js闭包介绍(转)

    javascript学习笔记(十三) js闭包介绍(转)

    一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量. 复制代码 代码如下: var n=999; function f1(){ alert(n); } f1(); // 999 另一方面,在函数外部自然无法读取函数内的局部变量. 复制代码 代码如下: function f1(){ var n=999; } alert(n); // error 这里

  • Three.js源码阅读笔记(物体是如何组织的)

    这是Three.js源码阅读笔记第三篇.之前两篇主要是关于核心对象的,这些核心对象主要围绕着矢量vector3对象和矩阵matrix4对象展开的,关注的是空间中的单个顶点的位置和变化.这一篇将主要讨论Three.js中的物体是如何组织的:即如何将顶点.表面.材质组合成为一个具体的对象. Object::Mesh 该构造函数构造了一个空间中的物体.之所以叫"网格"是因为,实际上具有体积的物体基本都是建模成为"网格"的. 复制代码 代码如下: THREE.Mesh =

  • vue学习笔记之作用域插槽实例分析

    本文实例讲述了vue学习笔记之作用域插槽.分享给大家供大家参考,具体如下: <child></child> Vue.component('child', { data: function () { return { list: [1, 2, 3] } }, template: '<div> <ul> <li v-for="item of list">{{item}}</li> </ul> </di

  • 详解JavaScript作用域 闭包

    JavaScript闭包,是JS开发工程师必须深入了解的知识.3月份自己曾撰写博客<JavaScript闭包>,博客中只是简单阐述了闭包的工作过程和列举了几个示例,并没有去刨根问底,将其弄明白! 现在随着对JavaScript更深入的了解,也刚读完<你不知道的JavaScript(上卷)>这本书,所以乘机整理下,从底层和原理上去刨一下. JavaScript并不具有动态作用域,它只有词法作用域.词法作用域是在写代码或者说定义时确定的,而动态作用域是在运行时确定的.了解闭包前,首先我

随机推荐