JavaScript 函数式编程读书笔记2

概述

这是我读《javascript函数式编程》的读书笔记，供以后开发时参考，相信对其他人也有用。

说明：虽然本书是基于underscore.js库写的，但是其中的理念和思考方式都讲的很好，值得一读。不过如果不熟悉underscore.js库的话，读起来会有点困难。

对象的不变性

函数式编程中函数是一等公民，所以对于数据来说，需要他们是不可变的。另外，对象的不可变确实能够带来一些好处，比如：如果数据是不可变的，那么可以直接通过“===”来判断数据是否发生变化，这使得react的效率得到极大提升。下面我们来讨论在js中实现immutable对象的方法。

freeze

用Object.freeze可以冻结一个数组或者对象，当使用Object.freeze的时候，将导致后续的变化失败。如果在严格模式下使用，将抛出一个TypeError；否则，所有的变化将悄悄地失败。实例如下：

var a = [2,3,4];
a[1]; //输出3
Object.freeze(a);
a[1]=5;
a[1]; //输出3

也有一个isFrozen API来判断a是否确实被冻结。

Object.isFrozen(a); //输出true

但是这么实现有如下几个痛点：

变化会悄悄地失败，可能会导致微妙的错误。
不是所有的库都支持freeze。
这个是最重要的，Object.freeze是一个浅操作。

由于Object.freeze是一个浅操作，所以嵌套对象里面的变量不会被冻结，除非用递归进行深冻结，代码如下：

function isObject(obj) {
    var type = typeof obj;
    return type === 'function' || type === 'object' && !!obj;
}

function deepFreeze(obj) {
    if(!Object.isFrozen(obj)) Object.freeze(obj);
    for (var key in obj) {
        if(!obj.hasOwnProperty(key) || !isObject(obj)) continue;
        deepFreeze(obj[key]);
    }
}

使用容器

我们也可以使用深复制，并把它放在一个容器里面来保持变量的不变性。简单代码如下：

function isObject(obj) {
    var type = typeof obj;
    return type === 'function' || type === 'object' && !!obj;
}

function deepClone(obj) {
    if(!isObject(obj)) return obj;
    var temp = new obj.constructor();
    for (var key in obj) {
        if(obj.hasOwnProperty(key))
            temp[key] = deepClone(obj[key]);
    }
    return temp;
}

function Container(init) {
    this.state = init;
}

Container.prototype = {
    setState: function(obj) {
        this.state = deepClone(obj);
        return this.state;
    }
}

var aObj = new Container({a:{b:1}, c:2});
aObj.setState({a:{b:3}, c:6, d:8});

aObj; //输出{a:{b:3}, c:6, d:8}

使用immutable.js

使用上面的方法实现不可变数据问题很多，用freeze会悄悄地失败，并且是浅操作，使用容器的话深复制对象会消耗大量的内存，并且速度很慢。

immutable.js就是facebook开源的为了解决这个问题的库。它可以说是和react一样的划时代的产物。它通过参考hash maps tries和hash maps tries提供了一种优雅地实现javascript Immutable Data的方式。

扫描二维码关注公众号，回复： 1551806 查看本文章

它使用了Structural Sharing（结构共享），即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享。所以避免了深拷贝带来的CPU 和内存的浪费。

具体可参考:
搞定immutable.js详细说明
 IMMUTABLE 详解