無標題文檔

闭包的秘密

Javascript 中的闭包其实很改语言中很难理解的一部分。 感谢 Stuart 提供了那么棒的 PPT ,它深入浅出的解释了 Javascript 的闭包技术。

而我「自作主张」地在这份 PPT 中加入了部分的注释(希望没有影响阅读),主要的内容在这里简要整理下。

闭包的概念

「官方」的解释

「闭包」,是指拥有多个变量和绑定了这些变量的环境的
表达式(通常是一个函数),因而这些变量也是该表达式
的一部分。

但不要咬文嚼字,我们简单的可以理解为

闭包是个函数,而它「记住了周围发生了什么」。表现为由「一个函数」体中定义了「另个函数」
function outer () {
    ...
    function inner () {
        ...
    }
}

闭包的作用

  1. setTimeout/setInterval
  2. 回调函数(callback)
  3. 事件句柄(event handle)

模块化代码

function Container(param) {
    var sercert = 3;
    this.member = param;
    var that    = this; // 注意这行

    function dec() {
        return (sercert > 0) ? --secret : false;
    }

    this.service = function() {
        return (dec()) ? that.member : null;
    }
}

其中 dec 为私有,that 变量引用 Container 同时 service 函数构成了个闭包。

注意 Exploer 下闭包的「特殊情况」

  1. 循环问题
  2. 垃圾回收

最后,PPT 可以 在这里下载 ,同时需要进一步有关闭包的信息,为之漫笔翻译了份很 详实的文档 ,强烈建议看下。

JSON 格式化工具

https://friable.rocks/_/2009_11_05/5732962c2d03.jpg

前端人员和后台开发交换的数据常常是 Json 格式 的,但 Json 的内容往往是一行输出,不容易阅读。虽然有时候可以简单的在 Firfox 地址栏里面输入

javascript:console.info(eval('(' + json + ')'));

但这样的做法甚为麻烦,而且不适用于 Json 非常长的情况。于是花了点时间,写了个 Json 格式化工具

http://friable.rocks/json-formater/ 框架、 以及 PHP 的 jsondecode 标准

最后,有任何的意见或者建议,欢迎联系。

逗号「,」引发的血案

为了更好的说明问题,首先引出下面的题目

//请说明下面变量 a-d 的值
var a = [[1][1]];
var b = [['a','b','c'][1]];
var c = [['a','b','c'][1], ['a','b','c']];
var d = [['a','b','c']['length'], ['a','b','c']];
var e = [['a','b','c']['father', 'child', '0'], ['a','b','c']];

首先理解表达式

var a = [[1][1]];

的含义。我们可以将这个语句拆分下

var tmp = [1];
var a = [tmp[1]];

就能非常好的理解,实际上 a 中的数组元素取得是 tmp[1] ,它并没有定义,所以值为 undefined 。那么

var b = [['a','b','c'][1]];

就很容易理解为 ['b'] ,因为数组紧跟的后面是下标表达式。同时,数组也是个对象,它有相应的属性值,并且可以使用关联数组表示,于是

['a','b','c']['length']

的含义就是

var tmp = ['a','b','c'];
console.info(tmp.length);

取的是 ['a','b','c'] 的长度,所以是 3 。而

['a','b','c']['father', 'child', '0']

后面的 ['father', 'child', '0'] 实质上是表达式,而不是数组。所以简化以后就是

['a','b','c']['0']

那么返回的就是 ['a'] 。这就让我们需要在实际的编码过程中,需要注意数组中的逗号「,」是否已经正确的加上,否则就会得到非期望的结果。

Javascript 中的 Generics

  • 原版本文章理解有误,现已初步更正 *

Generics 在很多程序设计语言中都被称之为 「泛型」 ,而 Javascript 为动态类型的语言,所以称为「一般化」更为合适些。

在 Javascript 的对象模型中,函数(Function)也是对象的一种。顶层函数同时可以通过 call 和 apply 调用不属于对象自身的方法。

同时,Javascrpt 中有很多对象都会有相同的属性,比如 nodeList、Array、arguments 都有 length 属性,都可以使用下标(比如 arguments[0])。

考虑 forEach 的实现( 详细

if (!Array.prototype.forEach) {
    Array.prototype.forEach = function(func) {
        var len = this.length;
        if (typeof func != "function") {
            throw new TypeError();
        }
        var thisp = arguments[1];
        for (var i = 0; i < len; i++) {
            if (i in this) {
                func.call(thisp, this[i], i, this);
            }
        }
    };
}

根据上述的代码可以看到,虽然其为 Array 对象的方法,但函数内部仅仅调用了 this 的 length(this.length) 和 下标(this[i])两个属性。那么,期前举到的例子中,nodeList 以及 arguments 也可以应用于此函数(方法):

[].forEach.call(document.getElementsByTagName('li'), function() {...});

或者

Array.prototype.foreach.call(document.getElementsByTagName('li'), function() {...});

上面的 forEach 函数就被称之为 Generic 函数(A generic function)。下面是 ECMAScript 规范中,有关 Generices 的描述

A generic function is a function object that performs run-time dispatch to
one of several attached methods based on the actual types of the argument
values and the signatures of the available methods.

Generic 有很多的用处,对象只要支持被调用函数所需要调用的属性,就可以复用,而不需要了解此函数针对的对象类型是什么。比如,上述的 Array.forEach 虽然针对的是 Array 对象,但是仍然可以针对 nodeList 工作得很好。

其实在 ECMAScript 规范 中,定义了很多 generic 函数。以上述的 Array 对象为例,join、indexOf、lastIndexOf、forEach、map、filter、some、every 等都为 generic 函数,这可以在我们以后的编程中会很方便。

--Split--

感谢 lifesinger 兄 的解释

JavaScript 中方法分为 Generic method 和 Instance method。
Instance method,依附在实例上的方法,翻译为实例方法。Generic 
method,直接依附于对象上,与实例方法相比较,可以称为泛化方法。

Javascript Packer

这是个 Javascript 压缩 + 混淆器,由于 YUI Compressor 是用 Java 实现的,所以我考虑做了 PHP 实现(不要纷争这两门语言之间的信仰问题)。

注:本程序基于 dewards 的 PHP Javascript Packer 封装。原作者与本人不对使用此脚本造成的一切后果负责(很无情,对吧)。

https://friable.rocks/_/2009_11_05/775565f4f2ca.jpg

与期前 第一版的 Javascript 批量压缩器 不同,此工具具有混淆代码的功能。使用地址如下

http://friable.rocks/javascript_packer/ ,欢迎点评。

--Splite--

同时得感谢 圆心 的 Javascript 支持,是他帮忙解决了 eval JSON 数据时,本人的一个「弱智」的问题,建议以后使用这样解析(可能是我火星了):

var json = eval('(' + req.responseText + ')');

详细 参见这里

很无耻的用上了公司的 CDN 链接,感觉倍有「安全感」(嘘,小声点)。重新审视代码,的确从某个角度上说,使用 YUI 的代码比 jQuery 的要「严肃」得多。

我的照片

嗨!我叫「明城」,八零后、码农、宁波佬,现居杭州。除了这里,同时也欢迎您关注我的 GitHubTwitterInstagram 等。

这个 Blog 原先的名字叫 Gracecode.com 、现在叫 「無標題文檔」 。 要知道作为码农取名是件很难的事情,所以不想在取名这事情上太费心思。

作为八零后,自认为还仅存点点可能不怎么被理解的幽默感,以及对平淡生活的追求和向往。 为了避免不必要的麻烦,声明本站所输出的内容以及观点仅代表个人,不代表自己所服务公司或组织的任何立场。

如果您想联系我,可以发我邮件 `echo bWluZ2NoZW5nQG91dGxvb2suY29tCg== | base64 -d`

分类

搜索

文章