javascript--22高级编程
高级函数
1.1 作用域安全的构造函数
①直接调用构造函数而不适用new操作符时，由于this对象的晚绑定，它将映射在全局对象window上，导致对象属性错误增加到window。
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
}
Var person = Person("Jay",29,"singer"); //属性增加到window对象上。
②作用域安全构造函数
function Person(name,age,job){
if(this instanceof Person){
this.name = name;
this.age = age;
}else{
return new Person(name,age);
}
}
③上述作用域安全的构造函数，如果使用构造函数窃取模式的继承且不使用原型链，那么这个继承很可能被破坏。
□如果构造函数窃取结合使用原型链或者寄生式组合则可以解决这个问题。
function Polygon(side){
if(this instanceof Polygon){
this.sides = sides;
this.getArea = function{return 0;};
}else{
return new Polygon(sides);
}
}
function Rectangle(width,height){
Polygon.call(this,2);
this.width = width;
this.height = height;
this.getArea = function(){
return this.width * this.height;
};
}
Rectangle.prototype = new Polygon();
var rect = new Rectangle(5,10);
alert(rect.sides); //2
1.2 惰性载入函数
①惰性载入表示函数执行的分支仅会发生一次：既第一次调用的时候。在第一次调用的过程中，该函数会被覆盖为另一个按合适方式执行的函数，这样任何对原函数的调用都不用再经过执行的分支了。
■优点：
□要执行的适当代码只有当实际调用函数时才进行。
□尽管第一次调用该函数会因额外的第二个函数调用而稍微慢点，但后续的调用都会很快，因避免了多重条件。
function create XHR(){
if(typeof XMLHttp Request != "undefined"){
createXHR = function(){
return new XMLHttpRequest();
};
}else if(typeof ActiveXObject != "undefined"){
createXHR = function(){
if(typeof arguments.callee.activeXString != "string"){
var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"];
for(vai I = 0, len = versions.length; I < len; i++){
try{
Var xhr = new ActiveXObject(version[i]);
Arguments.callee.activeXString = version[i];
Return xhr;
}catch(ex){
//skip
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
};
}else{
createXHR = function(){
throw new Error("No XHR Object available.");
};
}
return createXHR();
}
1.3 函数绑定
①函数绑定要创建一个函数，可以在特定环境中以指定参数调用另一个函数。
②一个简单的bind()函数接受一个函数和一个环境，并返回一个在给定环境中调用给定函数的函数，并且将所有参数原封不动传递过去。
function bind(fn, context){
return function(){
return fn.apply(context, arguments);
};
}
③被绑定函数与普通函数相比有更多的开销——它们需要更多内存，同时也因为多重函数调用而稍微慢一点——所以最好只在必要时使用。
1.4 函数柯里化
定义：用于创建已经设置好了一个或多个参数的函数。函数柯里化的基本方法和函数绑定是一样的：使用一个闭包返回一个函数。两者的区别在于，当函数被调用时，返回函数还需要设置一些传入的参数。
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);
};
}
2.高级定时器
①JavaScript是单线程程序，定时器是在间隔时间后将代码添加到列队。
②执行完一套代码后，JavaScript进程返回一段很短的时间，这样页面上的其他处理就可以进行了。
2.1 重复的定时器
①setInterval()仅当没有该定时器的任何其他代码实例时，才将定时器代码添加到队列中。
□某些间隔会被跳过。
□多个定时器代码执行之间的间隔可能会比预期小。
②避免setInterval()的两个缺点，使用链式setTimeout()调用：
setTimeout(function(){
//处理
if(condition){
setTimeout(arguments.callee, interval);
}
},interval);
2.2 Yielding Processes
①JavaScript长时间运行脚本制约：如代码运行超过特定的时间或特定的语句数量就不会让它继续执行。
②当某个函数要花200ms以上的事件完成，最好分割为一系列可以使用定时器的小任务。
③数组分块技术：为要处理的项目创建一个队列，然后使用定时器取出下一个要处理的项目进行处理，接着再设置另一个定时器。
function chunk(array, process, context){
setTimeout(function(){
var item = array.shift();
process.call(context,item);
if(array.length>0){
setTimeout(arguments.callee, 100);
}
}
}
2.3 函数节流
①DOM操作比起非DOM交互需要更多内存和CPU时间。连续尝试进行过多的DOM相关操作可能会导致浏览器挂起，有时甚至崩溃。
②函数节流思想：某些代码不可以在没有间断的情况连续重复执行。
□示例
var processor = {
timeoutId : null,
//实际进行处理的方法
performProcessing : function(){
//实际执行的方法
},
//初始处理调用的方法
process : function(){
clearTimeout(this.timeoutId);
var that = this;
this.timeoutId = setTimeout(function(){
that.performProcessing();
},100);
}
};
//尝试开始执行
Processor.process();
□简化模式
function throttle(method,context){
clearTimeout(mehtod.tId);
mehtod.tId = setTimeout(function(){
method.call(context);
},100);
}
3.自定义事件
①事件是一种叫做观察者的设计模式，这是一种创建松散耦合代码的技术。
□对象可以发布事件，用来表示该对象声明周期中某个有趣的时刻到了。
□其他对象可以观察该对象，等待有趣的时刻到来并通过运行代码来响应。
②观察者模式由两类对象组成：主体和观察者。
□主体负责发布事件，同时观察者通过订阅这些事件来观察主体。
□主体并不知道观察者的任何事情，它可以独立自存在并正常运作即使观察者不在。
③自定义事件：创建一个管理事件的对象，让其他对象监听那些事件。
function EventTarget(){
this.handlers = {};
}
EventTarget.prototype = {
constructor : EventTarget,
addHandler : function(type,handler){
if(typeof this.handlers[type] == "undefined"){
this.handlers[type] = [];
}
this.handlers[type].push(handler);
},
fire : function(event){
if(!event.target){
event.target = this;
}
if(this.handlers[event.type] instanceof Array){
var handlers = this.handlers[event.type];
for(var i=0,len=handlers.length; ihandlers[i](event);
}
}
},
removeHandler : function(type, handler){
if(this.handlers[type] instanceof Array){
var handlers = this.handlers[type];
for(var i=0,len=handlers.length; iif(handlers[i] === handler){
break;
}
}
Handlers.splice(i,1);
}
};
④使用EventTarget类型的自定义事件可以如下使用：
function handleMessage(event){
alert("message received:" + event.message);
}
//创建一个新对象
var target = new EventTarget();
//添加一个事件处理程序
target.addHandler("message",handleMessage);
//触发事件
target.fire({type:"message",message:"hello world!"});
//删除事件处理程序
target.removeHandler("message",handleMessage);
⑤使用实例
function Person(name,age){
eventTarget.call(this);
this.name = name;
this.age = age;
}
inheritPrototype(Person, EventTarget);
Person.prototype.say = function(message){
this.fire({type:"message", message:message});
};
function handleMessage(event){
alert(event.target.name + "says: " + event.message);
}
//创建新person
var person = new Person("Nicholas",29);
//添加一个事件处理程序
Person.addHandler("message",handleMessage);
//在该对象上调用1个方法，它触发消息事件
person.say("Hi there");
4.拖放
功能：①拖放②添加了自定义事件
var DragDrop = function(){
var dragdrop = new EventTarget();
var dragging = null;
var diffX = 0;
var diffY = 0;
function handleEvent(event){
//获取事件和对象
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
//确定事件类型
switch(event.type){
case "mousedown" :
if(target.className.indexOf("draggable")>-1){
dragging = target;
diffX = event.clientX - target.offsetLeft;
diffY = event.clientY - target.offsetTop;
dragdorp.fire(
{
type:"dragstart",
target : dragging,
x : event.clientX,
y : event.clientY
}
);
break;
case "mousemove" :
if(dragging !== null){
//获取事件
event = EventUtil.getEvent(event);
//指定位置
dragging.style.left = (event.clientX - diffX) + "px";
dragging.style.top = (event.clientY - diffY) + "px";
//触发自定义事件
dragdrop.fire(
{
type : "drag",
target : dargging,
x : event.clientX,
y : event.clientY
}
);
}
break;
case "mouseup" :
dargdorp.fire(
{
type : "dragend",
target : dragging,
x : event.clientX,
y : event.clientY
}
);
dragging = null;
break;
}
}
//公共接口
dragdrop.enable = function() {
EventUtil.addHandler(document, "mousedown", handleEvent);
EventUtil.addHandler(document, "mousemove", handleEvent);
EventUtil.addHandler(document, "mouseup", handleEvent);
};
dragdrop.disable = function(){
EventUtil.removeHandler(document, "mousedown", handleEvent);
EventUtil.removeHandler(document, "mousemove", handleEvent);
EventUtil.removeHandler(document, "mouseup", handleEvent);
};
return dragdrop;
}();
高级函数
安全的类型检测
Javascript内置的类型检测机制并非完全可靠。比如typeof操作符会导致检测数据类型时不靠谱，Safari（直至第4版）对正则表达式应用时会返回"function"，因此很难判定某个值是不是函数。
在检测某个对象是原生对象还是开发人员自定义的对象时会有问题。原因是浏览器开始原生支持JSON对象了。因为很多人在使用Douglas Crockford的JSON库，而该库定义了一个全局JSON对象。所以开发人员很难确定页面中的JSON对象是不是原生的。
在任何值上调用Object原生的toString()方法，都会返回一个[Object NativeConstructorName]格式的字符串。每个类在内部都有一个[[Class]]属性，这个属性中就指定了上述字符串中的构造函数名。例子：
alert(Object.prototype.toString.call(value)); // "[Object Array]"
由于原生数组的构造函数名与全局作用域无关，因此使用toString()就能保证返回一致的值。
function isArray(value){
return Object.prototype.toString.call(value) == "[object Array]";
}
测试某个值是不是原生函数或正则表达式：
function isFunction(value){
return Object.prototype.toString.call(value) == "[object Function]";
}
function isRegExp(value){
return Object.prototype.toString.call(value) == "[object RegExp]";
}
注意：在IE中以COM对象形式实现的任何函数，isFunction()都返回false，因为它们并非原生的JavaScript函数。
作用域安全的构造函数
构造函数是一个使用new操作符调用的函数，用到的this对象会指向新创建的对象实例
function Person(name, age){
this.name = name;
this.age = age;
}
var person = new Person('Nicholas', 29);
Person使用的this对象给属性赋值。和new操作符连用会创建一个新的Person对象。当没有用new操作符调用构造函数时。由于this对象是在运行时绑定的，直接调用Person()，this会映射到全局对象window上，导致错误对象属性的意外增加。
var person = Person('Nicholas', 29);
alert(window.name); //'Nicholas'
alert(window,age); // 29
没有new操作符，问题是由this对象的晚绑定造成的，这里this被解析成了window对象。这个问题的解决方法就是创建一个作用域安全的构造函数。
function Person(name, age){
if(this instanceof Person){
this.name = name;
this.age = age;
}else{
return new Person(name, age)
}
}
var person1 = Person('Nicholas', 29);
alert(window.name); // ' '
alert(person.name); // 'Nicholas'
var person2 = new Person ('Shelby', 33);
Person构造函数添加了一个检查并确保this对象是Person实例的if语句，要么使用new操作符，要么在现有Person实例中调用构造函数。如果并非Person的实例，就会再次使用new操作符调用构造函数。无论是否使用new操作符，都会返回一个Person的新实例，避免在全局对象上意外设置属性。
function Polygon(sides){
if(this instanceof Polygon){
this.sides = sides;
this.getArea = function(){
return 0;
}
}else{
return new Poygon(sides);
}
}
function Rectangle(width, height){
Polygon.call(this, 2);
this.width = width;
this.height = height;
this.getArea = function(){
return this.width * this.height;
}
}
var rect = new Rectangle(5, 10);
alert(rect.sides); // undefined;
Person构造函数是作用域安全的，而Rectangle不是。新创建一个Rectangle实例之后，应该通过Polygon.call()来继承Polygon的sides属性。但是由于polygon构造函数是作用域安全的，this对象并非Polygon的实例，所以会创建并返回一个新的Polygon对象。Rectangle构造函数中的this对象没有得到增长，同时Polygon.call()返回的值没有用到，所以Rectangle实例中不会有sideshow属性。
构造函数窃取结合使用原型链或者寄生组合可以解决这个问题
function Polygon(sides){
if(this instanceof Polygon){
this.sides = sides;
this.getArea = function(){
return 0;
}
}else{
return new Poygon(sides);
}
}
function Rectangle(width, height){
Polygon.call(this, 2);
this.width = width;
this.height = height;
this.getArea = function(){
return this.width * this.height;
}
}
Rectangle.prototype = new Polygon();
var rect = new Rectangle(5, 10);
alert(rect.sides); // 2;
Rectangle实例同时是一个Polygon实例，Rectangle实例添加了sides属性。
惰性载入函数
此处图片显示
每次调用createXHR()的时候，都要对浏览器所支持的能力仔细检查。即使只有一个if语句的代码，也肯定要比没有if语句的慢，所以如果if语句不必每次执行，代码可以运行的更快一些。解决方案称之为惰性载入的技巧。
惰性载入表示函数执行的分支仅会发生一次，有两种实现惰性载入的方式，第一种就是在函数被调用时再处理函数。在第一次调用的过程中，该函数会被覆盖为另外一个按合适方式执行的函数，这样任何对原函数的调用都不用在经过执行的分支了。改写createXHR()
此处图片显示
if语句的每一个分支都会为createXHR变量赋值，有效覆盖了原有的函数。最后一步是调用新赋的函数。下次调用时就会直接调用被分配的函数，就不用再次执行if语句了。
第二种实现方式是在声明函数时就指定适当的函数。在第一次调用函数时就不会损失性能了，在代码首次加载时会损失一点性能。
此处图片显示
例子中使用的技巧是创建一个匿名、自执行的函数，用以确定应该使用哪一个函数实现。逻辑都一样，不同的是第一行代码使用var定义函数、新增了自执行的匿名函数，另外每个分支都返回正确的函数定义，以便立即将其赋值给creatXHR()。
惰性载入函数的优点是在执行分支代码时牺牲一点儿性能。
函数绑定
函数绑定要创建一个函数，可以在特定的this环境中以指定参数调用另一个函数。常常和回调函数与事件处理程序一起使用，以便在将函数作为变量传递的同时保留代码执行环境。
var handler = {
message: "Event handled",
handleClick: function(event){
alert(this.message);
}
}
var btn = document.getElementById('btn');
EventUtil.addHandLer(btn, "click", handler.handleClick);
按下按钮显示的是undefiend，问题在于没有保存handler.handleClick()的环境，this对象最后指向了DOM按钮而非handler。
使用闭包修改
var handler = {
message: "Event handled",
handleClick: function(event){
alert(this.message);
}
}
var btn = document.getElementById('btn');
EventUtil.addHandLer(btn, "click", function(event){
handler.handleClick(event);
} );
在事件处理程序中使用一个闭包直接调用handler.handleClick()。创建多个闭包可能会使代码变得难于理解和调试。很多Js库实现了一个可以将函数绑定到指定环境的函数，这个函数一般都叫bind()。
bind()函数接受一个函数和一个环境，并返回一个在给定环境中调用给定函数的函数。
function bind(fn, context){
return function(){
return fn.apply(context, arguments);
}
}
bind()中创建一个闭包，闭包使用apply()调用传入的函数，给apply()传递context对象和参数。这里使用的arguments对象是内部函数，不是bind()的。
var handler = {
message: "Event handled",
handleClick: function(event){
alert(this.message);
}
}
var btn = document.getElementById('btn');
EventUtil.addHandLer(btn, "click", bind(handler.handlClick, handler) );
用bind()函数创建了一个保持了执行环境的函数，并将其传给EventUtil.addHandler()。event对象也被传给了函数。
ECMAScript5为所有函数定义了一个原生的bind()方法，进一步简单操作，换句话说，不用再自己定义bing()函数了，可以直接在函数上调用这个方法。
var handler = {
message: "Event handled",
handleClick: function(event){
alert(this.message + “：” + event.type);
}
}
var btn = document.getElementById('btn');
EventUtil.addHandLer(btn, "click", handler.handlClick.bind( handler) );
函数柯里化
与函数绑定紧密相关的主题是函数柯里化( function currying )，它用于创建已经设置好了一个或多个参数的函数。函数柯里化的基本方法和函数绑定是一样的：使用了一个闭包返回一个函数。两者区别在于，当函数被调用时，返回的函数还需要设置一些传入的参数。
function add(num1, num2){
return num1 + num2;
}
function curriedAdd(num2){
return add(5, num2);
}
alert(add(2,3)); // 5
alert(curriedAdd(3)); // 8
curriedAdd()并非柯里化的函数，但很好的展示了其概念。
柯里化函数动态创建步骤：调用另一个函数并为它传入要柯里化的函数和必要参数。
通用方式：
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()函数就是将返回函数的参数进行排序。
curry()的第一个参数是要进行柯里化的函数，其他参数是要转入的值。为了获取第一个参数之后的所有参数，在arguments对象上调用了slice()方法，并传入参数1表示被返回的数组包含从第二个参数开始的所有参数。然后args数组包含了来自外部函数的参数。
内部函数中创建了innerArgs数组用来存放所有传入的参数。
有外部函数和内部函数的参数数组可以用concat()将他们组合为finalArgs，然后用apply()将结果传递给函数。
注意：这个函数没有考虑执行环境，所有调用apply()的第一个参数是null。
function add(num1,num2){
return num1 + num2;
}
var curriedAdd = curry(add, 5);
alert(curriedAdd(3)); // 8
创建了第一个参数绑定为5的add()的柯里化版本，调用curriedAdd()并传入3时，3会成为add()的第二个参数，结果为8。
function add(num1,num2){
return num1 + num2;
}
var curriedAdd = curry(add, 5, 3);
alert(curriedAdd()); // 8
防篡改对象
因为任何对象都可以被在同一环境中运行的代码修改。开发人员很可能会意外的修改别人的代码，ECMAScript5可以让开发人员定义防篡改对象（tamper-proof object)。
注意：一旦把对象定义为防篡改，就无法撤销了。
不可扩展对象
var person = { name: "123" };
person.age = 29;
添加age属性
使用Object.preventExtensions()方法就不能给对象添加属性和方法。
var person = { name: "123" };
Object.preventExtensions(person);
person.age = 29;
alert(person.age); // undefined
在非严格模式下，给对象添加新成员会导致静默失败，所以是undefined。在严格模式下会导致抛出错误。
但已有成员可以修改和删除。
使用Object.istExtensible()方法可以确定对象是否可以扩展。
var person = { name: "123" };
alert(Object.istExtensible(person)); // true
Object.preventExtensions(person);
alert(Object.istExtensible(person)); // false
密封的对象
密封的对象不可扩展，已有成员的[[Configurable]]特性将被设置为false。不能删除属性和方法，因为不能使用Object.defineProperty()把数据属性修改为访问器属性，或相反。属性值是可以修改的。
var person = { name: "123" };
Object.seal(person);
person.age = 20;
alert(person.age); // undefined
delete person.name;
alert(person.name); // "123"
非严格模式下添加age属性被忽略，删除name属性也被忽略，属性没有任何影响。严格模式下，添加和删除对象成员会抛出错误。
Object.isSealed()方法可以确定对象是否被密封了。因为密封对象不可扩展，所以Object.isExtensible()检测密封对象也返回false。
var person = { name: "123" };
alert(Object.istExtensible(person)); // true
alert(Object.isSealed(person)); // false
Object.seal(person);
alert(Object.isExtensible(person)); // false
alert(Object.isSealed(person)); // true
冻结的对象
最严格的防篡改级别是冻结对象。冻结对象既不可扩展，又是密封的，对象数据属性的[[Writable]]特性会被设置为false。如果定义[[Set]]函数，访问器属性仍然是可写的。
ECMAScript 5定义的Object.frreeze()方法可以用来冻结对象。
var person = { name: "123" };
Object.freeze(person);
person.age = 20;
alert(person.age); // undefined
delete person.name;
alert(person.name); // "123"
person.name = "111"
alert(person.name); // "123"
冻结对象即是密封的又是不可扩展的，所以Object.isExtensible()和Object.isSealed()检测冻结对象分别返回false和true。
var person = { name: "123" };
alert(Object.istExtensible(person)); // true
alert(Object.isSealed(person)); // false
alert(Object.isFrozen(person)); // false
Object.frozen(person);
alert(Object.istExtensible(person)); // false
alert(Object.isSealed(person)); // true
alert(Object.isFrozen(person)); // true
22.1 高级函数 函数是JavaScript 中最有趣的部分之一。它们本质上是十分简单和过程化的，但也可以是非常复杂和动态的。一些额外的功能可以通过使用闭包来实现。此外，由于所有的函数都是对象，所以使用函数指针非常简单。这些令JavaScript函数不仅有趣而且强大。以下几节描绘了几种在JavaScript中使用函数的高级方法。 22.1.1 安全的类型检测 JavaScript 内置的类型检测机制并非完全可靠。事实上，发生错误否定及错误肯定的情况也不在少数。比如说typeof操作符吧，由于它有一些无法预知的行为，经常会导致检测数据类型时得到不靠谱的结果。Safari（直至第4版）在对正则表达式应用typeof操作符时会返回"function"，因此很难确定某个值到底是不是函数。 再比如，instanceof 操作符在存在多个全局作用域（像一个页面包含多个frame）的情况下，也是问题多多。一个经典的例子（第5章也提到过）就是像下面这样将对象标识为数组。 var isArray = value instanceof Array; 以上代码要返回true，value必须是一个数组，而且还必须与Array构造函数在同个全局作用域中。（别忘了，Array是window的属性。）如果value是在另个frame中定义的数组，那么以上代码就会返回false。 在检测某个对象到底是原生对象还是开发人员自定义的对象的时候，也会有问题。出现这个问题的原因是浏览器开始原生支持JSON对象了。因为很多人一直在使用Douglas Crockford的JSON库，而该库定义了一个全局JSON对象。于是开发人员很难确定页面中的JSON对象到底是不是原生的。 解决上述问题的办法都一样。大家知道，在任何值上调用Object原生的toString()方法，都会 返回一个[object NativeConstructorName]格式的字符串。每个类在内部都有一个[[Class]]属性，这个属性中就指定了上述字符串中的构造函数名。举个例子吧。 alert(Object.prototype.toString.call(value)); //"[object Array]" 由于原生数组的构造函数名与全局作用域无关，因此使用toString()就能保证返回一致的值。利用这一点，可以创建如下函数： function isArray(value){ return Object.prototype.toString.call(value) == "[object Array]"; } 同样，也可以基于这一思路来测试某个值是不是原生函数或正则表达式： function isFunction(value){ return Object.prototype.toString.call(value) == "[object Function]"; } function isRegExp(value){ return Object.prototype.toString.call(value) == "[object RegExp]"; } 不过要注意，对于在IE中以COM对象形式实现的任何函数，isFunction()都将返回false（因为它们并非原生的JavaScript函数，请参考第10章中更详细的介绍）。 这一技巧也广泛应用于检测原生JSON 对象。Object 的toString()方法不能检测非原生构造函数的构造函数名。因此，开发人员定义的任何构造函数都将返回[object Object]。有些JavaScript库会包含与下面类似的代码。 var isNativeJSON = window.JSON && Object.prototype.toString.call(JSON) == "[object JSON]"; 在Web开发中能够区分原生与非原生JavaScript对象非常重要。只有这样才能确切知道某个对象到底有哪些功能。这个技巧可以对任何对象给出正确的结论。 请注意，Object.prototpye.toString()本身也可能会被修改。本节讨论的技巧假设Object.prototpye.toString()是未被修改过的原生版本。 22.1.2 作用域安全的构造函数 第6章讲述了用于自定义对象的构造函数的定义和用法。你应该还记得，构造函数其实就是一个使用new 操作符调用的函数。当使用new 调用时，构造函数内用到的this 对象会指向新创建的对象实例，如下面的例子所示： function Person(name, age, job){ this.name = name; this.age = age; this.job = job; } var person = new Person("Nicholas", 29, "Software Engineer");
上面这个例子中，Person构造函数使用this对象给三个属性赋值：name、age和job。当和 new操作符连用时，则会创建一个新的Person对象，同时会给它分配这些属性。问题出在当没有使用new操作符来调用该构造函数的情况上。由于该this对象是在运行时绑定的，所以直接调用Person()，this会映射到全局对象window上，导致错误对象属性的意外增加。例如： var person = Person("Nicholas", 29, "Software Engineer"); alert(window.name); //"Nicholas" alert(window.age); //29 alert(window.job); //"Software Engineer" ScopeSafeConstructorsExample01.htm 这里，原本针对Person实例的三个属性被加到window对象上，因为构造函数是作为普通函数调用的，忽略了new操作符。这个问题是由this对象的晚绑定造成的，在这里this被解析成了window对象。由于window 的name 属性是用于识别链接目标和frame的，所以这里对该属性的偶然覆盖可能会导致该页面上出现其他错误。这个问题的解决方法就是创建一个作用域安全的构造函数。 作用域安全的构造函数在进行任何更改前，首先确认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" ScopeSafeConstructorsExample02.htm 这段代码中的Person 构造函数添加了一个检查并确保this对象是Person 实例的if语句，它表示要么使用new操作符，要么在现有的Person实例环境中调用构造函数。任何一种情况下，对象初始化都能正常进行。如果this并非Person的实例，那么会再次使用new操作符调用构造函数并返回结果。最后的结果是，调用Person构造函数时无论是否使用new操作符，都会返回一个Person的新实例，这就避免了在全局对象上意外设置属性。 关于作用域安全的构造函数的贴心提示。实现这个模式后，你就锁定了可以调用构造函数的环境。如果你使用构造函数窃取模式的继承且不使用原型链，那么这个继承很可能被破坏。这里有个例子： function Polygon(sides){ if (this instanceof Polygon) { this.sides = sides; this.getArea = function(){
return 0; }; } else { return new Polygon(sides); } } function Rectangle(width, height){ Polygon.call(this, 2); this.width = width; this.height = height; this.getArea = function(){ return this.width * this.height; }; } var rect = new Rectangle(5, 10); alert(rect.sides); //undefined ScopeSafeConstructorsExample03.htm 在这段代码中，Polygon构造函数是作用域安全的，然而Rectangle构造函数则不是。新创建一个Rectangle 实例之后，这个实例应该通过Polygon.call()来继承Polygon的sides属性。但是，由于Polygon 构造函数是作用域安全的，this 对象并非Polygon 的实例，所以会创建并返回一个新的Polygon 对象。Rectangle 构造函数中的this对象并没有得到增长，同时Polygon.call()返回的值也没有用到，所以Rectangle实例中就不会有sides属性。 如果构造函数窃取结合使用原型链或者寄生组合则可以解决这个问题。考虑以下例子： function Polygon(sides){ if (this instanceof Polygon) { this.sides = sides; this.getArea = function(){ return 0; }; } else { return new Polygon(sides); } } function Rectangle(width, height){ Polygon.call(this, 2); this.width = width; this.height = height; this.getArea = function(){ return this.width * this.height; }; } Rectangle.prototype = new Polygon(); var rect = new Rectangle(5, 10); alert(rect.sides); //2
上面这段重写的代码中，一个Rectangle实例也同时是一个Polygon实例，所以Polygon.call()会照原意执行，最终为Rectangle实例添加了sides属性。 多个程序员在同一个页面上写JavaScript代码的环境中，作用域安全构造函数就很有用了。届时，对全局对象意外的更改可能会导致一些常常难以追踪的错误。除非你单纯基于构造函数窃取来实现继承，推荐作用域安全的构造函数作为最佳实践。 22.1.3 惰性载入函数 因为浏览器之间行为的差异，多数JavaScript代码包含了大量的 if 语句，将执行引导到正确的代码中。看看下面来自上一章的createXHR()函数。 function createXHR(){ if (typeof XMLHttpRequest != "undefined"){ return new XMLHttpRequest(); } else if (typeof ActiveXObject != "undefined"){ if (typeof arguments.callee.activeXString != "string"){ var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"], i,len; for (i=0,len=versions.length; i < len; i++){ try { new ActiveXObject(versions[i]); arguments.callee.activeXString = versions[i]; break; } catch (ex){ //跳过 } } } return new ActiveXObject(arguments.callee.activeXString); } else { throw new Error("No XHR object available."); } } 每次调用createXHR()的时候，它都要对浏览器所支持的能力仔细检查。首先检查内置的XHR，然后测试有没有基于ActiveX的XHR，最后如果都没有发现的话就抛出一个错误。每次调用该函数都是这样，即使每次调用时分支的结果都不变：如果浏览器支持内置 XHR，那么它就一直支持了，那么这种测试就变得没必要了。即使只有一个if语句的代码，也肯定要比没有if语句的慢，所以如果if语句不必每次执行，那么代码可以运行地更快一些。解决方案就是称之为惰性载入的技巧。 惰性载入表示函数执行的分支仅会发生一次。有两种实现惰性载入的方式，第一种就是在函数被调用时再处理函数。在第一次调用的过程中，该函数会被覆盖为另外一个按合适方式执行的函数，这样任何对原函数的调用都不用再经过执行的分支了。例如，可以用下面的方式使用惰性载入重写createXHR()。 function createXHR(){ if (typeof XMLHttpRequest != "undefined"){ createXHR = function(){
return new XMLHttpRequest(); }; } else if (typeof ActiveXObject != "undefined"){ createXHR = function(){ if (typeof arguments.callee.activeXString != "string"){ var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"], i, len; for (i=0,len=versions.length; i < len; i++){ try { new ActiveXObject(versions[i]); arguments.callee.activeXString = versions[i]; break; } catch (ex){ //skip } } } return new ActiveXObject(arguments.callee.activeXString); }; } else { createXHR = function(){ throw new Error("No XHR object available."); }; } return createXHR(); } LazyLoadingExample01.htm 在这个惰性载入的createXHR()中，if语句的每一个分支都会为createXHR变量赋值，有效覆盖了原有的函数。最后一步便是调用新赋的函数。下一次调用createXHR()的时候，就会直接调用被分配的函数，这样就不用再次执行if语句了。 第二种实现惰性载入的方式是在声明函数时就指定适当的函数。这样，第一次调用函数时就不会损失性能了，而在代码首次加载时会损失一点性能。以下就是按照这一思路重写前面例子的结果。 var createXHR = (function(){ if (typeof XMLHttpRequest != "undefined"){ return function(){ return new XMLHttpRequest(); }; } else if (typeof ActiveXObject != "undefined"){ return function(){ if (typeof arguments.callee.activeXString != "string"){ var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"], i, len; for (i=0,len=versions.length; i < len; i++){ try { new ActiveXObject(versions[i]); arguments.callee.activeXString = versions[i]; break; } catch (ex){ //skip } }
} return new ActiveXObject(arguments.callee.activeXString); }; } else { return function(){ throw new Error("No XHR object available."); }; } })(); LazyLoadingExample02.htm 这个例子中使用的技巧是创建一个匿名、自执行的函数，用以确定应该使用哪一个函数实现。实际的逻辑都一样。不一样的地方就是第一行代码（使用var定义函数）、新增了自执行的匿名函数，另外每个分支都返回正确的函数定义，以便立即将其赋值给createXHR()。 惰性载入函数的优点是只在执行分支代码时牺牲一点儿性能。至于哪种方式更合适，就要看你的具体需求而定了。不过这两种方式都能避免执行不必要的代码。 22.1.4 函数绑定 另一个日益流行的高级技巧叫做函数绑定。函数绑定要创建一个函数，可以在特定的this环境中以指定参数调用另一个函数。该技巧常常和回调函数与事件处理程序一起使用，以便在将函数作为变量传递的同时保留代码执行环境。请看以下例子： var handler = { message: "Event handled", handleClick: function(event){ alert(this.message); } }; var btn = document.getElementById("my-btn"); EventUtil.addHandler(btn, "click", handler.handleClick); 在上面这个例子中，创建了一个叫做handler 的对象。handler.handleClick()方法被分配为一个DOM按钮的事件处理程序。当按下该按钮时，就调用该函数，显示一个警告框。虽然貌似警告框应该显示 Event handled，然而实际上显示的是 undefiend。这个问题在于没有保存handler.handleClick()的环境，所以this 对象最后是指向了DOM按钮而非handler（在IE8中，this指向window。）可以如下面例子所示，使用一个闭包来修正这个问题。 var handler = { message: "Event handled", handleClick: function(event){ alert(this.message); } }; var btn = document.getElementById("my-btn"); EventUtil.addHandler(btn, "click", function(event){ handler.handleClick(event); });
这个解决方案在onclick 事件处理程序内使用了一个闭包直接调用handler.handleClick()。当然，这是特定于这段代码的解决方案。创建多个闭包可能会令代码变得难于理解和调试。因此，很多JavaScript 库实现了一个可以将函数绑定到指定环境的函数。这个函数一般都叫bind()。 一个简单的bind()函数接受一个函数和一个环境，并返回一个在给定环境中调用给定函数的函数，并且将所有参数原封不动传递过去。语法如下： function bind(fn, context){ return function(){ return fn.apply(context, arguments); }; } FunctionBindingExample01.htm 这个函数似乎简单，但其功能是非常强大的。在bind()中创建了一个闭包，闭包使用apply()调用传入的函数，并给apply()传递context 对象和参数。注意这里使用的arguments 对象是内部函数的，而非bind()的。当调用返回的函数时，它会在给定环境中执行被传入的函数并给出所有参数。bind()函数按如下方式使用： var handler = { message: "Event handled", handleClick: function(event){ alert(this.message); } }; var btn = document.getElementById("my-btn"); EventUtil.addHandler(btn, "click", bind(handler.handleClick, handler)); FunctionBindingExample01.htm 在这个例子中，我们用bind()函数创建了一个保持了执行环境的函数，并将其传给EventUtil. addHandler()。event对象也被传给了该函数，如下所示： var handler = { message: "Event handled", handleClick: function(event){ alert(this.message + ":" + event.type); } }; var btn = document.getElementById("my-btn"); EventUtil.addHandler(btn, "click", bind(handler.handleClick, handler)); FunctionBindingExample01.htm handler.handleClick()方法和平时一样获得了event 对象，因为所有的参数都通过被绑定的函数直接传给了它。 ECMAScript 5 为所有函数定义了一个原生的bind()方法，进一步简单了操作。换句话说，你不用再自己定义bind()函数了，而是可以直接在函数上调用这个方法。例如：
var handler = { message: "Event handled", handleClick: function(event){ alert(this.message + ":" + event.type); } }; var btn = document.getElementById("my-btn"); EventUtil.addHandler(btn, "click", handler.handleClick.bind(handler)); FunctionBindingExample02.htm 原生的bind()方法与前面介绍的自定义bind()方法类似，都是要传入作为this值的对象。支持原生bind()方法的浏览器有IE9+、Firefox 4+和Chrome。 只要是将某个函数指针以值的形式进行传递，同时该函数必须在特定环境中执行，被绑定函数的效用就突显出来了。它们主要用于事件处理程序以及 setTimeout() 和 setInterval()。然而，被绑定函数与普通函数相比有更多的开销，它们需要更多内存，同时也因为多重函数调用稍微慢一点，所以最好只在必要时使用。 22.1.5 函数柯里化 与函数绑定紧密相关的主题是函数柯里化（function currying），它用于创建已经设置好了一个或多个参数的函数。函数柯里化的基本方法和函数绑定是一样的：使用一个闭包返回一个函数。两者的区别在于，当函数被调用时，返回的函数还需要设置一些传入的参数。请看以下例子。 function add(num1, num2){ return num1 + num2; } function curriedAdd(num2){ return add(5, num2); } alert(add(2, 3)); //5 alert(curriedAdd(3)); //8 这段代码定义了两个函数：add()和curriedAdd()。后者本质上是在任何情况下第一个参数为5的add()版本。尽管从技术上来说curriedAdd()并非柯里化的函数，但它很好地展示了其概念。 柯里化函数通常由以下步骤动态创建：调用另一个函数并为它传入要柯里化的函数和必要参数。下面是创建柯里化函数的通用方式。 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()函数的主要工作就是将被返回函数的参数进行排序。curry()的第一个参数是要进行柯里化的函数，其他参数是要传入的值。为了获取第一个参数之后的所有参数，在arguments对象上调用了slice()方法，并传入参数1表示被返回的数组包含从第二个参数开始的所有参数。然后args数组包含了来自外部函数的参数。在内部函数中，创建了innerArgs数组用来存放所有传入的参数（又一次用到了slice()）。有了存放来自外部函数和内部函数的参数数组后，就可以使用concat()方法将它们组合为finalArgs，然后使用 apply()将结果传递给该函数。注意这个函数并没有考虑到执行环境，所以调用apply()时第一个参数是null。curry()函数可以按以下方式应用。 function add(num1, num2){ return num1 + num2; } var curriedAdd = curry(add, 5); alert(curriedAdd(3)); //8 FunctionCurryingExample01.htm 在这个例子中，创建了第一个参数绑定为5 的add()的柯里化版本。当调用curriedAdd()并传入3时，3会成为add()的第二个参数，同时第一个参数依然是5，最后结果便是和8。你也可以像下面例子这样给出所有的函数参数： function add(num1, num2){ return num1 + num2; } var curriedAdd = curry(add, 5, 12); alert(curriedAdd()); //17 FunctionCurryingExample01.htm 在这里，柯里化的add()函数两个参数都提供了，所以以后就无需再传递它们了。 函数柯里化还常常作为函数绑定的一部分包含在其中，构造出更为复杂的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); }; } FunctionCurryingExample02.htm 对curry()函数的主要更改在于传入的参数个数，以及它如何影响代码的结果。curry()仅仅接受一个要包裹的函数作为参数，而bind()同时接受函数和一个object对象。这表示给被绑定的函数的参数是从第三个开始而不是第二个，这就要更改 slice()的第一处调用。另一处更改是在倒数第 3 行将object 对象传给apply()。当使用 bind()时，它会返回绑定到给定环境的函数，并且可能它其中某些函数参数已经被设好。当你想除了event对象再额外给事件处理程序传递参数时，这非常有用，例如：
var handler = { message: "Event handled", handleClick: function(name, event){ alert(this.message + ":"+ name + ":"+ event.type); } }; var btn = document.getElementById("my-btn"); EventUtil.addHandler(btn, "click", bind(handler.handleClick, handler, "my-btn")); FunctionCurryingExample02.htm 在这个更新过的例子中，handler.handleClick()方法接受了两个参数：要处理的元素的名字和event 对象。作为第三个参数传递给bind()函数的名字，又被传递给了handler.handleClick()，而handler.handleClick()也会同时接收到event 对象。 ECMAScript 5的bind()方法也实现函数柯里化，只要在this的值之后再传入另一个参数即可。 var handler = { message: "Event handled", handleClick: function(name, event){ alert(this.message + ":" + name + ":" + event.type); } }; var btn = document.getElementById("my-btn"); EventUtil.addHandler(btn, "click", handler.handleClick.bind(handler, "my-btn")); FunctionCurryingExample03.htm JavaScript 中的柯里化函数和绑定函数提供了强大的动态函数创建功能。使用bind()还是curry()要根据是否需要object对象响应来决定。它们都能用于创建复杂的算法和功能，当然两者都不应滥用，因为每个函数都会带来额外的开销。 22.2 防篡改对象 JavaScript 共享的本质一直是开发人员心头的痛。因为任何对象都可以被在同一环境中运行的代码修改。开发人员很可能会意外地修改别人的代码，甚至更糟糕地，用不兼容的功能重写原生对象。ECMAScript 5致力于解决这个问题，可以让开发人员定义防篡改对象（tamper-proof object）。 第6章讨论了对象属性的问题，也讨论了如何手工设置每个属性的[[Configurable]]、[[Writable]]、 [[Enumerable]]、[[Value]]、[[Get]]以及[[Set]]特性，以改变属性的行为。类似地，ECMAScript 5也增加了几个方法，通过它们可以指定对象的行为。 不过请注意：一旦把对象定义为防篡改，就无法撤销了。
22.2.1 不可扩展对象 默认情况下，所有对象都是可以扩展的。也就是说，任何时候都可以向对象中添加属性和方法。例如，可以像下面这样先定义一个对象，后来再给它添加一个属性。 var person = { name: "Nicholas" }; person.age = 29; 即使第一行代码已经完整定义 person 对象，但第二行代码仍然能给它添加属性。现在，使用Object.preventExtensions()方法可以改变这个行为，让你不能再给对象添加属性和方法。 例如： var person = { name: "Nicholas" }; Object.preventExtensions(person); person.age = 29; alert(person.age); //undefined NonExtensibleObjectsExample01.htm 在调用了Object.preventExtensions()方法后，就不能给person 对象添加新属性和方法了。在非严格模式下，给对象添加新成员会导致静默失败，因此person.age 将是undefined。而在严格模式下，尝试给不可扩展的对象添加新成员会导致抛出错误。 虽然不能给对象添加新成员，但已有的成员则丝毫不受影响。你仍然还可以修改和删除已有的成员。另外，使用Object.istExtensible()方法还可以确定对象是否可以扩展。 var person = { name: "Nicholas" }; alert(Object.isExtensible(person)); Object.preventExtensions(person); alert(Object.isExtensible(person)); 22.2.2 密封的对象 //true //false NonExtensibleObjectsExample02.htm ECMAScript 5 为对象定义的第二个保护级别是密封对象（sealed object）。密封对象不可扩展，而且已有成员的[[Configurable]]特性将被设置为false。这就意味着不能删除属性和方法，因为不能使用Object.defineProperty()把数据属性修改为访问器属性，或者相反。属性值是可以修改的。 要密封对象，可以使用Object.seal()方法。 var person = { name: "Nicholas" }; Object.seal(person); person.age = 29; alert(person.age); delete person.name; alert(person.name); //undefined //"Nicholas" SealedObjectsExample01.htm 在这个例子中，添加age属性的行为被忽略了。而尝试删除name属性的操作也被忽略了，因此这个属性没有受任何影响。这是在非严格模式下的行为。在严格模式下，尝试添加或删除对象成员都会导致抛出错误。
使用Object.isSealed()方法可以确定对象是否被密封了。因为被密封的对象不可扩展，所以用Object.isExtensible()检测密封的对象也会返回false。 var person = { name: "Nicholas" }; alert(Object.isExtensible(person)); //true alert(Object.isSealed(person)); //false Object.seal(person); alert(Object.isExtensible(person)); //false alert(Object.isSealed(person)); //true 22.2.3 冻结的对象 SealedObjectsExample02.htm 最严格的防篡改级别是冻结对象（frozen object）。冻结的对象既不可扩展，又是密封的，而且对象数据属性的[[Writable]]特性会被设置为false。如果定义[[Set]]函数，访问器属性仍然是可写的。ECMAScript 5定义的Object.freeze()方法可以用来冻结对象。 var person = { name: "Nicholas" }; Object.freeze(person); person.age = 29; alert(person.age); delete person.name; alert(person.name); person.name = "Greg"; alert(person.name); //undefined //"Nicholas" //"Nicholas" FrozenObjectsExample01.htm 与密封和不允许扩展一样，对冻结的对象执行非法操作在非严格模式下会被忽略，而在严格模式下会抛出错误。 当然，也有一个Object.isFrozen()方法用于检测冻结对象。因为冻结对象既是密封的又是不可扩展的，所以用 Object.isExtensible()和 Object.isSealed()检测冻结对象将分别返回 false和true。 var person = { name: "Nicholas" }; alert(Object.isExtensible(person)); alert(Object.isSealed(person)); alert(Object.isFrozen(person)); Object.freeze(person); alert(Object.isExtensible(person)); alert(Object.isSealed(person)); alert(Object.isFrozen(person)); //true //false //false //false //true //true
对JavaScript 库的作者而言，冻结对象是很有用的。因为JavaScript库最怕有人意外（或有意）地修改了库中的核心对象。冻结（或密封）主要的库对象能够防止这些问题的发生。 22.3 高级定时器 使用setTimeout()和 setInterval()创建的定时器可以用于实现有趣且有用的功能。虽然人们对JavaScript 的定时器存在普遍的误解，认为它们是线程，其实JavaScript是运行于单线程的环境中的，而定时器仅仅只是计划代码在未来的某个时间执行。执行时机是不能保证的，因为在页面的生命周期中，不同时间可能有其他代码在控制JavaScript进程。在页面下载完后的代码运行、事件处理程序、Ajax回调函数都必须使用同样的线程来执行。实际上，浏览器负责进行排序，指派某段代码在某个时间点运行的优先级。 可以把JavaScript想象成在时间线上运行的。当页面载入时，首先执行是任何包含在
1.1 作用域安全的构造函数
①直接调用构造函数而不适用new操作符时，由于this对象的晚绑定，它将映射在全局对象window上，导致对象属性错误增加到window。
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
}
Var person = Person("Jay",29,"singer"); //属性增加到window对象上。
②作用域安全构造函数
function Person(name,age,job){
if(this instanceof Person){
this.name = name;
this.age = age;
}else{
return new Person(name,age);
}
}
③上述作用域安全的构造函数，如果使用构造函数窃取模式的继承且不使用原型链，那么这个继承很可能被破坏。
□如果构造函数窃取结合使用原型链或者寄生式组合则可以解决这个问题。
function Polygon(side){
if(this instanceof Polygon){
this.sides = sides;
this.getArea = function{return 0;};
}else{
return new Polygon(sides);
}
}
function Rectangle(width,height){
Polygon.call(this,2);
this.width = width;
this.height = height;
this.getArea = function(){
return this.width * this.height;
};
}
Rectangle.prototype = new Polygon();
var rect = new Rectangle(5,10);
alert(rect.sides); //2
1.2 惰性载入函数
①惰性载入表示函数执行的分支仅会发生一次：既第一次调用的时候。在第一次调用的过程中，该函数会被覆盖为另一个按合适方式执行的函数，这样任何对原函数的调用都不用再经过执行的分支了。
■优点：
□要执行的适当代码只有当实际调用函数时才进行。
□尽管第一次调用该函数会因额外的第二个函数调用而稍微慢点，但后续的调用都会很快，因避免了多重条件。
function create XHR(){
if(typeof XMLHttp Request != "undefined"){
createXHR = function(){
return new XMLHttpRequest();
};
}else if(typeof ActiveXObject != "undefined"){
createXHR = function(){
if(typeof arguments.callee.activeXString != "string"){
var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"];
for(vai I = 0, len = versions.length; I < len; i++){
try{
Var xhr = new ActiveXObject(version[i]);
Arguments.callee.activeXString = version[i];
Return xhr;
}catch(ex){
//skip
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
};
}else{
createXHR = function(){
throw new Error("No XHR Object available.");
};
}
return createXHR();
}
1.3 函数绑定
①函数绑定要创建一个函数，可以在特定环境中以指定参数调用另一个函数。
②一个简单的bind()函数接受一个函数和一个环境，并返回一个在给定环境中调用给定函数的函数，并且将所有参数原封不动传递过去。
function bind(fn, context){
return function(){
return fn.apply(context, arguments);
};
}
③被绑定函数与普通函数相比有更多的开销——它们需要更多内存，同时也因为多重函数调用而稍微慢一点——所以最好只在必要时使用。
1.4 函数柯里化
定义：用于创建已经设置好了一个或多个参数的函数。函数柯里化的基本方法和函数绑定是一样的：使用一个闭包返回一个函数。两者的区别在于，当函数被调用时，返回函数还需要设置一些传入的参数。
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);
};
}
2.高级定时器
①JavaScript是单线程程序，定时器是在间隔时间后将代码添加到列队。
②执行完一套代码后，JavaScript进程返回一段很短的时间，这样页面上的其他处理就可以进行了。
2.1 重复的定时器
①setInterval()仅当没有该定时器的任何其他代码实例时，才将定时器代码添加到队列中。
□某些间隔会被跳过。
□多个定时器代码执行之间的间隔可能会比预期小。
②避免setInterval()的两个缺点，使用链式setTimeout()调用：
setTimeout(function(){
//处理
if(condition){
setTimeout(arguments.callee, interval);
}
},interval);
2.2 Yielding Processes
①JavaScript长时间运行脚本制约：如代码运行超过特定的时间或特定的语句数量就不会让它继续执行。
②当某个函数要花200ms以上的事件完成，最好分割为一系列可以使用定时器的小任务。
③数组分块技术：为要处理的项目创建一个队列，然后使用定时器取出下一个要处理的项目进行处理，接着再设置另一个定时器。
function chunk(array, process, context){
setTimeout(function(){
var item = array.shift();
process.call(context,item);
if(array.length>0){
setTimeout(arguments.callee, 100);
}
}
}
2.3 函数节流
①DOM操作比起非DOM交互需要更多内存和CPU时间。连续尝试进行过多的DOM相关操作可能会导致浏览器挂起，有时甚至崩溃。
②函数节流思想：某些代码不可以在没有间断的情况连续重复执行。
□示例
var processor = {
timeoutId : null,
//实际进行处理的方法
performProcessing : function(){
//实际执行的方法
},
//初始处理调用的方法
process : function(){
clearTimeout(this.timeoutId);
var that = this;
this.timeoutId = setTimeout(function(){
that.performProcessing();
},100);
}
};
//尝试开始执行
Processor.process();
□简化模式
function throttle(method,context){
clearTimeout(mehtod.tId);
mehtod.tId = setTimeout(function(){
method.call(context);
},100);
}
3.自定义事件
①事件是一种叫做观察者的设计模式，这是一种创建松散耦合代码的技术。
□对象可以发布事件，用来表示该对象声明周期中某个有趣的时刻到了。
□其他对象可以观察该对象，等待有趣的时刻到来并通过运行代码来响应。
②观察者模式由两类对象组成：主体和观察者。
□主体负责发布事件，同时观察者通过订阅这些事件来观察主体。
□主体并不知道观察者的任何事情，它可以独立自存在并正常运作即使观察者不在。
③自定义事件：创建一个管理事件的对象，让其他对象监听那些事件。
function EventTarget(){
this.handlers = {};
}
EventTarget.prototype = {
constructor : EventTarget,
addHandler : function(type,handler){
if(typeof this.handlers[type] == "undefined"){
this.handlers[type] = [];
}
this.handlers[type].push(handler);
},
fire : function(event){
if(!event.target){
event.target = this;
}
if(this.handlers[event.type] instanceof Array){
var handlers = this.handlers[event.type];
for(var i=0,len=handlers.length; i
}
}
},
removeHandler : function(type, handler){
if(this.handlers[type] instanceof Array){
var handlers = this.handlers[type];
for(var i=0,len=handlers.length; i
break;
}
}
Handlers.splice(i,1);
}
};
④使用EventTarget类型的自定义事件可以如下使用：
function handleMessage(event){
alert("message received:" + event.message);
}
//创建一个新对象
var target = new EventTarget();
//添加一个事件处理程序
target.addHandler("message",handleMessage);
//触发事件
target.fire({type:"message",message:"hello world!"});
//删除事件处理程序
target.removeHandler("message",handleMessage);
⑤使用实例
function Person(name,age){
eventTarget.call(this);
this.name = name;
this.age = age;
}
inheritPrototype(Person, EventTarget);
Person.prototype.say = function(message){
this.fire({type:"message", message:message});
};
function handleMessage(event){
alert(event.target.name + "says: " + event.message);
}
//创建新person
var person = new Person("Nicholas",29);
//添加一个事件处理程序
Person.addHandler("message",handleMessage);
//在该对象上调用1个方法，它触发消息事件
person.say("Hi there");
4.拖放
功能：①拖放②添加了自定义事件
var DragDrop = function(){
var dragdrop = new EventTarget();
var dragging = null;
var diffX = 0;
var diffY = 0;
function handleEvent(event){
//获取事件和对象
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
//确定事件类型
switch(event.type){
case "mousedown" :
if(target.className.indexOf("draggable")>-1){
dragging = target;
diffX = event.clientX - target.offsetLeft;
diffY = event.clientY - target.offsetTop;
dragdorp.fire(
{
type:"dragstart",
target : dragging,
x : event.clientX,
y : event.clientY
}
);
break;
case "mousemove" :
if(dragging !== null){
//获取事件
event = EventUtil.getEvent(event);
//指定位置
dragging.style.left = (event.clientX - diffX) + "px";
dragging.style.top = (event.clientY - diffY) + "px";
//触发自定义事件
dragdrop.fire(
{
type : "drag",
target : dargging,
x : event.clientX,
y : event.clientY
}
);
}
break;
case "mouseup" :
dargdorp.fire(
{
type : "dragend",
target : dragging,
x : event.clientX,
y : event.clientY
}
);
dragging = null;
break;
}
}
//公共接口
dragdrop.enable = function() {
EventUtil.addHandler(document, "mousedown", handleEvent);
EventUtil.addHandler(document, "mousemove", handleEvent);
EventUtil.addHandler(document, "mouseup", handleEvent);
};
dragdrop.disable = function(){
EventUtil.removeHandler(document, "mousedown", handleEvent);
EventUtil.removeHandler(document, "mousemove", handleEvent);
EventUtil.removeHandler(document, "mouseup", handleEvent);
};
return dragdrop;
}();
高级函数
安全的类型检测
Javascript内置的类型检测机制并非完全可靠。比如typeof操作符会导致检测数据类型时不靠谱，Safari（直至第4版）对正则表达式应用时会返回"function"，因此很难判定某个值是不是函数。
在检测某个对象是原生对象还是开发人员自定义的对象时会有问题。原因是浏览器开始原生支持JSON对象了。因为很多人在使用Douglas Crockford的JSON库，而该库定义了一个全局JSON对象。所以开发人员很难确定页面中的JSON对象是不是原生的。
在任何值上调用Object原生的toString()方法，都会返回一个[Object NativeConstructorName]格式的字符串。每个类在内部都有一个[[Class]]属性，这个属性中就指定了上述字符串中的构造函数名。例子：
alert(Object.prototype.toString.call(value)); // "[Object Array]"
由于原生数组的构造函数名与全局作用域无关，因此使用toString()就能保证返回一致的值。
function isArray(value){
return Object.prototype.toString.call(value) == "[object Array]";
}
测试某个值是不是原生函数或正则表达式：
function isFunction(value){
return Object.prototype.toString.call(value) == "[object Function]";
}
function isRegExp(value){
return Object.prototype.toString.call(value) == "[object RegExp]";
}
注意：在IE中以COM对象形式实现的任何函数，isFunction()都返回false，因为它们并非原生的JavaScript函数。
作用域安全的构造函数
构造函数是一个使用new操作符调用的函数，用到的this对象会指向新创建的对象实例
function Person(name, age){
this.name = name;
this.age = age;
}
var person = new Person('Nicholas', 29);
Person使用的this对象给属性赋值。和new操作符连用会创建一个新的Person对象。当没有用new操作符调用构造函数时。由于this对象是在运行时绑定的，直接调用Person()，this会映射到全局对象window上，导致错误对象属性的意外增加。
var person = Person('Nicholas', 29);
alert(window.name); //'Nicholas'
alert(window,age); // 29
没有new操作符，问题是由this对象的晚绑定造成的，这里this被解析成了window对象。这个问题的解决方法就是创建一个作用域安全的构造函数。
function Person(name, age){
if(this instanceof Person){
this.name = name;
this.age = age;
}else{
return new Person(name, age)
}
}
var person1 = Person('Nicholas', 29);
alert(window.name); // ' '
alert(person.name); // 'Nicholas'
var person2 = new Person ('Shelby', 33);
Person构造函数添加了一个检查并确保this对象是Person实例的if语句，要么使用new操作符，要么在现有Person实例中调用构造函数。如果并非Person的实例，就会再次使用new操作符调用构造函数。无论是否使用new操作符，都会返回一个Person的新实例，避免在全局对象上意外设置属性。
function Polygon(sides){
if(this instanceof Polygon){
this.sides = sides;
this.getArea = function(){
return 0;
}
}else{
return new Poygon(sides);
}
}
function Rectangle(width, height){
Polygon.call(this, 2);
this.width = width;
this.height = height;
this.getArea = function(){
return this.width * this.height;
}
}
var rect = new Rectangle(5, 10);
alert(rect.sides); // undefined;
Person构造函数是作用域安全的，而Rectangle不是。新创建一个Rectangle实例之后，应该通过Polygon.call()来继承Polygon的sides属性。但是由于polygon构造函数是作用域安全的，this对象并非Polygon的实例，所以会创建并返回一个新的Polygon对象。Rectangle构造函数中的this对象没有得到增长，同时Polygon.call()返回的值没有用到，所以Rectangle实例中不会有sideshow属性。
构造函数窃取结合使用原型链或者寄生组合可以解决这个问题
function Polygon(sides){
if(this instanceof Polygon){
this.sides = sides;
this.getArea = function(){
return 0;
}
}else{
return new Poygon(sides);
}
}
function Rectangle(width, height){
Polygon.call(this, 2);
this.width = width;
this.height = height;
this.getArea = function(){
return this.width * this.height;
}
}
Rectangle.prototype = new Polygon();
var rect = new Rectangle(5, 10);
alert(rect.sides); // 2;
Rectangle实例同时是一个Polygon实例，Rectangle实例添加了sides属性。
惰性载入函数
此处图片显示
每次调用createXHR()的时候，都要对浏览器所支持的能力仔细检查。即使只有一个if语句的代码，也肯定要比没有if语句的慢，所以如果if语句不必每次执行，代码可以运行的更快一些。解决方案称之为惰性载入的技巧。
惰性载入表示函数执行的分支仅会发生一次，有两种实现惰性载入的方式，第一种就是在函数被调用时再处理函数。在第一次调用的过程中，该函数会被覆盖为另外一个按合适方式执行的函数，这样任何对原函数的调用都不用在经过执行的分支了。改写createXHR()
此处图片显示
if语句的每一个分支都会为createXHR变量赋值，有效覆盖了原有的函数。最后一步是调用新赋的函数。下次调用时就会直接调用被分配的函数，就不用再次执行if语句了。
第二种实现方式是在声明函数时就指定适当的函数。在第一次调用函数时就不会损失性能了，在代码首次加载时会损失一点性能。
此处图片显示
例子中使用的技巧是创建一个匿名、自执行的函数，用以确定应该使用哪一个函数实现。逻辑都一样，不同的是第一行代码使用var定义函数、新增了自执行的匿名函数，另外每个分支都返回正确的函数定义，以便立即将其赋值给creatXHR()。
惰性载入函数的优点是在执行分支代码时牺牲一点儿性能。
函数绑定
函数绑定要创建一个函数，可以在特定的this环境中以指定参数调用另一个函数。常常和回调函数与事件处理程序一起使用，以便在将函数作为变量传递的同时保留代码执行环境。
var handler = {
message: "Event handled",
handleClick: function(event){
alert(this.message);
}
}
var btn = document.getElementById('btn');
EventUtil.addHandLer(btn, "click", handler.handleClick);
按下按钮显示的是undefiend，问题在于没有保存handler.handleClick()的环境，this对象最后指向了DOM按钮而非handler。
使用闭包修改
var handler = {
message: "Event handled",
handleClick: function(event){
alert(this.message);
}
}
var btn = document.getElementById('btn');
EventUtil.addHandLer(btn, "click", function(event){
handler.handleClick(event);
} );
在事件处理程序中使用一个闭包直接调用handler.handleClick()。创建多个闭包可能会使代码变得难于理解和调试。很多Js库实现了一个可以将函数绑定到指定环境的函数，这个函数一般都叫bind()。
bind()函数接受一个函数和一个环境，并返回一个在给定环境中调用给定函数的函数。
function bind(fn, context){
return function(){
return fn.apply(context, arguments);
}
}
bind()中创建一个闭包，闭包使用apply()调用传入的函数，给apply()传递context对象和参数。这里使用的arguments对象是内部函数，不是bind()的。
var handler = {
message: "Event handled",
handleClick: function(event){
alert(this.message);
}
}
var btn = document.getElementById('btn');
EventUtil.addHandLer(btn, "click", bind(handler.handlClick, handler) );
用bind()函数创建了一个保持了执行环境的函数，并将其传给EventUtil.addHandler()。event对象也被传给了函数。
ECMAScript5为所有函数定义了一个原生的bind()方法，进一步简单操作，换句话说，不用再自己定义bing()函数了，可以直接在函数上调用这个方法。
var handler = {
message: "Event handled",
handleClick: function(event){
alert(this.message + “：” + event.type);
}
}
var btn = document.getElementById('btn');
EventUtil.addHandLer(btn, "click", handler.handlClick.bind( handler) );
函数柯里化
与函数绑定紧密相关的主题是函数柯里化( function currying )，它用于创建已经设置好了一个或多个参数的函数。函数柯里化的基本方法和函数绑定是一样的：使用了一个闭包返回一个函数。两者区别在于，当函数被调用时，返回的函数还需要设置一些传入的参数。
function add(num1, num2){
return num1 + num2;
}
function curriedAdd(num2){
return add(5, num2);
}
alert(add(2,3)); // 5
alert(curriedAdd(3)); // 8
curriedAdd()并非柯里化的函数，但很好的展示了其概念。
柯里化函数动态创建步骤：调用另一个函数并为它传入要柯里化的函数和必要参数。
通用方式：
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()函数就是将返回函数的参数进行排序。
curry()的第一个参数是要进行柯里化的函数，其他参数是要转入的值。为了获取第一个参数之后的所有参数，在arguments对象上调用了slice()方法，并传入参数1表示被返回的数组包含从第二个参数开始的所有参数。然后args数组包含了来自外部函数的参数。
内部函数中创建了innerArgs数组用来存放所有传入的参数。
有外部函数和内部函数的参数数组可以用concat()将他们组合为finalArgs，然后用apply()将结果传递给函数。
注意：这个函数没有考虑执行环境，所有调用apply()的第一个参数是null。
function add(num1,num2){
return num1 + num2;
}
var curriedAdd = curry(add, 5);
alert(curriedAdd(3)); // 8
创建了第一个参数绑定为5的add()的柯里化版本，调用curriedAdd()并传入3时，3会成为add()的第二个参数，结果为8。
function add(num1,num2){
return num1 + num2;
}
var curriedAdd = curry(add, 5, 3);
alert(curriedAdd()); // 8
防篡改对象
因为任何对象都可以被在同一环境中运行的代码修改。开发人员很可能会意外的修改别人的代码，ECMAScript5可以让开发人员定义防篡改对象（tamper-proof object)。
注意：一旦把对象定义为防篡改，就无法撤销了。
不可扩展对象
var person = { name: "123" };
person.age = 29;
添加age属性
使用Object.preventExtensions()方法就不能给对象添加属性和方法。
var person = { name: "123" };
Object.preventExtensions(person);
person.age = 29;
alert(person.age); // undefined
在非严格模式下，给对象添加新成员会导致静默失败，所以是undefined。在严格模式下会导致抛出错误。
但已有成员可以修改和删除。
使用Object.istExtensible()方法可以确定对象是否可以扩展。
var person = { name: "123" };
alert(Object.istExtensible(person)); // true
Object.preventExtensions(person);
alert(Object.istExtensible(person)); // false
密封的对象
密封的对象不可扩展，已有成员的[[Configurable]]特性将被设置为false。不能删除属性和方法，因为不能使用Object.defineProperty()把数据属性修改为访问器属性，或相反。属性值是可以修改的。
var person = { name: "123" };
Object.seal(person);
person.age = 20;
alert(person.age); // undefined
delete person.name;
alert(person.name); // "123"
非严格模式下添加age属性被忽略，删除name属性也被忽略，属性没有任何影响。严格模式下，添加和删除对象成员会抛出错误。
Object.isSealed()方法可以确定对象是否被密封了。因为密封对象不可扩展，所以Object.isExtensible()检测密封对象也返回false。
var person = { name: "123" };
alert(Object.istExtensible(person)); // true
alert(Object.isSealed(person)); // false
Object.seal(person);
alert(Object.isExtensible(person)); // false
alert(Object.isSealed(person)); // true
冻结的对象
最严格的防篡改级别是冻结对象。冻结对象既不可扩展，又是密封的，对象数据属性的[[Writable]]特性会被设置为false。如果定义[[Set]]函数，访问器属性仍然是可写的。
ECMAScript 5定义的Object.frreeze()方法可以用来冻结对象。
var person = { name: "123" };
Object.freeze(person);
person.age = 20;
alert(person.age); // undefined
delete person.name;
alert(person.name); // "123"
person.name = "111"
alert(person.name); // "123"
冻结对象即是密封的又是不可扩展的，所以Object.isExtensible()和Object.isSealed()检测冻结对象分别返回false和true。
var person = { name: "123" };
alert(Object.istExtensible(person)); // true
alert(Object.isSealed(person)); // false
alert(Object.isFrozen(person)); // false
Object.frozen(person);
alert(Object.istExtensible(person)); // false
alert(Object.isSealed(person)); // true
alert(Object.isFrozen(person)); // true
22.1 高级函数 函数是JavaScript 中最有趣的部分之一。它们本质上是十分简单和过程化的，但也可以是非常复杂和动态的。一些额外的功能可以通过使用闭包来实现。此外，由于所有的函数都是对象，所以使用函数指针非常简单。这些令JavaScript函数不仅有趣而且强大。以下几节描绘了几种在JavaScript中使用函数的高级方法。 22.1.1 安全的类型检测 JavaScript 内置的类型检测机制并非完全可靠。事实上，发生错误否定及错误肯定的情况也不在少数。比如说typeof操作符吧，由于它有一些无法预知的行为，经常会导致检测数据类型时得到不靠谱的结果。Safari（直至第4版）在对正则表达式应用typeof操作符时会返回"function"，因此很难确定某个值到底是不是函数。 再比如，instanceof 操作符在存在多个全局作用域（像一个页面包含多个frame）的情况下，也是问题多多。一个经典的例子（第5章也提到过）就是像下面这样将对象标识为数组。 var isArray = value instanceof Array; 以上代码要返回true，value必须是一个数组，而且还必须与Array构造函数在同个全局作用域中。（别忘了，Array是window的属性。）如果value是在另个frame中定义的数组，那么以上代码就会返回false。 在检测某个对象到底是原生对象还是开发人员自定义的对象的时候，也会有问题。出现这个问题的原因是浏览器开始原生支持JSON对象了。因为很多人一直在使用Douglas Crockford的JSON库，而该库定义了一个全局JSON对象。于是开发人员很难确定页面中的JSON对象到底是不是原生的。 解决上述问题的办法都一样。大家知道，在任何值上调用Object原生的toString()方法，都会 返回一个[object NativeConstructorName]格式的字符串。每个类在内部都有一个[[Class]]属性，这个属性中就指定了上述字符串中的构造函数名。举个例子吧。 alert(Object.prototype.toString.call(value)); //"[object Array]" 由于原生数组的构造函数名与全局作用域无关，因此使用toString()就能保证返回一致的值。利用这一点，可以创建如下函数： function isArray(value){ return Object.prototype.toString.call(value) == "[object Array]"; } 同样，也可以基于这一思路来测试某个值是不是原生函数或正则表达式： function isFunction(value){ return Object.prototype.toString.call(value) == "[object Function]"; } function isRegExp(value){ return Object.prototype.toString.call(value) == "[object RegExp]"; } 不过要注意，对于在IE中以COM对象形式实现的任何函数，isFunction()都将返回false（因为它们并非原生的JavaScript函数，请参考第10章中更详细的介绍）。 这一技巧也广泛应用于检测原生JSON 对象。Object 的toString()方法不能检测非原生构造函数的构造函数名。因此，开发人员定义的任何构造函数都将返回[object Object]。有些JavaScript库会包含与下面类似的代码。 var isNativeJSON = window.JSON && Object.prototype.toString.call(JSON) == "[object JSON]"; 在Web开发中能够区分原生与非原生JavaScript对象非常重要。只有这样才能确切知道某个对象到底有哪些功能。这个技巧可以对任何对象给出正确的结论。 请注意，Object.prototpye.toString()本身也可能会被修改。本节讨论的技巧假设Object.prototpye.toString()是未被修改过的原生版本。 22.1.2 作用域安全的构造函数 第6章讲述了用于自定义对象的构造函数的定义和用法。你应该还记得，构造函数其实就是一个使用new 操作符调用的函数。当使用new 调用时，构造函数内用到的this 对象会指向新创建的对象实例，如下面的例子所示： function Person(name, age, job){ this.name = name; this.age = age; this.job = job; } var person = new Person("Nicholas", 29, "Software Engineer");
上面这个例子中，Person构造函数使用this对象给三个属性赋值：name、age和job。当和 new操作符连用时，则会创建一个新的Person对象，同时会给它分配这些属性。问题出在当没有使用new操作符来调用该构造函数的情况上。由于该this对象是在运行时绑定的，所以直接调用Person()，this会映射到全局对象window上，导致错误对象属性的意外增加。例如： var person = Person("Nicholas", 29, "Software Engineer"); alert(window.name); //"Nicholas" alert(window.age); //29 alert(window.job); //"Software Engineer" ScopeSafeConstructorsExample01.htm 这里，原本针对Person实例的三个属性被加到window对象上，因为构造函数是作为普通函数调用的，忽略了new操作符。这个问题是由this对象的晚绑定造成的，在这里this被解析成了window对象。由于window 的name 属性是用于识别链接目标和frame的，所以这里对该属性的偶然覆盖可能会导致该页面上出现其他错误。这个问题的解决方法就是创建一个作用域安全的构造函数。 作用域安全的构造函数在进行任何更改前，首先确认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" ScopeSafeConstructorsExample02.htm 这段代码中的Person 构造函数添加了一个检查并确保this对象是Person 实例的if语句，它表示要么使用new操作符，要么在现有的Person实例环境中调用构造函数。任何一种情况下，对象初始化都能正常进行。如果this并非Person的实例，那么会再次使用new操作符调用构造函数并返回结果。最后的结果是，调用Person构造函数时无论是否使用new操作符，都会返回一个Person的新实例，这就避免了在全局对象上意外设置属性。 关于作用域安全的构造函数的贴心提示。实现这个模式后，你就锁定了可以调用构造函数的环境。如果你使用构造函数窃取模式的继承且不使用原型链，那么这个继承很可能被破坏。这里有个例子： function Polygon(sides){ if (this instanceof Polygon) { this.sides = sides; this.getArea = function(){
return 0; }; } else { return new Polygon(sides); } } function Rectangle(width, height){ Polygon.call(this, 2); this.width = width; this.height = height; this.getArea = function(){ return this.width * this.height; }; } var rect = new Rectangle(5, 10); alert(rect.sides); //undefined ScopeSafeConstructorsExample03.htm 在这段代码中，Polygon构造函数是作用域安全的，然而Rectangle构造函数则不是。新创建一个Rectangle 实例之后，这个实例应该通过Polygon.call()来继承Polygon的sides属性。但是，由于Polygon 构造函数是作用域安全的，this 对象并非Polygon 的实例，所以会创建并返回一个新的Polygon 对象。Rectangle 构造函数中的this对象并没有得到增长，同时Polygon.call()返回的值也没有用到，所以Rectangle实例中就不会有sides属性。 如果构造函数窃取结合使用原型链或者寄生组合则可以解决这个问题。考虑以下例子： function Polygon(sides){ if (this instanceof Polygon) { this.sides = sides; this.getArea = function(){ return 0; }; } else { return new Polygon(sides); } } function Rectangle(width, height){ Polygon.call(this, 2); this.width = width; this.height = height; this.getArea = function(){ return this.width * this.height; }; } Rectangle.prototype = new Polygon(); var rect = new Rectangle(5, 10); alert(rect.sides); //2
上面这段重写的代码中，一个Rectangle实例也同时是一个Polygon实例，所以Polygon.call()会照原意执行，最终为Rectangle实例添加了sides属性。 多个程序员在同一个页面上写JavaScript代码的环境中，作用域安全构造函数就很有用了。届时，对全局对象意外的更改可能会导致一些常常难以追踪的错误。除非你单纯基于构造函数窃取来实现继承，推荐作用域安全的构造函数作为最佳实践。 22.1.3 惰性载入函数 因为浏览器之间行为的差异，多数JavaScript代码包含了大量的 if 语句，将执行引导到正确的代码中。看看下面来自上一章的createXHR()函数。 function createXHR(){ if (typeof XMLHttpRequest != "undefined"){ return new XMLHttpRequest(); } else if (typeof ActiveXObject != "undefined"){ if (typeof arguments.callee.activeXString != "string"){ var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"], i,len; for (i=0,len=versions.length; i < len; i++){ try { new ActiveXObject(versions[i]); arguments.callee.activeXString = versions[i]; break; } catch (ex){ //跳过 } } } return new ActiveXObject(arguments.callee.activeXString); } else { throw new Error("No XHR object available."); } } 每次调用createXHR()的时候，它都要对浏览器所支持的能力仔细检查。首先检查内置的XHR，然后测试有没有基于ActiveX的XHR，最后如果都没有发现的话就抛出一个错误。每次调用该函数都是这样，即使每次调用时分支的结果都不变：如果浏览器支持内置 XHR，那么它就一直支持了，那么这种测试就变得没必要了。即使只有一个if语句的代码，也肯定要比没有if语句的慢，所以如果if语句不必每次执行，那么代码可以运行地更快一些。解决方案就是称之为惰性载入的技巧。 惰性载入表示函数执行的分支仅会发生一次。有两种实现惰性载入的方式，第一种就是在函数被调用时再处理函数。在第一次调用的过程中，该函数会被覆盖为另外一个按合适方式执行的函数，这样任何对原函数的调用都不用再经过执行的分支了。例如，可以用下面的方式使用惰性载入重写createXHR()。 function createXHR(){ if (typeof XMLHttpRequest != "undefined"){ createXHR = function(){
return new XMLHttpRequest(); }; } else if (typeof ActiveXObject != "undefined"){ createXHR = function(){ if (typeof arguments.callee.activeXString != "string"){ var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"], i, len; for (i=0,len=versions.length; i < len; i++){ try { new ActiveXObject(versions[i]); arguments.callee.activeXString = versions[i]; break; } catch (ex){ //skip } } } return new ActiveXObject(arguments.callee.activeXString); }; } else { createXHR = function(){ throw new Error("No XHR object available."); }; } return createXHR(); } LazyLoadingExample01.htm 在这个惰性载入的createXHR()中，if语句的每一个分支都会为createXHR变量赋值，有效覆盖了原有的函数。最后一步便是调用新赋的函数。下一次调用createXHR()的时候，就会直接调用被分配的函数，这样就不用再次执行if语句了。 第二种实现惰性载入的方式是在声明函数时就指定适当的函数。这样，第一次调用函数时就不会损失性能了，而在代码首次加载时会损失一点性能。以下就是按照这一思路重写前面例子的结果。 var createXHR = (function(){ if (typeof XMLHttpRequest != "undefined"){ return function(){ return new XMLHttpRequest(); }; } else if (typeof ActiveXObject != "undefined"){ return function(){ if (typeof arguments.callee.activeXString != "string"){ var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"], i, len; for (i=0,len=versions.length; i < len; i++){ try { new ActiveXObject(versions[i]); arguments.callee.activeXString = versions[i]; break; } catch (ex){ //skip } }
} return new ActiveXObject(arguments.callee.activeXString); }; } else { return function(){ throw new Error("No XHR object available."); }; } })(); LazyLoadingExample02.htm 这个例子中使用的技巧是创建一个匿名、自执行的函数，用以确定应该使用哪一个函数实现。实际的逻辑都一样。不一样的地方就是第一行代码（使用var定义函数）、新增了自执行的匿名函数，另外每个分支都返回正确的函数定义，以便立即将其赋值给createXHR()。 惰性载入函数的优点是只在执行分支代码时牺牲一点儿性能。至于哪种方式更合适，就要看你的具体需求而定了。不过这两种方式都能避免执行不必要的代码。 22.1.4 函数绑定 另一个日益流行的高级技巧叫做函数绑定。函数绑定要创建一个函数，可以在特定的this环境中以指定参数调用另一个函数。该技巧常常和回调函数与事件处理程序一起使用，以便在将函数作为变量传递的同时保留代码执行环境。请看以下例子： var handler = { message: "Event handled", handleClick: function(event){ alert(this.message); } }; var btn = document.getElementById("my-btn"); EventUtil.addHandler(btn, "click", handler.handleClick); 在上面这个例子中，创建了一个叫做handler 的对象。handler.handleClick()方法被分配为一个DOM按钮的事件处理程序。当按下该按钮时，就调用该函数，显示一个警告框。虽然貌似警告框应该显示 Event handled，然而实际上显示的是 undefiend。这个问题在于没有保存handler.handleClick()的环境，所以this 对象最后是指向了DOM按钮而非handler（在IE8中，this指向window。）可以如下面例子所示，使用一个闭包来修正这个问题。 var handler = { message: "Event handled", handleClick: function(event){ alert(this.message); } }; var btn = document.getElementById("my-btn"); EventUtil.addHandler(btn, "click", function(event){ handler.handleClick(event); });
这个解决方案在onclick 事件处理程序内使用了一个闭包直接调用handler.handleClick()。当然，这是特定于这段代码的解决方案。创建多个闭包可能会令代码变得难于理解和调试。因此，很多JavaScript 库实现了一个可以将函数绑定到指定环境的函数。这个函数一般都叫bind()。 一个简单的bind()函数接受一个函数和一个环境，并返回一个在给定环境中调用给定函数的函数，并且将所有参数原封不动传递过去。语法如下： function bind(fn, context){ return function(){ return fn.apply(context, arguments); }; } FunctionBindingExample01.htm 这个函数似乎简单，但其功能是非常强大的。在bind()中创建了一个闭包，闭包使用apply()调用传入的函数，并给apply()传递context 对象和参数。注意这里使用的arguments 对象是内部函数的，而非bind()的。当调用返回的函数时，它会在给定环境中执行被传入的函数并给出所有参数。bind()函数按如下方式使用： var handler = { message: "Event handled", handleClick: function(event){ alert(this.message); } }; var btn = document.getElementById("my-btn"); EventUtil.addHandler(btn, "click", bind(handler.handleClick, handler)); FunctionBindingExample01.htm 在这个例子中，我们用bind()函数创建了一个保持了执行环境的函数，并将其传给EventUtil. addHandler()。event对象也被传给了该函数，如下所示： var handler = { message: "Event handled", handleClick: function(event){ alert(this.message + ":" + event.type); } }; var btn = document.getElementById("my-btn"); EventUtil.addHandler(btn, "click", bind(handler.handleClick, handler)); FunctionBindingExample01.htm handler.handleClick()方法和平时一样获得了event 对象，因为所有的参数都通过被绑定的函数直接传给了它。 ECMAScript 5 为所有函数定义了一个原生的bind()方法，进一步简单了操作。换句话说，你不用再自己定义bind()函数了，而是可以直接在函数上调用这个方法。例如：
var handler = { message: "Event handled", handleClick: function(event){ alert(this.message + ":" + event.type); } }; var btn = document.getElementById("my-btn"); EventUtil.addHandler(btn, "click", handler.handleClick.bind(handler)); FunctionBindingExample02.htm 原生的bind()方法与前面介绍的自定义bind()方法类似，都是要传入作为this值的对象。支持原生bind()方法的浏览器有IE9+、Firefox 4+和Chrome。 只要是将某个函数指针以值的形式进行传递，同时该函数必须在特定环境中执行，被绑定函数的效用就突显出来了。它们主要用于事件处理程序以及 setTimeout() 和 setInterval()。然而，被绑定函数与普通函数相比有更多的开销，它们需要更多内存，同时也因为多重函数调用稍微慢一点，所以最好只在必要时使用。 22.1.5 函数柯里化 与函数绑定紧密相关的主题是函数柯里化（function currying），它用于创建已经设置好了一个或多个参数的函数。函数柯里化的基本方法和函数绑定是一样的：使用一个闭包返回一个函数。两者的区别在于，当函数被调用时，返回的函数还需要设置一些传入的参数。请看以下例子。 function add(num1, num2){ return num1 + num2; } function curriedAdd(num2){ return add(5, num2); } alert(add(2, 3)); //5 alert(curriedAdd(3)); //8 这段代码定义了两个函数：add()和curriedAdd()。后者本质上是在任何情况下第一个参数为5的add()版本。尽管从技术上来说curriedAdd()并非柯里化的函数，但它很好地展示了其概念。 柯里化函数通常由以下步骤动态创建：调用另一个函数并为它传入要柯里化的函数和必要参数。下面是创建柯里化函数的通用方式。 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()函数的主要工作就是将被返回函数的参数进行排序。curry()的第一个参数是要进行柯里化的函数，其他参数是要传入的值。为了获取第一个参数之后的所有参数，在arguments对象上调用了slice()方法，并传入参数1表示被返回的数组包含从第二个参数开始的所有参数。然后args数组包含了来自外部函数的参数。在内部函数中，创建了innerArgs数组用来存放所有传入的参数（又一次用到了slice()）。有了存放来自外部函数和内部函数的参数数组后，就可以使用concat()方法将它们组合为finalArgs，然后使用 apply()将结果传递给该函数。注意这个函数并没有考虑到执行环境，所以调用apply()时第一个参数是null。curry()函数可以按以下方式应用。 function add(num1, num2){ return num1 + num2; } var curriedAdd = curry(add, 5); alert(curriedAdd(3)); //8 FunctionCurryingExample01.htm 在这个例子中，创建了第一个参数绑定为5 的add()的柯里化版本。当调用curriedAdd()并传入3时，3会成为add()的第二个参数，同时第一个参数依然是5，最后结果便是和8。你也可以像下面例子这样给出所有的函数参数： function add(num1, num2){ return num1 + num2; } var curriedAdd = curry(add, 5, 12); alert(curriedAdd()); //17 FunctionCurryingExample01.htm 在这里，柯里化的add()函数两个参数都提供了，所以以后就无需再传递它们了。 函数柯里化还常常作为函数绑定的一部分包含在其中，构造出更为复杂的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); }; } FunctionCurryingExample02.htm 对curry()函数的主要更改在于传入的参数个数，以及它如何影响代码的结果。curry()仅仅接受一个要包裹的函数作为参数，而bind()同时接受函数和一个object对象。这表示给被绑定的函数的参数是从第三个开始而不是第二个，这就要更改 slice()的第一处调用。另一处更改是在倒数第 3 行将object 对象传给apply()。当使用 bind()时，它会返回绑定到给定环境的函数，并且可能它其中某些函数参数已经被设好。当你想除了event对象再额外给事件处理程序传递参数时，这非常有用，例如：
var handler = { message: "Event handled", handleClick: function(name, event){ alert(this.message + ":"+ name + ":"+ event.type); } }; var btn = document.getElementById("my-btn"); EventUtil.addHandler(btn, "click", bind(handler.handleClick, handler, "my-btn")); FunctionCurryingExample02.htm 在这个更新过的例子中，handler.handleClick()方法接受了两个参数：要处理的元素的名字和event 对象。作为第三个参数传递给bind()函数的名字，又被传递给了handler.handleClick()，而handler.handleClick()也会同时接收到event 对象。 ECMAScript 5的bind()方法也实现函数柯里化，只要在this的值之后再传入另一个参数即可。 var handler = { message: "Event handled", handleClick: function(name, event){ alert(this.message + ":" + name + ":" + event.type); } }; var btn = document.getElementById("my-btn"); EventUtil.addHandler(btn, "click", handler.handleClick.bind(handler, "my-btn")); FunctionCurryingExample03.htm JavaScript 中的柯里化函数和绑定函数提供了强大的动态函数创建功能。使用bind()还是curry()要根据是否需要object对象响应来决定。它们都能用于创建复杂的算法和功能，当然两者都不应滥用，因为每个函数都会带来额外的开销。 22.2 防篡改对象 JavaScript 共享的本质一直是开发人员心头的痛。因为任何对象都可以被在同一环境中运行的代码修改。开发人员很可能会意外地修改别人的代码，甚至更糟糕地，用不兼容的功能重写原生对象。ECMAScript 5致力于解决这个问题，可以让开发人员定义防篡改对象（tamper-proof object）。 第6章讨论了对象属性的问题，也讨论了如何手工设置每个属性的[[Configurable]]、[[Writable]]、 [[Enumerable]]、[[Value]]、[[Get]]以及[[Set]]特性，以改变属性的行为。类似地，ECMAScript 5也增加了几个方法，通过它们可以指定对象的行为。 不过请注意：一旦把对象定义为防篡改，就无法撤销了。
22.2.1 不可扩展对象 默认情况下，所有对象都是可以扩展的。也就是说，任何时候都可以向对象中添加属性和方法。例如，可以像下面这样先定义一个对象，后来再给它添加一个属性。 var person = { name: "Nicholas" }; person.age = 29; 即使第一行代码已经完整定义 person 对象，但第二行代码仍然能给它添加属性。现在，使用Object.preventExtensions()方法可以改变这个行为，让你不能再给对象添加属性和方法。 例如： var person = { name: "Nicholas" }; Object.preventExtensions(person); person.age = 29; alert(person.age); //undefined NonExtensibleObjectsExample01.htm 在调用了Object.preventExtensions()方法后，就不能给person 对象添加新属性和方法了。在非严格模式下，给对象添加新成员会导致静默失败，因此person.age 将是undefined。而在严格模式下，尝试给不可扩展的对象添加新成员会导致抛出错误。 虽然不能给对象添加新成员，但已有的成员则丝毫不受影响。你仍然还可以修改和删除已有的成员。另外，使用Object.istExtensible()方法还可以确定对象是否可以扩展。 var person = { name: "Nicholas" }; alert(Object.isExtensible(person)); Object.preventExtensions(person); alert(Object.isExtensible(person)); 22.2.2 密封的对象 //true //false NonExtensibleObjectsExample02.htm ECMAScript 5 为对象定义的第二个保护级别是密封对象（sealed object）。密封对象不可扩展，而且已有成员的[[Configurable]]特性将被设置为false。这就意味着不能删除属性和方法，因为不能使用Object.defineProperty()把数据属性修改为访问器属性，或者相反。属性值是可以修改的。 要密封对象，可以使用Object.seal()方法。 var person = { name: "Nicholas" }; Object.seal(person); person.age = 29; alert(person.age); delete person.name; alert(person.name); //undefined //"Nicholas" SealedObjectsExample01.htm 在这个例子中，添加age属性的行为被忽略了。而尝试删除name属性的操作也被忽略了，因此这个属性没有受任何影响。这是在非严格模式下的行为。在严格模式下，尝试添加或删除对象成员都会导致抛出错误。
使用Object.isSealed()方法可以确定对象是否被密封了。因为被密封的对象不可扩展，所以用Object.isExtensible()检测密封的对象也会返回false。 var person = { name: "Nicholas" }; alert(Object.isExtensible(person)); //true alert(Object.isSealed(person)); //false Object.seal(person); alert(Object.isExtensible(person)); //false alert(Object.isSealed(person)); //true 22.2.3 冻结的对象 SealedObjectsExample02.htm 最严格的防篡改级别是冻结对象（frozen object）。冻结的对象既不可扩展，又是密封的，而且对象数据属性的[[Writable]]特性会被设置为false。如果定义[[Set]]函数，访问器属性仍然是可写的。ECMAScript 5定义的Object.freeze()方法可以用来冻结对象。 var person = { name: "Nicholas" }; Object.freeze(person); person.age = 29; alert(person.age); delete person.name; alert(person.name); person.name = "Greg"; alert(person.name); //undefined //"Nicholas" //"Nicholas" FrozenObjectsExample01.htm 与密封和不允许扩展一样，对冻结的对象执行非法操作在非严格模式下会被忽略，而在严格模式下会抛出错误。 当然，也有一个Object.isFrozen()方法用于检测冻结对象。因为冻结对象既是密封的又是不可扩展的，所以用 Object.isExtensible()和 Object.isSealed()检测冻结对象将分别返回 false和true。 var person = { name: "Nicholas" }; alert(Object.isExtensible(person)); alert(Object.isSealed(person)); alert(Object.isFrozen(person)); Object.freeze(person); alert(Object.isExtensible(person)); alert(Object.isSealed(person)); alert(Object.isFrozen(person)); //true //false //false //false //true //true
对JavaScript 库的作者而言，冻结对象是很有用的。因为JavaScript库最怕有人意外（或有意）地修改了库中的核心对象。冻结（或密封）主要的库对象能够防止这些问题的发生。 22.3 高级定时器 使用setTimeout()和 setInterval()创建的定时器可以用于实现有趣且有用的功能。虽然人们对JavaScript 的定时器存在普遍的误解，认为它们是线程，其实JavaScript是运行于单线程的环境中的，而定时器仅仅只是计划代码在未来的某个时间执行。执行时机是不能保证的，因为在页面的生命周期中，不同时间可能有其他代码在控制JavaScript进程。在页面下载完后的代码运行、事件处理程序、Ajax回调函数都必须使用同样的线程来执行。实际上，浏览器负责进行排序，指派某段代码在某个时间点运行的优先级。 可以把JavaScript想象成在时间线上运行的。当页面载入时，首先执行是任何包含在