2018-09-02 15:52 东北大学前端工程师

关注

【有书共读】《JS高级程序设计》读书笔记08

高级技巧

高级函数

安全的类型检测

使用Object.prorotpye.toString.call(value)，会返回一个[object NativeConstructorName]格式的字符串。每个类在内部都有一个[[Class]]属性，这个属性中就指定了上述字符串中的构造函数名。例如：

Object.prorotpye.toString.call([]); // "[object Array]"

作用域安全的构造函数

作用域安全的构造函数在进行任何更改前，首先确认this对象是正确类型的实例。如果不是，那么会创建新的实例并返回。如下：

function Person(name, age, job){ if (this instanceof Person){ this.name = name; this.age = age; this.job = job;
    } else { return new Person(name, age, job);
    }
} var person1 = Person("Nicholas", 29, "Software Engineer");
alert(window.name); //"" alert(person1.name); //"Nicholas" var person2 = new Person("Shelby", 34, "Ergonomist");
alert(person2.name); //"Shelby"

惰性载入函数

惰性载入函数表示函数执行的分支仅会发生一次。有两种实现惰性载入的方式：

第一种就是在函数被调用时再处理函数。在第一次调用的过程中，该函数会被覆盖为另一个按合适方式执行的函数，这样任何对原函数的调用都不用再经过执行分支了。如下：

第二种实现惰性载入的方式是在声明函数时就指定适当的函数。这样在第一次调用函数时就不会损失性能了，而在代码首次加载时会损失一点性能。

惰性载入函数的优点是只在执行分支代码时牺牲一点性能。这两种方式都能避免执行不必要的代码。

函数绑定

函数绑定要创建一个函数，可以在特定的this环境中以指定参数调用另一个函数。解决方案是创建bind()函数。如下：

function bind(fn, context){ return function (){ return fn.apply(context, arguments);
    }
}

该函数创建了一个闭包，闭包使用apply()调用传入的函数，并给apply()传入context和参数。如下：

ES5 为所有函数定义了一个原生的bind()方法，进一步简化了操作。如下：

EventUtil.addHandler(btn, "click", handler.handleClick.bind(handler));

函数柯里化

与函数绑定密切相关的主题是函数柯里化（function currying）,它用于创建已经设置好了一个或多个参数的函数。函数柯里化的基本方法和函数绑定是一样的：使用一个闭包返回一个函数。两者的区别在于，当函数被调用时，返回的函数还需要设置一些传入的参数。如下：

function add(num1, num2){ return num1 + num2;
} function curriedAdd(num2){ return add(5, num2);
}

add(2, 3); //5 curriedAdd(3); //8

柯里化函数通常由一下步骤动态创建：调用另一个函数并它传入要柯里化的函数和必要参数。下面是创建柯里化函数的通用方式：

function curry(fn){ var args = Array.prototype.slice.call(arguments, 1); return function (){ var innerArgs = Array.prototype.slice.call(arguments); var finalArgs = args.concat(innerArgs); return fn.apply(null, finalArgs);
    };
}

curry()函数的主要工作就是将被返回函数的参数进行排序。第一个参数是要进行柯里化的函数，其他参数是要传入的值。可以按以下方式应用：

function add(num1, num2){ return num1 + num2;
} var curriedAdd = curry(add, 5, 12);
curriedAdd(); //17

函数柯里化还常常作为函数绑定的一部分包含在其中，构造出更为复杂的bind()函数。例如：

function bind(fn, context){ var args = Array.prototype.slice.call(arguments, 2); return function () { var innerArgs = Array.prototype.slice.call(arguments); var finalArgs = args.concat(innerArgs); return fn.apply(context, finalArgs);
    }
}

ES5 的bind()函数也实现了函数柯里化。

防篡改对象

JavaScript 中任何对象都可以被在同一环境中运行的代码修改，开发人员可能意外地修改别人的代码，甚至可能用不兼容的功能重写原生对象。ES5 可以让开发人员定义防篡改对象（tamper-proof object），一旦把对象定义为防篡改，就无法撤销了。

不可扩展对象

使用Object.preventExtensions()方法可以禁止给对象添加属性和方法。

虽然不能给对象添加新成员，但已有的成员则丝毫不受影响，依然可以修改和删除已有成员。使用Object.isExtensible()方法还可以确定对象是否可以扩展。

密封的对象

密封对象不可扩展，而且已有成员的[[Configurable]]特性被设置为false。这就意味着不能删除属性和方法，因为不能使用Object.defineProperty()把数据属性修改为访问器属性。属性值是可以修改的。

使用Object.isSealed()方法可以确定对线是否被密封了。

冻结的对象

最严格的防篡改级别是冻结对象。冻结的对象既不可扩展，又是密封的，而且对象的数据属性的[[Writable]]特性会被设置为false。如果定义[[Set]]函数，访问器属性仍然是可写的。使用Object.freeze()可以冻结对象。

Object.isFrozen()方法用于检测冻结对象。

var person = { name: "Nicholas" };
alert(Object.isExtensible(person)); //true alert(Object.isSealed(person)); //false alert(Object.isFrozen(person)); //false Object.freeze(person);
alert(Object.isExtensible(person)); //false alert(Object.isSealed(person)); //true alert(Object.isFrozen(person)); //true

高级定时器

JavaScript 运行于单线程的环境中，而定时器仅仅只是计划代码在未来的某个时间执行，执行时机不能保证。因为在页面的整个生存周期中，不同时间可能有其他代码控制着 JavaScript 进程。事实上，浏览器负责进行排序，指派某段代码在某个时间点运行的优先级。

除了主 JavaScript 执行进程外，还有一个需要在进程下一次空闲时执行的代码队列。随着页面在其生命周期中的推移，代码会按顺序加入队列。在 JavaScript 中没有任何代码是立刻执行的，但一旦进程空闲则尽快执行。

定时器对队列的工作方式是，当特定时间过去后将代码插入。注意，给队列添加代码并不意味着对它立即执行，而是能表示它会尽快执行。设定一个 150ms 后执行的定时器不代表到 150ms 代码就立刻执行，它表示代码会在 150ms 后被加入到队列中。如果，在这个时间点上，队列中没有其他东西，那么这段代码就会被执行。

重复的定时器

setInterval()定时器确保定时器代码规则地插入队列中，这个方式的问题在于，定时器代码可能在代码再次被添加到队列之前还没有完成执行。JavaScript 引擎会在仅当没有该定时器的任何代码实例时，才将定时器代码添加到队列。这确保了定时器代码加入到队列中的最小时间间隔为指定间隔。

不过这样会出现两个问题：

某些间隔会被跳过；
多个定时器的代码执行之间的间隔可能会比预期的小。

这种情况一般是定时器代码执行的时间过于长，超过了指定的时间间隔。

解决上述问题的办法就是链式调用setTimeout()。

setTimeout(function(){ // 处理中 setTimeout(arguments.callee, interval)
}, interval);

这样在前一个定时器代码执行完之前，不会向队列插入新的定时器代码，确保不会有任何缺失的间隔。而且，可以保证在下一次定时器代码执行之前，至少等待指定的间隔，避免了连续的运行。

Yielding Processes

运行在浏览器中的 JavaScript 都被分配了一个确定数量的资源，脚本的长时间运行在 Web 中是不被允许的。造成该脚本长时间运行的原因一般是过长、过深嵌套的函数调用或者是进行大量处理的循环。后者比较容易解决，长时间运行的循环通常遵循如下模式：

for(var i = 0, len = data.length; i < len; i++){
    process(data[i]);
}

此时需要考虑两个问题：

该处理是否必须同步完成？
数据是否必须按顺序完成？

如果都是“否”，则需要考虑数组分块（array chunking）技术。如下：

数组分块的重要性在于它可以将多个项目的处理在执行队列上分开，在每个项目处理之后，给予其他的浏览器处理机会运行，这样就可以避免长时间运行脚本的错误。

函数节流

在浏览器中，DOM 操作需要更多的内存和 CPU 时间。连续尝试进行过多的 DOM 相关操作可能会导致浏览器挂起，甚至崩溃，尤其当使用 onresize 事件处理程序时容易发生。可以用定时器给函数节流，函数节流的基本思想是某些代码不可以在没有间断的情况连续重复执行。目的是只有在执行函数的请求停止了一段时间之后才能再次执行。

function throttle(method, context) {
    clearTimeout(method.tId);
    method.tId = setTimeout(function (){
        method.call(context);
    }, 100);
} function resizeDiv(){ var div = document.getElementById("myDiv");
    div.style.height = div.offsetWidth + "px";
} // 节流在resize事件中最常用 window.onresize = function(){
    throttle(resizeDiv);
};