javascript面向对象精华编程

Javascript 面向对象编程（一）：封装

学习Javascript，最难的地方是什么？

我觉得，Object（对象）最难。因为Javascript的Object模型很独特，和其他语言都不一样，初学者不容易掌握。

Javascript是一种基于对象（object-based）的语言，你遇到的所有东西几乎都是对象。但是，它又不是一种真正的面向对象编程（OOP）语言，因为它的语法中没有class（类）。

Javascript 面向对象编程（一）：封装

学习Javascript，最难的地方是什么？

我觉得，Object（对象）最难。因为Javascript的Object模型很独特，和其他语言都不一样，初学者不容易掌握。

Javascript是一种基于对象（object-based）的语言，你遇到的所有东西几乎都是对象。但是，它又不是一种真正的面向对象编程（OOP）语言，因为它的语法中没有class（类）。

那么，如果我们要把"属性"（property）和"方法"（method），封装成一个对象，甚至要从原型对象生成一个实例对象，我们应该怎么做呢？

1. 生成对象的原始模式

假定我们把猫看成一个对象，它有"名字"和"颜色"两个属性。

　　varCat = {

　　　　name: '',

　　　　color: ''

　　}

现在，我们需要根据这个原型对象，生成两个实例对象。

　　varcat1 = {}; // 创建一个空对象

　　　　cat1.name= "大毛"; // 按照原型对象的属性赋值

　　　　cat1.color= "黄色";

　　varcat2 = {};

　　　　cat2.name= "二毛";

　　　　cat2.color= "黑色";

好了，这就是最简单的封装了。但是，这样的写法有两个缺点，一是如果多生成几个实例，写起来就非常麻烦；二是实例与原型之间，没有任何办法，可以看出有什么联系。

2. 原始模式的改进

我们可以写一个函数，解决代码重复的问题。

　　functionCat(name,color){

　　　　return{

　　　　　　name:name,

　　　　　　color:color

　　　　}

　　}

然后生成实例对象，就等于是在调用函数：

　　varcat1 = Cat("大毛","黄色");

　　varcat2 = Cat("二毛","黑色");

这种方法的问题依然是，cat1和cat2之间没有内在的联系，不能反映出它们是同一个原型对象的实例。

3. 构造函数模式

为了解决从原型对象生成实例的问题，Javascript提供了一个构造函数（Constructor）模式。

所谓"构造函数"，其实就是一个普通函数，但是内部使用了this变量。对构造函数使用new运算符，就能生成实例，并且this变量会绑定在实例对象上。

比如，猫的原型对象现在可以这样写，

　　functionCat(name,color){

　　　　this.name=name;

　　　　this.color=color;

　　}

我们现在就可以生成实例对象了。

　　varcat1 = new Cat("大毛","黄色");

　　varcat2 = new Cat("二毛","黑色");

　　alert(cat1.name);// 大毛

　　alert(cat1.color);// 黄色

这时cat1和cat2会自动含有一个constructor属性，指向它们的构造函数。

　　alert(cat1.constructor== Cat); //true

　　alert(cat2.constructor== Cat); //true

Javascript还提供了一个instanceof运算符，验证原型对象与实例对象之间的关系。

　　alert(cat1instanceof Cat); //true

　　alert(cat2instanceof Cat); //true

4. 构造函数模式的问题

构造函数方法很好用，但是存在一个浪费内存的问题。

请看，我们现在为Cat对象添加一个不变的属性"type"（种类），再添加一个方法eat（吃老鼠）。那么，原型对象Cat就变成了下面这样：

　　functionCat(name,color){

　　　　this.name= name;

　　　　this.color= color;

　　　　this.type= "猫科动物";

　　　　this.eat= function(){alert("吃老鼠");};

　　}

还是采用同样的方法，生成实例：

　　varcat1 = new Cat("大毛","黄色");

　　varcat2 = new Cat ("二毛","黑色");

　　alert(cat1.type);// 猫科动物

　　cat1.eat();// 吃老鼠

表面上好像没什么问题，但是实际上这样做，有一个很大的弊端。那就是对于每一个实例对象，type属性和eat()方法都是一模一样的内容，每一次生成一个实例，都必须为重复的内容，多占用一些内存。这样既不环保，也缺乏效率。

　　alert(cat1.eat== cat2.eat); //false

能不能让type属性和eat()方法在内存中只生成一次，然后所有实例都指向那个内存地址呢？回答是可以的。

5. Prototype模式

Javascript规定，每一个构造函数都有一个prototype属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承。

这意味着，我们可以把那些不变的属性和方法，直接定义在prototype对象上。

　　functionCat(name,color){

　　　　this.name= name;

　　　　this.color= color;

　　}

　　Cat.prototype.type= "猫科动物";

　　Cat.prototype.eat= function(){alert("吃老鼠")};

然后，生成实例。

　　varcat1 = new Cat("大毛","黄色");

　　varcat2 = new Cat("二毛","黑色");

　　alert(cat1.type);// 猫科动物

　　cat1.eat();// 吃老鼠

这时所有实例的type属性和eat()方法，其实都是同一个内存地址，指向prototype对象，因此就提高了运行效率。

　　alert(cat1.eat== cat2.eat); //true

6. Prototype模式的验证方法

6.1 isPrototypeOf()

这个方法用来判断，某个proptotype对象和某个实例之间的关系。

　　alert(Cat.prototype.isPrototypeOf(cat1));//true

　　alert(Cat.prototype.isPrototypeOf(cat2));//true

6.2 hasOwnProperty()

每个实例对象都有一个hasOwnProperty()方法，用来判断某一个属性到底是本地属性，还是继承自prototype对象的属性。

　　alert(cat1.hasOwnProperty("name"));// true

　　alert(cat1.hasOwnProperty("type"));// false

6.3 in运算符

in运算符可以用来判断，某个实例是否含有某个属性，不管是不是本地属性。

　　alert("name"in cat1); // true

　　alert("type"in cat1); // true

in运算符还可以用来遍历某个对象的所有属性。

　　for(varprop in cat1) { alert("cat1["+prop+"]="+cat1[prop]); }

未完，请继续阅读这个系列的第二部分《构造函数的继承》和第三部分《非构造函数的继承》。

Javascript面向对象编程（二）：构造函数的继承

这个系列的第一部分，主要介绍了如何"封装"数据和方法，以及如何从原型对象生成实例。

今天要介绍的是，如何生成一个"继承"多个对象的实例。

比如，现在有一个"动物"对象的构造函数，

　　functionAnimal(){

　　　　this.species= "动物";

　　}

还有一个"猫"对象的构造函数，

　　functionCat(name,color){

　　　　this.name= name;

　　　　this.color= color;

　　}

怎样才能使"猫"继承"动物"呢？

1. 构造函数绑定

最简单的方法，大概就是使用call或apply方法，将父对象的构造函数绑定在子对象上，也就是在子对象构造函数中加一行：

　　functionCat(name,color){

　　　　Animal.apply(this, arguments);

　　　　this.name= name;

　　　　this.color= color;

　　}

　　varcat1 = new Cat("大毛","黄色");

　　alert(cat1.species);// 动物

2. prototype模式

更常见的做法，则是使用prototype属性。

如果"猫"的prototype对象，指向一个Animal的实例，那么所有"猫"的实例，就能继承Animal了。

　　Cat.prototype= new Animal();

　　Cat.prototype.constructor= Cat;

　　varcat1 = new Cat("大毛","黄色");

　　alert(cat1.species);// 动物

代码的第一行，我们将Cat的prototype对象指向一个Animal的实例。

　　Cat.prototype= new Animal();

它相当于完全删除了prototype对象原先的值，然后赋予一个新值。但是，第二行又是什么意思呢？

　　Cat.prototype.constructor= Cat;

原来，任何一个prototype对象都有一个constructor属性，指向它的构造函数。也就是说，Cat.prototype 这个对象的constructor属性，是指向Cat的。

我们在前一步已经删除了这个prototype对象原来的值，所以新的prototype对象没有constructor属性，所以我们必须手动加上去，否则后面的"继承链"会出问题。这就是第二行的意思。

总之，这是很重要的一点，编程时务必要遵守。下文都遵循这一点，即如果替换了prototype对象，

　　o.prototype= {};

那么，下一步必然是为新的prototype对象加上constructor属性，并将这个属性指回原来的构造函数。

　　o.prototype.constructor= o;

3. 直接继承prototype

由于Animal对象中，不变的属性都可以直接写入Animal.prototype。所以，我们也可以让Cat()跳过 Animal()，直接继承Animal.prototype。

现在，我们先将Animal对象改写：

　　functionAnimal(){ }

　　Animal.prototype.species= "动物";

然后，将Cat的prototype对象，然后指向Animal的prototype对象，这样就完成了继承。

　　Cat.prototype= Animal.prototype;

　　Cat.prototype.constructor= Cat;

　　varcat1 = new Cat("大毛","黄色");

　　alert(cat1.species);// 动物

与前一种方法相比，这样做的优点是效率比较高（不用执行和建立Animal的实例了），比较省内存。缺点是 Cat.prototype和Animal.prototype现在指向了同一个对象，那么任何对Cat.prototype的修改，都会反映到Animal.prototype。

所以，上面这一段代码其实是有问题的。请看第二行

　　Cat.prototype.constructor= Cat;

这一句实际上把Animal.prototype对象的constructor属性也改掉了！

　　alert(Animal.prototype.constructor);// Cat

4. 利用空对象作为中介

由于"直接继承prototype"存在上述的缺点，所以可以利用一个空对象作为中介。

　　varF = function(){};

　　F.prototype= Animal.prototype;

　　Cat.prototype= new F();

　　Cat.prototype.constructor= Cat;

F是空对象，所以几乎不占内存。这时，修改Cat的prototype对象，就不会影响到Animal的prototype对象。

　　alert(Animal.prototype.constructor);// Animal

5. prototype模式的封装函数

我们将上面的方法，封装成一个函数，便于使用。

　　functionextend(Child, Parent) {

　　　　varF = function(){};

　　　　F.prototype= Parent.prototype;

　　　　Child.prototype= new F();

　　　　Child.prototype.constructor= Child;

　　　　Child.uber= Parent.prototype;

　　}

使用的时候，方法如下

　　extend(Cat,Animal);

　　varcat1 = new Cat("大毛","黄色");

　　alert(cat1.species);// 动物

这个extend函数，就是YUI库如何实现继承的方法。

另外，说明一点。函数体最后一行

　　Child.uber= Parent.prototype;

意思是为子对象设一个uber属性，这个属性直接指向父对象的prototype属性。这等于是在子对象上打开一条通道，可以直接调用父对象的方法。这一行放在这里，只是为了实现继承的完备性，纯属备用性质。

6. 拷贝继承

上面是采用prototype对象，实现继承。我们也可以换一种思路，纯粹采用"拷贝"方法实现继承。简单说，如果把父对象的所有属性和方法，拷贝进子对象，不也能够实现继承吗？

首先，还是把Animal的所有不变属性，都放到它的prototype对象上。

　　functionAnimal(){}

　　Animal.prototype.species= "动物";

然后，再写一个函数，实现属性拷贝的目的。

　　functionextend2(Child, Parent) {

　　　　varp = Parent.prototype;

　　　　varc = Child.prototype;

　　　　for(var i in p) {

　　　　　　c[i]= p[i];

　　　　　　}

　　　　c.uber= p;

　　}

这个函数的作用，就是将父对象的prototype对象中的属性，一一拷贝给Child对象的prototype对象。

使用的时候，这样写：

　　extend2(Cat,Animal);

　　varcat1 = new Cat("大毛","黄色");

　　alert(cat1.species);// 动物

未完，请继续阅读第三部分《非构造函数的继承》。

Javascript面向对象编程（三）：非构造函数的继承

这个系列的第一部分介绍了"封装"，第二部分介绍了使用构造函数实现"继承"。

今天是最后一个部分，介绍不使用构造函数实现"继承"。

一、什么是"非构造函数"的继承？

比如，现在有一个对象，叫做"中国人"。

　　varChinese = {
　　　　nation:'中国'
　　};

还有一个对象，叫做"医生"。

　　varDoctor ={
　　　　career:'医生'
　　}

请问怎样才能让"医生"去继承"中国人"，也就是说，我怎样才能生成一个"中国医生"的对象？

这里要注意，这两个对象都是普通对象，不是构造函数，无法使用构造函数方法实现"继承"。

二、object()方法

json格式的发明人Douglas Crockford，提出了一个object()函数，可以做到这一点。

　　functionobject(o) {

　　　　functionF() {}

　　　　F.prototype= o;

　　　　returnnew F();

　　}

这个object()函数，其实只做一件事，就是把子对象的prototype属性，指向父对象，从而使得子对象与父对象连在一起。

使用的时候，第一步先在父对象的基础上，生成子对象：

　　varDoctor = object(Chinese);

然后，再加上子对象本身的属性：

　　Doctor.career= '医生';

这时，子对象已经继承了父对象的属性了。

　　alert(Doctor.nation);//中国

三、浅拷贝

除了使用"prototype链"以外，还有另一种思路：把父对象的属性，全部拷贝给子对象，也能实现继承。

下面这个函数，就是在做拷贝：

　　functionextendCopy(p) {

　　　　varc = {};

　　　　for(var i in p) {
　　　　　　c[i]= p[i];
　　　　}

　　　　c.uber= p;

　　　　returnc;
　　}

使用的时候，这样写：

　　varDoctor = extendCopy(Chinese);

　　Doctor.career= '医生';

　　alert(Doctor.nation);// 中国

但是，这样的拷贝有一个问题。那就是，如果父对象的属性等于数组或另一个对象，那么实际上，子对象获得的只是一个内存地址，而不是真正拷贝，因此存在父对象被篡改的可能。

请看，现在给Chinese添加一个"出生地"属性，它的值是一个数组。

　　Chinese.birthPlaces= ['北京','上海','香港'];

通过extendCopy()函数，Doctor继承了Chinese。

　　varDoctor = extendCopy(Chinese);

然后，我们为Doctor的"出生地"添加一个城市：

　　Doctor.birthPlaces.push('厦门');

发生了什么事？Chinese的"出生地"也被改掉了！

　　alert(Doctor.birthPlaces);//北京,上海,香港,厦门

　　alert(Chinese.birthPlaces);//北京,上海,香港,厦门

所以，extendCopy()只是拷贝基本类型的数据，我们把这种拷贝叫做"浅拷贝"。这是早期jQuery实现继承的方式。

四、深拷贝

所谓"深拷贝"，就是能够实现真正意义上的数组和对象的拷贝。它的实现并不难，只要递归调用"浅拷贝"就行了。

　　functiondeepCopy(p, c) {

　　　　varc = c || {};

　　　　for(var i in p) {

　　　　　　if(typeof p[i] === 'object') {

　　　　　　　　c[i]= (p[i].constructor === Array) ? [] : {};

　　　　　　　　deepCopy(p[i],c[i]);

　　　　　　}else {

　　　　　　　　　c[i]= p[i];

　　　　　　}
　　　　}

　　　　returnc;
　　}

使用的时候这样写：

　　varDoctor = deepCopy(Chinese);

现在，给父对象加一个属性，值为数组。然后，在子对象上修改这个属性：

　　Chinese.birthPlaces= ['北京','上海','香港'];

　　Doctor.birthPlaces.push('厦门');

这时，父对象就不会受到影响了。

　　alert(Doctor.birthPlaces);//北京,上海,香港,厦门

　　alert(Chinese.birthPlaces);//北京,上海,香港

目前，jQuery库使用的就是这种继承方法。

Javascript的this用法

this是Javascript语言的一个关键字。

它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。比如，

　　functiontest(){

　　　　this.x= 1;

　　}

随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。

下面分四种情况，详细讨论this的用法。

情况一：纯粹的函数调用

这是函数的最通常用法，属于全局性调用，因此this就代表全局对象Global。

请看下面这段代码，它的运行结果是1。

　　functiontest(){

　　　　this.x= 1;

　　　　alert(this.x);

　　}

　　test();// 1

为了证明this就是全局对象，我对代码做一些改变：

　　varx = 1;

　　functiontest(){

　　　　alert(this.x);

　　}

　　test();// 1

运行结果还是1。再变一下：

　　varx = 1;

　　functiontest(){

　　　　this.x= 0;

　　}

　　test();

　　alert(x);//0

情况二：作为对象方法的调用

函数还可以作为某个对象的方法调用，这时this就指这个上级对象。

　　functiontest(){

　　　　alert(this.x);

　　}

　　varo = {};

　　o.x= 1;

　　o.m= test;

　　o.m();// 1

情况三 作为构造函数调用

所谓构造函数，就是通过这个函数生成一个新对象（object）。这时，this就指这个新对象。

　　functiontest(){

　　　　this.x= 1;

　　}

　　varo = new test();

　　alert(o.x);// 1

运行结果为1。为了表明这时this不是全局对象，我对代码做一些改变：

　　varx = 2;

　　functiontest(){

　　　　this.x= 1;

　　}

　　varo = new test();

　　alert(x);//2

运行结果为2，表明全局变量x的值根本没变。

情况四 apply调用

apply()是函数对象的一个方法，它的作用是改变函数的调用对象，它的第一个参数就表示改变后的调用这个函数的对象。因此，this指的就是这第一个参数。

　　varx = 0;

　　functiontest(){

　　　　alert(this.x);

　　}

　　varo={};

　　o.x= 1;

　　o.m= test;

　　o.m.apply();//0

apply()的参数为空时，默认调用全局对象。因此，这时的运行结果为0，证明this指的是全局对象。

如果把最后一行代码修改为

　　o.m.apply(o);//1

运行结果就变成了1，证明了这时this代表的是对象o。

学习Javascript闭包（Closure）

闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。

下面就是我的学习笔记，对于Javascript初学者应该是很有用的。

一、变量的作用域

要理解闭包，首先必须理解Javascript特殊的变量作用域。

变量的作用域无非就是两种：全局变量和局部变量。

Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。

　　varn=999;

　　functionf1(){
　　　　alert(n);
　　}

　　f1();// 999

另一方面，在函数外部自然无法读取函数内的局部变量。

　　functionf1(){
　　　　varn=999;
　　}

　　alert(n);// error

这里有一个地方需要注意，函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量！

　　functionf1(){
　　　　n=999;
　　}

　　f1();

　　alert(n);// 999

二、如何从外部读取局部变量？

出于种种原因，我们有时候需要得到函数内的局部变量。但是，前面已经说过了，正常情况下，这是办不到的，只有通过变通方法才能实现。

那就是在函数的内部，再定义一个函数。

　　functionf1(){

　　　　varn=999;

　　　　functionf2(){
　　　　　　alert(n);// 999
　　　　}

　　}

在上面的代码中，函数f2就被包括在函数f1内部，这时f1内部的所有局部变量，对f2都是可见的。但是反过来就不行，f2内部的局部变量，对f1就是不可见的。这就是Javascript语言特有的"链式作用域"结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。

既然f2可以读取f1中的局部变量，那么只要把f2作为返回值，我们不就可以在f1外部读取它的内部变量了吗！

　　functionf1(){

　　　　varn=999;

　　　　functionf2(){
　　　　　　alert(n);
　　　　}

　　　　returnf2;

　　}

　　varresult=f1();

　　result();// 999

三、闭包的概念

上一节代码中的f2函数，就是闭包。

各种专业文献上的"闭包"（closure）定义非常抽象，很难看懂。我的理解是，闭包就是能够读取其他函数内部变量的函数。

由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。

所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

四、闭包的用途

闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

怎么来理解这句话呢？请看下面的代码。

　　functionf1(){

　　　　varn=999;

　　　　nAdd=function(){n+=1}

　　　　functionf2(){
　　　　　　alert(n);
　　　　}

　　　　returnf2;

　　}

　　varresult=f1();

　　result();// 999

　　nAdd();

　　result();// 1000

在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。

为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。

这段代码中另一个值得注意的地方，就是"nAdd=function(){n+=1}"这一行，首先在nAdd前面没有使用var关键字，因此nAdd是一个全局变量，而不是局部变量。其次，nAdd的值是一个匿名函数（anonymous function），而这个匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。

五、使用闭包的注意点

1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

六、思考题

如果你能理解下面两段代码的运行结果，应该就算理解闭包的运行机制了。

代码片段一。

　　varname = "The Window";

　　varobject = {
　　　　name: "My Object",

　　　　getNameFunc: function(){
　　　　　　returnfunction(){
　　　　　　　　returnthis.name;
　　　　　　};

　　　　}

　　};

　　alert(object.getNameFunc()());

代码片段二。

　　varname = "The Window";

　　varobject = {
　　　　name: "My Object",

　　　　getNameFunc: function(){
　　　　　　varthat = this;
　　　　　　returnfunction(){
　　　　　　　　returnthat.name;
　　　　　　};

　　　　}

　　};

　　alert(object.getNameFunc()());

（完）

12种不宜使用的Javascript语法

这几天，我在读《Javascript语言精粹》。

这本书很薄，100多页，正好假日里翻翻。

该书的作者是DouglasCrockford，他是目前世界上最精通Javascript的人之一，也是Json格式的创造者。

他认为Javascript有很多糟粕。因为1995年BrendanEich设计这种语言的时候，只用了三个月，很多语言特性没有经过深思熟虑，就推向了市场。结果等到人们意识到这些问题的时候，已经有100万程序员在使用它了，不可能再大幅修改语言本身了。所以，Douglas Crockford决定，他要告诉大家，Javascript中哪些部分是精粹，哪些部分是糟粕和鸡肋。

这个想法非常好，但是我不得不说，这本书写得不够好，不适合新手阅读。原因如下：1）Douglas Crockford叙述得不清晰，更像与同行讨论问题，而不是由浅入深地讲解问题。这本书的重点不是解释，所以读完后，我觉得Javascript好像变得更复杂了。2）他固执地使用铁路图（railroad diagram）解释每一条语句。全世界似乎只有他一个人使用这种比Javascript更难看懂的图。3）该书基本上是一本简化的Javascript语法手册，缺乏足够的新内容。4）该书举例过少，而且在最难的函数和对象部分，使用的例子都是环环相套、层层递进的例子，导致阅读起来很吃力。

该书最有价值的内容不是正文，反而是附录。在附录B中，Douglas Crockford列出了12种应该避免使用的Javascript语法，我觉得非常值得推广。

==============================

1. ==

Javascript有两组相等运算符，一组是==和!=，另一组是===和!==。前者只比较值的相等，后者除了值以外，还比较类型是否相同。

请尽量不要使用前一组，永远只使用===和!==。因为==默认会进行类型转换，规则十分难记。如果你不相信的话，请回答下面五个判断式的值是true还是false：

　　false== 'false'

　　false== undefined

　　false== null

　　null== undefined

　　0== ''

前三个是false，后两个是true。

2. with

with的本意是减少键盘输入。比如

　　obj.a= obj.b;

　　obj.c= obj.d;

可以简写成

　　with(obj){
　　　　a= b;
　　　　c= d;
　　}

但是，在实际运行时，解释器会首先判断obj.b和obj.d是否存在，如果不存在的话，再判断全局变量b和d是否存在。这样就导致了低效率，而且可能会导致意外，因此最好不要使用with语句。

3. eval

eval用来直接执行一个字符串。这条语句也是不应该使用的，因为它有性能和安全性的问题，并且使得代码更难阅读。

eval能够做到的事情，不用它也能做到。比如

　　eval("myValue= myObject." + myKey + ";");

可以直接写成

　　myValue= myObject[myKey];

至于ajax操作返回的json字符串，可以使用官方网站提供的解析器json_parse.js运行。

4. continue

这条命令的作用是返回到循环的头部，但是循环本来就会返回到头部。所以通过适当的构造，完全可以避免使用这条命令，使得效率得到改善。

5. switch 贯穿

switch结构中的case语句，默认是顺序执行，除非遇到break，return和throw。有的程序员喜欢利用这个特点，比如

　　switch(n){
　　　　case1:
　　　　case2:
　　　　　　break;
　　}

这样写容易出错，而且难以发现。因此建议避免switch贯穿，凡是有case的地方，一律加上break。

　　switch(n){
　　　　case1:
　　　　　　break;
　　　　case2:
　　　　　　break;
　　}

6. 单行的块结构

if、while、do和for，都是块结构语句，但是也可以接受单行命令。比如

　　if(ok) t = true;

甚至写成

　　if(ok)
　　　　t= true;

这样不利于阅读代码，而且将来添加语句时非常容易出错。建议不管是否只有一行命令，都一律加上大括号。

　　if(ok){
　　　　t= true;
　　}

7. ++和--

递增运算符++和递减运算符--，直接来自C语言，表面上可以让代码变得很紧凑，但是实际上会让代码看上去更复杂和更晦涩。因此为了代码的整洁性和易读性，不用为好。

8. 位运算符

Javascript完全套用了Java的位运算符，包括按位与&、按位或|、按位异或^、按位非~、左移<<、带符号的右移>>和用0补足的右移>>>。

这套运算符针对的是整数，所以对Javascript完全无用，因为Javascript内部，所有数字都保存为双精度浮点数。如果使用它们的话，Javascript不得不将运算数先转为整数，然后再进行运算，这样就降低了速度。而且“按位与运算符”&同“逻辑与运算符”&&，很容易混淆。

9. function语句

在Javascript中定义一个函数，有两种写法：

　　functionfoo() { }

和

　　varfoo = function () { }

两种写法完全等价。但是在解析的时候，前一种写法会被解析器自动提升到代码的头部，因此违背了函数应该先定义后使用的要求，所以建议定义函数时，全部采用后一种写法。

10. 基本数据类型的包装对象

Javascript的基本数据类型包括字符串、数字、布尔值，它们都有对应的包装对象String、Number和Boolean。所以，有人会这样定义相关值：

　　newString("Hello World");

　　newNumber(2000);

　　newBoolean(false);

这样写完全没有必要，而且非常费解，因此建议不要使用。

另外，newObject和new Array也不建议使用，可以用{}和[]代替。

11. new语句

Javascript是世界上第一个被大量使用的支持Lambda函数的语言，本质上属于与Lisp同类的函数式编程语言。但是当前世界，90%以上的程序员都是使用面向对象编程。为了靠近主流，Javascript做出了妥协，采纳了类的概念，允许根据类生成对象。

类是这样定义的：

　　varCat = function (name) {
　　　　this.name= name;
　　　　this.saying= 'meow' ;
　　}

然后，再生成一个对象

　　varmyCat = new Cat('mimi');

这种利用函数生成类、利用new生成对象的语法，其实非常奇怪，一点都不符合直觉。而且，使用的时候，很容易忘记加上new，就会变成执行函数，然后莫名其妙多出几个全局变量。所以，建议不要这样创建对象，而采用一种变通方法。

Douglas Crockford给出了一个函数：

　　Object.beget= function (o) {
　　　　varF = function (o) {};
　　　　F.prototype= o ;
　　　　returnnew F;
　　};

创建对象时就利用这个函数，对原型对象进行操作：

　　varCat = {
　　　　name:'',
　　　　saying:'meow'
　　};

　　varmyCat = Object.beget(Cat);

对象生成后，可以自行对相关属性进行赋值：

　　myCat.name= 'mimi';

12. void

在大多数语言中，void都是一种类型，表示没有值。但是在Javascript中，void是一个运算符，接受一个运算数，并返回undefined。

　　void0; // undefined

这个命令没什么用，而且很令人困惑，建议避免使用。

（完）

快速排序（Quicksort）的Javascript实现

日本程序员norahiko，写了一个排序算法的动画演示，非常有趣。

这个周末，我就用它当做教材，好好学习了一下各种排序算法。

排序算法（Sortingalgorithm）是计算机科学最古老、最基本的课题之一。要想成为合格的程序员，就必须理解和掌握各种排序算法。

目前，最常见的排序算法大概有七八种，其中"快速排序"（Quicksort）使用得最广泛，速度也较快。它是图灵奖得主C. A. R. Hoare（1934--）于1960时提出来的。

"快速排序"的思想很简单，整个排序过程只需要三步：

　　（1）在数据集之中，选择一个元素作为"基准"（pivot）。

　　（2）所有小于"基准"的元素，都移到"基准"的左边；所有大于"基准"的元素，都移到"基准"的右边。

　　（3）对"基准"左边和右边的两个子集，不断重复第一步和第二步，直到所有子集只剩下一个元素为止。

举例来说，现在有一个数据集{85, 24, 63, 45, 17, 31, 96, 50}，怎么对其排序呢？

第一步，选择中间的元素45作为"基准"。（基准值可以任意选择，但是选择中间的值比较容易理解。）

第二步，按照顺序，将每个元素与"基准"进行比较，形成两个子集，一个"小于45"，另一个"大于等于45"。

第三步，对两个子集不断重复第一步和第二步，直到所有子集只剩下一个元素为止。

下面参照网上的资料（这里和这里），用Javascript语言实现上面的算法。

首先，定义一个quickSort函数，它的参数是一个数组。

varquickSort = function(arr) {

};

然后，检查数组的元素个数，如果小于等于1，就返回。

varquickSort = function(arr) {

　　if(arr.length <= 1) { return arr; }

};

接着，选择"基准"（pivot），并将其与原数组分离，再定义两个空数组，用来存放一左一右的两个子集。

varquickSort = function(arr) {

　　if (arr.length <= 1) { return arr; }

　　varpivotIndex = Math.floor(arr.length / 2) ;

　　varpivot = arr.splice(pivotIndex, 1)[0];

　　varleft = [];

　　varright = [];

};

然后，开始遍历数组，小于"基准"的元素放入左边的子集，大于基准的元素放入右边的子集。

varquickSort = function(arr) {

　　if (arr.length <= 1) { return arr; }

　　var pivotIndex = Math.floor(arr.length / 2) ;

　　var pivot = arr.splice(pivotIndex, 1)[0];

　　var left = [];

　　var right = [];

　　for(var i = 0; i < arr.length; i++){

　　　　if(arr[i] < pivot) {

　　　　　　left.push(arr[i]);

　　　　}else {

　　　　　　right.push(arr[i]);

　　　　}

　　}

};

最后，使用递归不断重复这个过程，就可以得到排序后的数组。

varquickSort = function(arr) {

　　if (arr.length <= 1) { return arr; }

　　var pivotIndex = Math.floor(arr.length / 2);

　　var pivot = arr.splice(pivotIndex, 1)[0];

　　var left = [];

　　var right = [];

　　for (var i = 0; i < arr.length; i++){

　　　　if (arr[i] < pivot) {

　　　　　　left.push(arr[i]);

　　　　} else {

　　　　　　right.push(arr[i]);

　　　　}

　　}

　　returnquickSort(left).concat([pivot], quickSort(right));

};

使用的时候，直接调用quickSort()就行了。

（完）

Javascript继承机制的设计思想

我一直很难理解Javascript语言的继承机制。

它没有"子类"和"父类"的概念，也没有"类"（class）和"实例"（instance）的区分，全靠一种很奇特的"原型链"（prototype chain）模式，来实现继承。

我花了很多时间，学习这个部分，还做了很多笔记。但是都属于强行记忆，无法从根本上理解。

直到昨天，我读到法国程序员Vjeux的解释，才恍然大悟，完全明白了Javascript为什么这样设计。

下面，我尝试用自己的语言，来解释它的设计思想。彻底说明白prototype对象到底是怎么回事。其实根本就没那么复杂，真相非常简单。

一、从古代说起

要理解Javascript的设计思想，必须从它的诞生说起。

1994年，网景公司（Netscape）发布了Navigator浏览器0.9版。这是历史上第一个比较成熟的网络浏览器，轰动一时。但是，这个版本的浏览器只能用来浏览，不具备与访问者互动的能力。比如，如果网页上有一栏"用户名"要求填写，浏览器就无法判断访问者是否真的填写了，只有让服务器端判断。如果没有填写，服务器端就返回错误，要求用户重新填写，这太浪费时间和服务器资源了。

因此，网景公司急需一种网页脚本语言，使得浏览器可以与网页互动。工程师Brendan Eich负责开发这种新语言。他觉得，没必要设计得很复杂，这种语言只要能够完成一些简单操作就够了，比如判断用户有没有填写表单。

1994年正是面向对象编程（object-oriented programming）最兴盛的时期，C++是当时最流行的语言，而Java语言的1.0版即将于第二年推出，Sun公司正在大肆造势。

BrendanEich无疑受到了影响，Javascript里面所有的数据类型都是对象（object），这一点与Java非常相似。但是，他随即就遇到了一个难题，到底要不要设计"继承"机制呢？

二、Brendan Eich的选择

如果真的是一种简易的脚本语言，其实不需要有"继承"机制。但是，Javascript里面都是对象，必须有一种机制，将所有对象联系起来。所以，Brendan Eich最后还是设计了"继承"。

但是，他不打算引入"类"（class）的概念，因为一旦有了"类"，Javascript就是一种完整的面向对象编程语言了，这好像有点太正式了，而且增加了初学者的入门难度。

他考虑到，C++和Java语言都使用new命令，生成实例。

C++的写法是：

　　ClassName *object = new ClassName(param);

Java的写法是：

　　Foo foo = new Foo();

因此，他就把new命令引入了Javascript，用来从原型对象生成一个实例对象。但是，Javascript没有"类"，怎么来表示原型对象呢？

这时，他想到C++和Java使用new命令时，都会调用"类"的构造函数（constructor）。他就做了一个简化的设计，在Javascript语言中，new命令后面跟的不是类，而是构造函数。

举例来说，现在有一个叫做DOG的构造函数，表示狗对象的原型。

　　function DOG(name){

　　　　this.name = name;

　　}

对这个构造函数使用new，就会生成一个狗对象的实例。

　　vardogA = new DOG('大毛');

　　alert(dogA.name); // 大毛

注意构造函数中的this关键字，它就代表了新创建的实例对象。

三、new运算符的缺点

用构造函数生成实例对象，有一个缺点，那就是无法共享属性和方法。

比如，在DOG对象的构造函数中，设置一个实例对象的共有属性species。

　　function DOG(name){

　　　　this.name = name;

　　　　this.species= '犬科';

　　}

然后，生成两个实例对象：

　　var dogA = new DOG('大毛');

　　var dogB = new DOG('二毛');

这两个对象的species属性是独立的，修改其中一个，不会影响到另一个。

　　dogA.species= '猫科';

　　alert(dogB.species); // 显示"犬科"，不受dogA的影响

每一个实例对象，都有自己的属性和方法的副本。这不仅无法做到数据共享，也是极大的资源浪费。

四、prototype属性的引入

考虑到这一点，Brendan Eich决定为构造函数设置一个prototype属性。

这个属性包含一个对象（以下简称"prototype对象"），所有实例对象需要共享的属性和方法，都放在这个对象里面；那些不需要共享的属性和方法，就放在构造函数里面。

实例对象一旦创建，将自动引用prototype对象的属性和方法。也就是说，实例对象的属性和方法，分成两种，一种是本地的，另一种是引用的。

还是以DOG构造函数为例，现在用prototype属性进行改写：

　　function DOG(name){

　　　　this.name = name;

　　}

　　DOG.prototype= { species : '犬科' };

　　vardogA = new DOG('大毛');

　　var dogB = new DOG('二毛');

　　alert(dogA.species);// 犬科

　　alert(dogB.species); // 犬科

现在，species属性放在prototype对象里，是两个实例对象共享的。只要修改了prototype对象，就会同时影响到两个实例对象。

　　DOG.prototype.species= '猫科';

　　alert(dogA.species);// 猫科

　　alert(dogB.species); // 猫科

五、总结

由于所有的实例对象共享同一个prototype对象，那么从外界看起来，prototype对象就好像是实例对象的原型，而实例对象则好像"继承"了prototype对象一样。

这就是Javascript继承机制的设计思想。不知道我说清楚了没有，继承机制的具体应用方法，可以参考我写的系列文章：

　　* 《Javascript面向对象编程（一）：封装》

　　* 《Javascript面向对象编程（二）：构造函数的继承》

　　* 《Javascript面向对象编程（三）：非构造函数的继承》

（完）

Javascript诞生记

1.

二周前，我谈了一点Javascript的历史。

今天把这部分补全，从历史的角度，说明Javascript到底是如何设计出来的。

只有了解这段历史，才能明白Javascript为什么是现在的样子。我依据的资料，主要是Brendan Eich的自述。

2.

上一篇文章写道：

"1994年，网景公司（Netscape）发布了Navigator浏览器0.9版。这是历史上第一个比较成熟的网络浏览器，轰动一时。但是，这个版本的浏览器只能用来浏览，不具备与访问者互动的能力。......网景公司急需一种网页脚本语言，使得浏览器可以与网页互动。"

网页脚本语言到底是什么语言？网景公司当时有两个选择：一个是采用现有的语言，比如Perl、Python、Tcl、Scheme等等，允许它们直接嵌入网页；另一个是发明一种全新的语言。

这两个选择各有利弊。第一个选择，有利于充分利用现有代码和程序员资源，推广起来比较容易；第二个选择，有利于开发出完全适用的语言，实现起来比较容易。

到底采用哪一个选择，网景公司内部争执不下，管理层一时难以下定决心。

3.

就在这时，发生了另外一件大事：1995年Sun公司将Oak语言改名为Java，正式向市场推出。

Sun公司大肆宣传，许诺这种语言可以"一次编写，到处运行"（Write Once, Run Anywhere），它看上去很可能成为未来的主宰。

网景公司动了心，决定与Sun公司结成联盟。它不仅允许Java程序以applet（小程序）的形式，直接在浏览器中运行；甚至还考虑直接将Java作为脚本语言嵌入网页，只是因为这样会使HTML网页过于复杂，后来才不得不放弃。

总之，当时的形势就是，网景公司的整个管理层，都是Java语言的信徒，Sun公司完全介入网页脚本语言的决策。因此，Javascript后来就是网景和Sun两家公司一起携手推向市场的，这种语言被命名为"Java+script"并不是偶然的。

4.

此时，34岁的系统程序员Brendan Eich登场了。1995年4月，网景公司录用了他。

BrendanEich的主要方向和兴趣是函数式编程，网景公司招聘他的目的，是研究将Scheme语言作为网页脚本语言的可能性。Brendan Eich本人也是这样想的，以为进入新公司后，会主要与Scheme语言打交道。

仅仅一个月之后，1995年5月，网景公司做出决策，未来的网页脚本语言必须"看上去与Java足够相似"，但是比Java简单，使得非专业的网页作者也能很快上手。这个决策实际上将Perl、Python、Tcl、Scheme等非面向对象编程的语言都排除在外了。

BrendanEich被指定为这种"简化版Java语言"的设计师。

5.

但是，他对Java一点兴趣也没有。为了应付公司安排的任务，他只用10天时间就把Javascript设计出来了。

由于设计时间太短，语言的一些细节考虑得不够严谨，导致后来很长一段时间，Javascript写出来的程序混乱不堪。如果Brendan Eich预见到，未来这种语言会成为互联网第一大语言，全世界有几百万学习者，他会不会多花一点时间呢？

总的来说，他的设计思路是这样的：

　　（1）借鉴C语言的基本语法；

　　（2）借鉴Java语言的数据类型和内存管理；

　　（3）借鉴Scheme语言，将函数提升到"第一等公民"（firstclass）的地位；

　　（4）借鉴Self语言，使用基于原型（prototype）的继承机制。

所以，Javascript语言实际上是两种语言风格的混合产物----（简化的）函数式编程+（简化的）面向对象编程。这是由BrendanEich（函数式编程）与网景公司（面向对象编程）共同决定的。

6.

多年以后，Brendan Eich还是看不起Java。

他说：

"Java（对Javascript）的影响，主要是把数据分成基本类型（primitive）和对象类型（object）两种，比如字符串和字符串对象，以及引入了Y2K问题。这真是不幸啊。"

把基本数据类型包装成对象，这样做是否可取，这里暂且不论。Y2K问题则是直接与Java有关。根据设想，Date.getYear()返回的应该是年份的最后两位：

　　var date1 = new Date(1999,0,1);

　　var year1 = date1.getYear();

　　alert(year1); // 99

但是实际上，对于2000年，它返回的是100！

　　var date2 = new Date(2000,0,1);

　　var year2 = date2.getYear();

　　alert(year2); // 100

如果用这个函数生成年份，某些网页可能出现"19100"这样的结果。这个问题完全来源于Java，因为Javascript的日期类直接采用了java.util.Date函数库。Brendan Eich显然很不满意这个结果，这导致后来不得不添加了一个返回四位数年份的Date.getFullYear()函数。

如果不是公司的决策，Brendan Eich绝不可能把Java作为Javascript设计的原型。作为设计者，他一点也不喜欢自己的这个作品：

"与其说我爱Javascript，不如说我恨它。它是C语言和Self语言一夜情的产物。十八世纪英国文学家约翰逊博士说得好：'它的优秀之处并非原创，它的原创之处并不优秀。'（the part that is good is not original,and the part that is original is not good.）"

（完）

Javascript的10个设计缺陷

前几篇文章，我经常说Javascript的设计不够严谨，有很多失误。

今天的这一篇，前半部分就谈为什么会这样，后半部分将列举Javascript的10个设计缺陷。

我参考的文献主要是Douglas Crockford的专著《Javascript语言精粹》（JavaScript:The Good Parts）和Fredrik Holmström的文章《我对Javascript的抱怨》（Mygripes with Javascript）。

一、为什么Javascript有设计缺陷？

这里有三个客观原因，导致Javascript的设计不够完善。

1. 设计阶段过于仓促

Javascript的设计，其实只用了十天。而且，设计师是为了向公司交差，本人并不愿意这样设计（参见《Javascript诞生记》）。

另一方面，这种语言的设计初衷，是为了解决一些简单的网页互动（比如，检查"用户名"是否填写），并没有考虑复杂应用的需要。设计者做梦也想不到，Javascript将来可以写出像Gmail这种极其庞大复杂的网页。

2. 没有先例

Javascript同时结合了函数式编程和面向对象编程的特点，这很可能是历史上的第一例。而且直到今天为止，Javascript仍然是世界上唯一使用Prototype继承模型的主要语言。这使得它没有设计先例可以参考。

3. 过早的标准化

Javascript的发展非常快，根本没有时间调整设计。

1995年5月，设计方案定稿；10月，解释器开发成功；12月，向市场推出，立刻被广泛接受，全世界的用户大量使用。Javascript缺乏一个从小到大、慢慢积累用户的过程，而是连续的爆炸式扩散增长。大量的既成网页和业余网页设计者的参与，使得调整语言规格困难重重。

更糟的是，Javascript的规格还没来及调整，就固化了。

1996年8月，微软公司强势介入，宣布推出自己的脚本语言Jscript；11月，为了压制微软，网景公司决定申请Javascript的国际标准；1997年6月，第一个国际标准ECMA-262正式颁布。

也就是说，Javascript推出一年半之后，国际标准就问世了。设计缺陷还没有充分暴露就成了标准。相比之下，C语言问世将近20年之后，国际标准才颁布。

二、Javascript的10个设计缺陷

1. 不适合开发大型程序

Javascript没有名称空间（namespace），很难模块化；没有如何将代码分布在多个文件的规范；允许同名函数的重复定义，后面的定义可以覆盖前面的定义，很不利于模块化加载。

2. 非常小的标准库

Javascript提供的标准函数库非常小，只能完成一些基本操作，很多功能都不具备。

3. null和undefined

null属于对象（object）的一种，意思是该对象为空；undefined则是一种数据类型，表示未定义。

　　typeof null; // object

　　typeof undefined; // undefined

两者非常容易混淆，但是含义完全不同。

　　var foo;

　　alert(foo == null); // true

　　alert(foo == undefined); // true

　　alert(foo === null); // false

　　alert(foo === undefined); // true

在编程实践中，null几乎没用，根本不应该设计它。

4. 全局变量难以控制

Javascript的全局变量，在所有模块中都是可见的；任何一个函数内部都可以生成全局变量，这大大加剧了程序的复杂性。

　　a = 1;

　　(function(){

　　　　b=2;

　　　　alert(a);

　　})(); // 1

　　alert(b); //2

5. 自动插入行尾分号

Javascript的所有语句，都必须以分号结尾。但是，如果你忘记加分号，解释器并不报错，而是为你自动加上分号。有时候，这会导致一些难以发现的错误。

比如，下面这个函数根本无法达到预期的结果，返回值不是一个对象，而是undefined。

　　function(){

　　　　return
　　　　　　{
　　　　　　　　i=1
　　　　　　};

　　}

原因是解释器自动在return语句后面加上了分号。

　　function(){

　　　　return;
　　　　　　{
　　　　　　　　i=1
　　　　　　};

　　}

6. 加号运算符

+号作为运算符，有两个含义，可以表示数字与数字的和，也可以表示字符与字符的连接。

　　alert(1+10); // 11

　　alert("1"+"10"); // 110

如果一个操作项是字符，另一个操作项是数字，则数字自动转化为字符。

　　alert(1+"10"); // 110

　　alert("10"+1); // 101

这样的设计，不必要地加剧了运算的复杂性，完全可以另行设置一个字符连接的运算符。

7. NaN

NaN是一种数字，表示超出了解释器的极限。它有一些很奇怪的特性：

　　NaN === NaN; //false

　　NaN !== NaN; //true

　　alert( 1 + NaN ); // NaN

与其设计NaN，不如解释器直接报错，反而有利于简化程序。

8. 数组和对象的区分

由于Javascript的数组也属于对象（object），所以要区分一个对象到底是不是数组，相当麻烦。DouglasCrockford的代码是这样的：

　　if ( arr &&
　　　　typeofarr === 'object' &&
　　　　typeofarr.length === 'number' &&
　　　　!arr.propertyIsEnumerable('length')){

　　　　alert("arr is an array");

　　}

9. == 和 ===

==用来判断两个值是否相等。当两个值类型不同时，会发生自动转换，得到的结果非常不符合直觉。

　　"" == "0" // false

　　0 == "" // true

　　0 == "0" // true

　　false == "false" // false

　　false == "0" // true

　　false == undefined // false

　　false == null // false

　　null == undefined // true

　　" \t\r\n" == 0 // true

因此，推荐任何时候都使用"==="（精确判断）比较符。

10. 基本类型的包装对象

Javascript有三种基本数据类型：字符串、数字和布尔值。它们都有相应的建构函数，可以生成字符串对象、数字对象和布尔值对象。

　　new Boolean(false);

　　new Number(1234);

　　new String("Hello World");

与基本数据类型对应的对象类型，作用很小，造成的混淆却很大。

　　alert( typeof 1234); // number

　　alert( typeof new Number(1234)); // object

关于Javascript的更多怪异行为，请参见Javascript Garden和wtfjs.com。

三、如何看待Javascript的设计缺陷？

既然Javascript有缺陷，数量还不少，那么它是不是一种很糟糕的语言？有没有前途？

回答是Javascript并不算糟糕，相反它的编程能力很强大，前途很光明。

首先，如果遵守良好的编程规范，加上第三方函数库的帮助，Javascript的这些缺陷大部分可以回避。

其次，Javascript目前是网页编程的唯一语言，只要互联网继续发展，它就必然一起发展。目前，许多新项目大大扩展了它的用途，node.js使得Javascript可以用于后端的服务器编程，coffeeScript使你可以用python和ruby的语法，撰写Javascript。

最后，只要发布新版本的语言标准（比如 ECMAscript5），就可以弥补这些设计缺陷。当然，标准的发布和标准的实现是两回事，上述的很多缺陷也许会一直伴随到Javascript存在的最后一天。

（完）

如何判断Javascript对象是否存在

Javascript语言的设计不够严谨，很多地方一不小心就会出错。

举例来说，请考虑以下情况。

现在，我们要判断一个全局对象myObj是否存在，如果不存在，就对它进行声明。用自然语言描述的算法如下：

　　if(myObj不存在){

　　　　声明myObj;

　　}

你可能会觉得，写出这段代码很容易。但是实际上，它涉及的语法问题，远比我们想象的复杂。Juriy Zaytsev指出，判断一个Javascript对象是否存在，有超过50种写法。只有对Javascript语言的实现细节非常清楚，才可能分得清它们的区别。

第一种写法

根据直觉，你可能觉得可以这样写：

　　if(!myObj) {

　　　　myObj= { };

　　}

但是，运行这段代码，浏览器会直接抛出ReferenceError错误，导致运行中断。请问错在哪里？

对了，if语句判断myObj是否为空时，这个变量还不存在，所以才会报错。改成下面这样，就能正确运行了。

　　if(!myObj) {

　　　　var myObj = { };

　　}

为什么加了一个var以后，就不报错了？难道这种情况下，if语句做判断时，myObj就已经存在了吗？

要回答这个问题，就必须知道Javascript解释器的工作方式。Javascript语言是"先解析，后运行"，解析时就已经完成了变量声明，所以上面的代码实际等同于：

　　var myObj;

　　if(!myObj) {

　　　　varmyObj = { };

　　}

因此，if语句做判断时，myObj确实已经存在了，所以就不报错了。这就是var命令的"代码提升"（hoisting）作用。Javascript解释器，只"提升"var命令定义的变量，对不使用var命令、直接赋值的变量不起作用，这就是为什么不加var会报错的原因。

第二种写法

除了var命令，还可以有另一种改写，也能得到正确的结果：

　　if (!window.myObj) {

　　　　myObj= { };

　　}

window是javascript的顶层对象，所有的全局变量都是它的属性。所以，判断myobj是否为空，等同于判断window对象是否有myobj属性，这样就可以避免因为myObj没有定义而出现ReferenceError错误。不过，从代码的规范性考虑，最好还是对第二行加上var：

　　if(!window.myObj) {

　　　　var myObj = { };

　　}

或者写成这样：

　　if(!window.myObj) {

　　　　window.myObj = { };

　　}

第三种写法

上面这种写法的缺点在于，在某些运行环境中（比如V8、Rhino），window未必是顶层对象。所以，考虑改写成：

　　if(!this.myObj){

　　　　this.myObj = { };

　　}

在全局变量的层面中，this关键字总是指向顶层变量，所以就可以独立于不同的运行环境。

第四种写法

但是，上面这样写可读性较差，而且this的指向是可变的，容易出错，所以进一步改写：

　　var global = this;

　　if(!global.myObj) {

　　　　global.myObj= { };

　　}

用自定义变量global表示顶层对象，就清楚多了。

第五种写法

还可以使用typeof运算符，判断myObj是否有定义。

　　if(typeof myObj== "undefined") {

　　　　varmyObj = { };

　　}

这是目前使用最广泛的判断javascript对象是否存在的方法。

第六种写法

由于在已定义、但未赋值的情况下，myObj的值直接等于undefined，所以上面的写法可以简化：

　　if(myObj ==undefined) {

　　　　varmyObj = { };

　　}

这里有两个地方需要注意，首先第二行的var关键字不能少，否则会出现ReferenceError错误，其次undefined不能加单引号或双引号，因为这里比较的是undefined这种数据类型，而不是"undefined"这个字符串。

第七种写法

上面的写法在"精确比较"（===）的情况下，依然成立：

　　if(myObj ===undefined) {

　　　　varmyObj = { };

　　}

第八种写法

根据javascript的语言设计，undefined== null，所以比较myObj是否等于null，也能得到正确结果：

　　if(myObj ==null) {

　　　　varmyObj = { };

　　}

不过，虽然运行结果正确，但是从语义上看，这种判断方法是错的，应该避免。因为null指的是已经赋值为null的空对象，即这个对象实际上是有值的，而undefined指的是不存在或没有赋值的对象。因此，这里只能使用"比较运算符"（==），如果这里使用"精确比较运算符"（===），就会出错。

第九种写法

还可以使用in运算符，判断myObj是否为顶层对象的一个属性：

　　if (!('myObj' in window)) {

　　　　window.myObj= { };

　　}

第十种写法

最后，使用hasOwnProperty方法，判断myObj是否为顶层对象的一个属性：

　　if (!this.hasOwnProperty('myObj')) {

　　　　this.myObj= { };

　　}

总结

1. 如果只判断对象是否存在，推荐使用第五种写法。

2. 如果除了对象是否存在，还要判断对象是否有null值，推荐使用第一种写法。

3. 除非特殊情况，所有变量都应该使用var命令声明。

4. 为了跨平台，建议避免使用window表示顶层对象。

5. 在Javascript语言中，null和undefined容易产生混淆。在可能同时涉及两者的情况下，建议使用"精确比较"运算符（===）。

（完）

jQuery设计思想

jQuery是目前使用最广泛的javascript函数库。

据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。

对于网页开发者来说，学会jQuery是必要的。因为它让你了解业界最通用的技术，为将来学习更高级的库打下基础，并且确实可以很轻松地做出许多复杂的效果。

虽然jQuery上手简单，比其他库容易学会，但是要全面掌握，却不轻松。因为它涉及到网页开发的方方面面，提供的各种方法和内部变化有上千种之多。初学者常常感到，入门很方便，提高很困难。

目前，互联网上最好的jQuery入门教材，是Rebecca Murphey写的《jQuery基础》（jQueryFundamentals）。在Google里搜索"jQuery 培训"，此书排在第一位。jQuery官方团队已经同意，把此书作为官方教程的基础。

这本书虽然是入门教材，但也足足有100多页。我对它做了一个详细的笔记，试图理清jQuery的设计思想，找出学习的脉络。我的目标是全面掌握jQuery，遇到问题的时候，心里有底，基本知道使用它的哪一个功能，然后可以迅速从手册中找到具体的写法。

下面就是我的笔记，它应该是目前网上不多的jQuery中文教程之一。你只需要一点javascript语言的基本知识，就能看懂它，在最短的时间里，掌握jQuery的所有主要方面（除了ajax和插件开发）。

===========================================

jQuery设计思想

原文网址：http://jqfundamentals.com/book/

阮一峰 翻译整理

【目录】

　　一、选择网页元素

　　二、改变结果集

　　三、链式操作

　　四、元素的操作：取值和赋值

　　五、元素的操作：移动

　　六、元素的操作：复制、删除和创建

　　七、工具方法

　　八、事件操作

　　九、特殊效果

【正文】

一、选择网页元素

jQuery的基本设计思想和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他Javascript库的根本特点。

使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()（简写为$），然后得到被选中的元素。

选择表达式可以是CSS选择器：

　　$(document)//选择整个文档对象

　　$('#myId')//选择ID为myId的网页元素

　　$('div.myClass')// 选择class为myClass的div元素

　　$('input[name=first]')// 选择name属性等于first的input元素

也可以是jQuery特有的表达式：

　　$('a:first')//选择网页中第一个a元素

　　$('tr:odd')//选择表格的奇数行

　　$('#myForm:input') // 选择表单中的input元素

　　$('div:visible')//选择可见的div元素

　　$('div:gt(2)')// 选择所有的div元素，除了前三个

　　$('div:animated')// 选择当前处于动画状态的div元素

二、改变结果集

jQuery设计思想之二，就是提供各种强大的过滤器，对结果集进行筛选，缩小选择结果。

　　$('div').has('p');// 选择包含p元素的div元素

　　$('div').not('.myClass');//选择class不等于myClass的div元素

　　$('div').filter('.myClass');//选择class等于myClass的div元素

　　$('div').first();//选择第1个div元素

　　$('div').eq(5);//选择第6个div元素

有时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动方法：

　　$('div').next('p');//选择div元素后面的第一个p元素

　　$('div').parent();//选择div元素的父元素

　　$('div').closest('form');//选择离div最近的那个form父元素

　　$('div').children();//选择div的所有子元素

　　$('div').siblings();//选择div的同级元素

三、链式操作

jQuery设计思想之三，就是最终选中网页元素以后，可以对它进行一系列操作，并且所有操作可以连接在一起，以链条的形式写出来，比如：

　　$('div').find('h3').eq(2).html('Hello');

分解开来，就是下面这样：

　　$('div')//找到div元素

　　　.find('h3')//选择其中的h3元素

　　　.eq(2)//选择第3个h3元素

　　　.html('Hello');//将它的内容改为Hello

这是jQuery最令人称道、最方便的特点。它的原理在于每一步的jQuery操作，返回的都是一个jQuery对象，所以不同操作可以连在一起。

jQuery还提供了.end()方法，使得结果集可以后退一步：

　　$('div')

　　　.find('h3')

　　　.eq(2)

　　　.html('Hello')

　　　.end() //退回到选中所有的h3元素的那一步

　　　.eq(0)//选中第一个h3元素

　　　.html('World');//将它的内容改为World

四、元素的操作：取值和赋值

操作网页元素，最常见的需求是取得它们的值，或者对它们进行赋值。

jQuery设计思想之四，就是使用同一个函数，来完成取值（getter）和赋值（setter），即"取值器"与"赋值器"合一。到底是取值还是赋值，由函数的参数决定。

　　$('h1').html();//html()没有参数，表示取出h1的值

　　$('h1').html('Hello');//html()有参数Hello，表示对h1进行赋值

常见的取值和赋值函数如下：

　　.html() 取出或设置html内容

　　.text() 取出或设置text内容

　　.attr() 取出或设置某个属性的值

　　.width() 取出或设置某个元素的宽度

　　.height() 取出或设置某个元素的高度

　　.val() 取出某个表单元素的值

需要注意的是，如果结果集包含多个元素，那么赋值的时候，将对其中所有的元素赋值；取值的时候，则是只取出第一个元素的值（.text()例外，它取出所有元素的text内容）。

五、元素的操作：移动

jQuery设计思想之五，就是提供两组方法，来操作元素在网页中的位置移动。一组方法是直接移动该元素，另一组方法是移动其他元素，使得目标元素达到我们想要的位置。

假定我们选中了一个div元素，需要把它移动到p元素后面。

第一种方法是使用.insertAfter()，把div元素移动p元素后面：

　　$('div').insertAfter('p');

第二种方法是使用.after()，把p元素加到div元素前面：

　　$('p').after('div');

表面上看，这两种方法的效果是一样的，唯一的不同似乎只是操作视角的不同。但是实际上，它们有一个重大差别，那就是返回的元素不一样。第一种方法返回div元素，第二种方法返回p元素。你可以根据需要，选择到底使用哪一种方法。

使用这种模式的操作方法，一共有四对：

　　.insertAfter()和.after()：在现存元素的外部，从后面插入元素

　　.insertBefore()和.before()：在现存元素的外部，从前面插入元素

　　.appendTo()和.append()：在现存元素的内部，从后面插入元素

　　.prependTo()和.prepend()：在现存元素的内部，从前面插入元素

六、元素的操作：复制、删除和创建

除了元素的位置移动之外，jQuery还提供其他几种操作元素的重要方法。

复制元素使用.clone()。

删除元素使用.remove()和.detach()。两者的区别在于，前者不保留被删除元素的事件，后者保留，有利于重新插入文档时使用。

清空元素内容（但是不删除该元素）使用.empty()。

创建新元素的方法非常简单，只要把新元素直接传入jQuery的构造函数就行了：

　　$('<p>Hello</p>');

　　$('<liclass="new">new list item</li>');

　　$('ul').append('<li>listitem</li>');

七、工具方法

jQuery设计思想之六：除了对选中的元素进行操作以外，还提供一些与元素无关的工具方法（utility）。不必选中元素，就可以直接使用这些方法。

如果你懂得Javascript语言的继承原理，那么就能理解工具方法的实质。它是定义在jQuery构造函数上的方法，即jQuery.method()，所以可以直接使用。而那些操作元素的方法，是定义在构造函数的prototype对象上的方法，即jQuery.prototype.method()，所以必须生成实例（即选中元素）后使用。如果不理解这种区别，问题也不大，只要把工具方法理解成，是像javascript原生函数那样，可以直接使用的方法就行了。

常用的工具方法有以下几种：

　　$.trim()去除字符串两端的空格。

　　$.each()遍历一个数组或对象。

　　$.inArray()返回一个值在数组中的索引位置。如果该值不在数组中，则返回-1。

　　$.grep()返回数组中符合某种标准的元素。

　　$.extend()将多个对象，合并到第一个对象。

　　$.makeArray()将对象转化为数组。

　　$.type()判断对象的类别（函数对象、日期对象、数组对象、正则对象等等）。

　　$.isArray()判断某个参数是否为数组。

　　$.isEmptyObject()判断某个对象是否为空（不含有任何属性）。

　　$.isFunction()判断某个参数是否为函数。

　　$.isPlainObject()判断某个参数是否为用"{}"或"newObject"建立的对象。

　　$.support()判断浏览器是否支持某个特性。

八、事件操作

jQuery设计思想之七，就是把事件直接绑定在网页元素之上。

　　$('p').click(function(){

　　　　alert('Hello');

　　});

目前，jQuery主要支持以下事件：

　　.blur() 表单元素失去焦点。

　　.change() 表单元素的值发生变化

　　.click() 鼠标单击

　　.dblclick() 鼠标双击

　　.focus() 表单元素获得焦点

　　.focusin() 子元素获得焦点

　　.focusout() 子元素失去焦点

　　.hover() 同时为mouseenter和mouseleave事件指定处理函数

　　.keydown() 按下键盘（长时间按键，只返回一个事件）

　　.keypress() 按下键盘（长时间按键，将返回多个事件）

　　.keyup() 松开键盘

　　.load()元素加载完毕

　　.mousedown() 按下鼠标

　　.mouseenter()鼠标进入（进入子元素不触发）

　　.mouseleave()鼠标离开（离开子元素不触发）

　　.mousemove() 鼠标在元素内部移动

　　.mouseout()鼠标离开（离开子元素也触发）

　　.mouseover() 鼠标进入（进入子元素也触发）

　　.mouseup() 松开鼠标

　　.ready() DOM加载完成

　　.resize() 浏览器窗口的大小发生改变

　　.scroll() 滚动条的位置发生变化

　　.select() 用户选中文本框中的内容

　　.submit() 用户递交表单

　　.toggle()根据鼠标点击的次数，依次运行多个函数

　　.unload() 用户离开页面

以上这些事件在jQuery内部，都是.bind()的便捷方式。使用.bind()可以更灵活地控制事件，比如为多个事件绑定同一个函数：

　　$('input').bind(

　　　　'clickchange', //同时绑定click和change事件

　　　　function(){

　　　　　　alert('Hello');

　　　　}

　　);

有时，你只想让事件运行一次，这时可以使用.one()方法。

　　$("p").one("click",function() {

　　　　alert("Hello");//只运行一次，以后的点击不会运行

　　});

.unbind()用来解除事件绑定。

　　$('p').unbind('click');

所有的事件处理函数，都可以接受一个事件对象（eventobject）作为参数，比如下面例子中的e：

　　$("p").click(function(e){

　　　　alert(e.type);// "click"

　　});

这个事件对象有一些很有用的属性和方法：

　　event.pageX事件发生时，鼠标距离网页左上角的水平距离

　　event.pageY事件发生时，鼠标距离网页左上角的垂直距离

　　event.type事件的类型（比如click）

　　event.which按下了哪一个键

　　event.data在事件对象上绑定数据，然后传入事件处理函数

　　event.target事件针对的网页元素

　　event.preventDefault()阻止事件的默认行为（比如点击链接，会自动打开新页面）

　　event.stopPropagation() 停止事件向上层元素冒泡

在事件处理函数中，可以用this关键字，返回事件针对的DOM元素：

　　$('a').click(function(){

　　　　if($(this).attr('href').match('evil')) { //如果确认为有害链接

　　　　　　e.preventDefault();//阻止打开

　　　　　　$(this).addClass('evil');//加上表示有害的class

　　　　}

　　});

有两种方法，可以自动触发一个事件。一种是直接使用事件函数，另一种是使用.trigger()或.triggerHandler()。

　　$('a').click();

　　$('a').trigger('click');

九、特殊效果

最后，jQuery允许对象呈现某些特殊效果。

　　$('h1').show(); //展现一个h1标题

常用的特殊效果如下：

　　.fadeIn() 淡入

　　.fadeOut() 淡出

　　.fadeTo() 调整透明度

　　.hide() 隐藏元素

　　.show() 显示元素

　　.slideDown() 向下展开

　　.slideUp() 向上卷起

　　.slideToggle() 依次展开或卷起某个元素

　　.toggle() 依次展示或隐藏某个元素

除了.show()和.hide()，所有其他特效的默认执行时间都是400ms（毫秒），但是你可以改变这个设置。

　　$('h1').fadeIn(300); // 300毫秒内淡入

　　$('h1').fadeOut('slow'); // 缓慢地淡出

在特效结束后，可以指定执行某个函数。

　　$('p').fadeOut(300, function() { $(this).remove(); });

更复杂的特效，可以用.animate()自定义。

　　$('div').animate(

　　　　{

　　　　　　left : "+=50", //不断右移

　　　　　　opacity : 0.25 //指定透明度

　　　　},

　　　　300, // 持续时间

　　　　function() { alert('done!'); } //回调函数

　　);

.stop()和.delay()用来停止或延缓特效的执行。

$.fx.off如果设置为true，则关闭所有网页特效。

（完）

jQuery最佳实践

上周，我整理了《jQuery设计思想》。

那篇文章是一篇入门教程，从设计思想的角度，讲解"怎么使用jQuery"。今天的文章则是更进一步，讲解"如何用好jQuery"。

我主要参考了Addy Osmani的PPT《提高jQuery性能的诀窍》（jQueryProven Performance Tips And Tricks）。他是jQuery开发团队的成员，具有一定的权威性，提出的结论都有测试数据支持，非常有价值。

==============================================

jQuery最佳实践

阮一峰 整理

1. 使用最新版本的jQuery

jQuery的版本更新很快，你应该总是使用最新的版本。因为新版本会改进性能，还有很多新功能。

下面就来看看，不同版本的jQuery性能差异有多大。这里是三条最常见的jQuery选择语句：

　　$('.elem')

　　$('.elem',context)

　　context.find('.elem')

我们用1.4.2、1.4.4、1.6.2三个版本的jQuery测试，看看浏览器在1秒内能够执行多少次。结果如下：

可以看到，1.6.2版本的运行次数，远远超过两个老版本。尤其是第一条语句，性能有数倍的提高。

其他语句的测试，比如.attr("value")和.val()，也是新版本的jQuery表现好于老版本。

2. 用对选择器

在jQuery中，你可以用多种选择器，选择同一个网页元素。每种选择器的性能是不一样的，你应该了解它们的性能差异。

（1）最快的选择器：id选择器和元素标签选择器

举例来说，下面的语句性能最佳：

　　$('#id')

　　$('form')

　　$('input')

遇到这些选择器的时候，jQuery内部会自动调用浏览器的原生方法（比如getElementById()），所以它们的执行速度快。

（2）较慢的选择器：class选择器

$('.className')的性能，取决于不同的浏览器。

Firefox、Safari、Chrome、Opera浏览器，都有原生方法getElementByClassName()，所以速度并不慢。但是，IE5-IE8都没有部署这个方法，所以这个选择器在IE中会相当慢。

（3）最慢的选择器：伪类选择器和属性选择器

先来看例子。找出网页中所有的隐藏元素，就要用到伪类选择器：

　　$(':hidden')

属性选择器的例子则是：

　　$('[attribute=value]')

这两种语句是最慢的，因为浏览器没有针对它们的原生方法。但是，一些浏览器的新版本，增加了querySelector()和querySelectorAll()方法，因此会使这类选择器的性能有大幅提高。

最后是不同选择器的性能比较图。

可以看到，ID选择器遥遥领先，然后是标签选择器，第三是Class选择器，其他选择器都非常慢。

3. 理解子元素和父元素的关系

下面六个选择器，都是从父元素中选择子元素。你知道哪个速度最快，哪个速度最慢吗？

　　$('.child',$parent)

　　$parent.find('.child')

　　$parent.children('.child')

　　$('#parent> .child')

　　$('#parent.child')

　　$('.child',$('#parent'))

我们一句句来看。

(1) $('.child', $parent)

这条语句的意思是，给定一个DOM对象，然后从中选择一个子元素。jQuery会自动把这条语句转成$.parent.find('child')，这会导致一定的性能损失。它比最快的形式慢了5%-10%。

(2) $parent.find('.child')

这条是最快的语句。.find()方法会调用浏览器的原生方法（getElementById，getElementByName，getElementByTagName等等），所以速度较快。

(3) $parent.children('.child')

这条语句在jQuery内部，会使用$.sibling()和javascript的nextSibling()方法，一个个遍历节点。它比最快的形式大约慢50%。

(4) $('#parent > .child')

jQuery内部使用Sizzle引擎，处理各种选择器。Sizzle引擎的选择顺序是从右到左，所以这条语句是先选.child，然后再一个个过滤出父元素#parent，这导致它比最快的形式大约慢70%。

(5) $('#parent .child')

这条语句与上一条是同样的情况。但是，上一条只选择直接的子元素，这一条可以于选择多级子元素，所以它的速度更慢，大概比最快的形式慢了77%。

(6) $('.child', $('#parent'))

jQuery内部会将这条语句转成$('#parent').find('.child')，比最快的形式慢了23%。

所以，最佳选择是$parent.find('.child')。而且，由于$parent往往在前面的操作已经生成，jQuery会进行缓存，所以进一步加快了执行速度。

具体的例子和比较结果，请看这里。

4. 不要过度使用jQuery

jQuery速度再快，也无法与原生的javascript方法相比。所以有原生方法可以使用的场合，尽量避免使用jQuery。

请看下面的例子，为a元素绑定一个处理点击事件的函数：

　　$('a').click(function(){

　　　　alert($(this).attr('id'));

　　});

这段代码的意思是，点击a元素后，弹出该元素的id属性。为了获取这个属性，必须连续两次调用jQuery，第一次是$(this)，第二次是attr('id')。

事实上，这种处理完全不必要。更正确的写法是，直接采用javascript原生方法，调用this.id：

　　$('a').click(function(){

　　　　alert(this.id);

　　});

根据测试，this.id的速度比$(this).attr('id')快了20多倍。

5. 做好缓存

选中某一个网页元素，是开销很大的步骤。所以，使用选择器的次数应该越少越好，并且尽可能缓存选中的结果，便于以后反复使用。

比如，下面这样的写法就是糟糕的写法：

　　jQuery('#top').find('p.classA');

　　jQuery('#top').find('p.classB');

更好的写法是：

　　var cached = jQuery('#top');

　　cached.find('p.classA');

　　cached.find('p.classB');

根据测试，缓存比不缓存，快了2-3倍。

6. 使用链式写法

jQuery的一大特点，就是允许使用链式写法。

　　$('div').find('h3').eq(2).html('Hello');

采用链式写法时，jQuery自动缓存每一步的结果，因此比非链式写法要快。根据测试，链式写法比（不使用缓存的）非链式写法，大约快了25%。

7. 事件的委托处理（Event Delegation）

javascript的事件模型，采用"冒泡"模式，也就是说，子元素的事件会逐级向上"冒泡"，成为父元素的事件。

利用这一点，可以大大简化事件的绑定。比如，有一个表格（table元素），里面有100个格子（td元素），现在要求在每个格子上面绑定一个点击事件（click），请问是否需要将下面的命令执行100次？

　　$("td").bind("click",function(){

　　　　$(this).toggleClass("click");

　　});

回答是不需要，我们只要把这个事件绑定在table元素上面就可以了，因为td元素发生点击事件之后，这个事件会"冒泡"到父元素table上面，从而被监听到。

因此，这个事件只需要在父元素绑定1次即可，而不需要在子元素上绑定100次，从而大大提高性能。这就叫事件的"委托处理"，也就是子元素"委托"父元素处理这个事件。

具体的写法有两种。第一种是采用.delegate()方法：

　　$("table").delegate("td","click", function(){

　　　　$(this).toggleClass("click");

　　});

第二种是采用.live()方法：

　　$("table").each(function(){

　　　　$("td",this).live("click", function(){

　　　　　　$(this).toggleClass("click");
　　　　});
　　});

这两种写法基本等价。唯一的区别在于，.delegate()是当事件冒泡到指定的父元素时触发，.live()则是当事件冒泡到文档的根元素后触发，因此.delegate()比.live()稍快一点。此外，这两种方法相比传统的.bind()方法还有一个好处，那就是对动态插入的元素也有效，.bind()只对已经存在的DOM元素有效，对动态插入的元素无效。

根据测试，委托处理比不委托处理，快了几十倍。在委托处理的情况下，.delegate()又比.live()大约快26%。

8. 少改动DOM结构

（1）改动DOM结构开销很大，因此不要频繁使用.append()、.insertBefore()和.insetAfter()这样的方法。

如果要插入多个元素，就先把它们合并，然后再一次性插入。根据测试，合并插入比不合并插入，快了将近10倍。

（2）如果你要对一个DOM元素进行大量处理，应该先用.detach()方法，把这个元素从DOM中取出来，处理完毕以后，再重新插回文档。根据测试，使用.detach()方法比不使用时，快了60%。

（3）如果你要在DOM元素上储存数据，不要写成下面这样：

　　varelem = $('#elem');

　　elem.data(key,value);

而要写成

　　varelem = $('#elem');

　　$.data(elem,key,value);

根据测试，后一种写法要比前一种写法，快了将近10倍。因为elem.data()方法是定义在jQuery函数的prototype对象上面的，而$.data()方法是定义jQuery函数上面的，调用的时候不从复杂的jQuery对象上调用，所以速度快得多。（此处可以参阅下面第10点。）

9. 正确处理循环

循环总是一种比较耗时的操作，如果可以使用复杂的选择器直接选中元素，就不要使用循环，去一个个辨认元素。

javascript原生循环方法for和while，要比jQuery的.each()方法快，应该优先使用原生方法。

10. 尽量少生成jQuery对象

每当你使用一次选择器（比如$('#id')），就会生成一个jQuery对象。jQuery对象是一个很庞大的对象，带有很多属性和方法，会占用不少资源。所以，尽量少生成jQuery对象。

举例来说，许多jQuery方法都有两个版本，一个是供jQuery对象使用的版本，另一个是供jQuery函数使用的版本。下面两个例子，都是取出一个元素的文本，使用的都是text()方法。你既可以使用针对jQuery对象的版本：

　　var $text = $("#text");

　　var$ts = $text.text();

也可以使用针对jQuery函数的版本：

　　var $text = $("#text");

　　var$ts = $.text($text);

由于后一种针对jQuery函数的版本不通过jQuery对象操作，所以相对开销较小，速度比较快。

（完）

jQuery的deferred对象详解

jQuery的开发速度很快，几乎每半年一个大版本，每两个月一个小版本。

每个版本都会引入一些新功能。今天我想介绍的，就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象。

这个功能很重要，未来将成为jQuery的核心方法，它彻底改变了如何在jQuery中使用ajax。为了实现它，jQuery的全部ajax代码都被改写了。

但是，它比较抽象，初学者很难掌握，网上的教程也不多。所以，我把自己的学习笔记整理出来了，希望对大家有用。

本文不是初级教程，针对的读者是那些已经具备jQuery使用经验的开发者。如果你想了解jQuery的基本用法，请阅读我编写的《jQuery设计思想》和《jQuery最佳实践》。

======================================

jQuery的deferred对象详解

作者：阮一峰

一、什么是deferred对象？

开发网站的过程中，我们经常遇到某些耗时很长的javascript操作。其中，既有异步的操作（比如ajax读取服务器数据），也有同步的操作（比如遍历一个大型数组），它们都不是立即能得到结果的。

通常的解决方法是，为它们指定回调函数（callback）。即事先规定，一旦它们运行结束，应该调用哪些函数。

但是，在回调函数方面，jQuery的功能非常弱。为了改变这一点，jQuery开发团队就设计了deferred对象。

简单说，deferred对象就是jQuery的回调函数解决方案。在英语中，defer的意思是"延迟"，所以deferred对象的含义就是"延迟"到未来某个点再执行。

它解决了如何处理耗时操作的问题，对那些操作提供了更好的控制，以及统一的编程接口。它的主要功能，可以归结为四点。下面我们通过示例代码，一步步来学习。

二、ajax操作的链式写法

jQuery的ajax操作，传统写法是这样的：

　　$.ajax({

　　　　url: "test.html",

　　　　success: function(){
　　　　　　alert("哈哈，成功了！");
　　　　},

　　　　error:function(){
　　　　　　alert("出错啦！");
　　　　}

　　});

（运行代码示例1）

在上面的代码中，$.ajax()接受一个对象参数，这个对象包含两个方法：success方法指定操作成功后的回调函数，error方法指定操作失败后的回调函数。

$.ajax()操作完成后，如果使用的是低于1.5.0版本的jQuery，返回的是XHR对象，你没法进行链式操作；如果高于1.5.0版本，返回的是deferred对象，可以进行链式操作。

现在，新的写法是这样的：

　　$.ajax("test.html")

　　.done(function(){alert("哈哈，成功了！"); })

　　.fail(function(){alert("出错啦！"); });

（运行代码示例2）

可以看到，done()相当于success方法，fail()相当于error方法。采用链式写法以后，代码的可读性大大提高。

三、指定同一操作的多个回调函数

deferred对象的一大好处，就是它允许你自由添加多个回调函数。

还是以上面的代码为例，如果ajax操作成功后，除了原来的回调函数，我还想再运行一个回调函数，怎么办？

很简单，直接把它加在后面就行了。

　　$.ajax("test.html")

　　.done(function(){ alert("哈哈，成功了！");})

　　.fail(function(){ alert("出错啦！");} )

　　.done(function(){alert("第二个回调函数！");} );

（运行代码示例3）

回调函数可以添加任意多个，它们按照添加顺序执行。

四、为多个操作指定回调函数

deferred对象的另一大好处，就是它允许你为多个事件指定一个回调函数，这是传统写法做不到的。

请看下面的代码，它用到了一个新的方法$.when()：

　　$.when($.ajax("test1.html"),$.ajax("test2.html"))

　　.done(function(){ alert("哈哈，成功了！");})

　　.fail(function(){ alert("出错啦！");});

（运行代码示例4）

这段代码的意思是，先执行两个操作$.ajax("test1.html")和$.ajax("test2.html")，如果成功了，就运行done()指定的回调函数；如果有一个失败或都失败了，就执行fail()指定的回调函数。

五、普通操作的回调函数接口（上）

deferred对象的最大优点，就是它把这一套回调函数接口，从ajax操作扩展到了所有操作。也就是说，任何一个操作----不管是ajax操作还是本地操作，也不管是异步操作还是同步操作----都可以使用deferred对象的各种方法，指定回调函数。

我们来看一个具体的例子。假定有一个很耗时的操作wait：

　　var wait = function(){

　　　　var tasks = function(){

　　　　　　alert("执行完毕！");

　　　　};

　　　　setTimeout(tasks,5000);

　　};

我们为它指定回调函数，应该怎么做呢？

很自然的，你会想到，可以使用$.when()：

　　$.when(wait())

　　.done(function(){ alert("哈哈，成功了！");})

　　.fail(function(){ alert("出错啦！");});

但是，有一个问题。$.when()的参数只能是deferred对象，所以必须对wait进行改写：

　　var dtd = $.Deferred(); // 新建一个deferred对象

　　var wait = function(dtd){

　　　　var tasks = function(){

　　　　　　alert("执行完毕！");

　　　　　　dtd.resolve(); // 改变deferred对象的执行状态

　　　　};

　　　　setTimeout(tasks,5000);

　　　　returndtd.promise();

　　};

这里有两个地方需要注意。

首先，最后一行不能直接返回dtd，必须返回dtd.promise()。原因是jQuery规定，任意一个deferred对象有三种执行状态----未完成，已完成和已失败。如果直接返回dtd，$.when()的默认执行状态为"已完成"，立即触发后面的done()方法，这就失去回调函数的作用了。dtd.promise()的目的，就是保证目前的执行状态----也就是"未完成"----不变，从而确保只有操作完成后，才会触发回调函数。

其次，当操作完成后，必须手动改变Deferred对象的执行状态，否则回调函数无法触发。dtd.resolve()的作用，就是将dtd的执行状态从"未完成"变成"已完成"，从而触发done()方法。

最后别忘了，修改完wait之后，调用的时候就必须直接传入dtd参数。

　　$.when(wait(dtd))

　　.done(function(){ alert("哈哈，成功了！");})

　　.fail(function(){ alert("出错啦！");});

（运行代码示例5）

六、普通操作的回调函数接口（中）

除了使用$.when()为普通操作添加回调函数，还可以使用deferred对象的建构函数$.Deferred()。

这时，wait函数还是保持不变，我们直接把它传入$.Deferred()：

　　$.Deferred(wait)

　　.done(function(){ alert("哈哈，成功了！");})

　　.fail(function(){ alert("出错啦！");});

（运行代码示例6）

jQuery规定，$.Deferred()可以接受一个函数作为参数，该函数将在$.Deferred()返回结果之前执行。并且，$.Deferred()所生成的Deferred对象将作为这个函数的默认参数。

七、普通操作的回调函数接口（下）

除了上面两种方法以外，我们还可以直接在wait对象上部署deferred接口。

　　var dtd = $.Deferred(); // 生成Deferred对象

　　var wait = function(dtd){

　　　　var tasks = function(){

　　　　　　alert("执行完毕！");

　　　　　　dtd.resolve(); // 改变Deferred对象的执行状态

　　　　};

　　　　setTimeout(tasks,5000);

　　};

　　dtd.promise(wait);

　　wait.done(function(){ alert("哈哈，成功了！");})

　　.fail(function(){ alert("出错啦！");});

　　wait(dtd);

（运行代码示例7）

这里的关键是dtd.promise(wait)这一行，它的作用就是在wait对象上部署Deferred接口。正是因为有了这一行，后面才能直接在wait上面调用done()和fail()。

八、小结：deferred对象的方法

前面已经讲到了deferred对象的多种方法，下面做一个总结：

　　（1） $.Deferred() 生成一个deferred对象。

　　（2） deferred.done() 指定操作成功时的回调函数

　　（3） deferred.fail() 指定操作失败时的回调函数

　　（4） deferred.promise() 没有参数时，作用为保持deferred对象的运行状态不变；接受参数时，作用为在参数对象上部署deferred接口。

　　（5） deferred.resolve() 手动改变deferred对象的运行状态为"已完成"，从而立即触发done()方法。

　　（6） $.when() 为多个操作指定回调函数。

除了这些方法以外，deferred对象还有三个重要方法，上面的教程中没有涉及到。

　　（7）deferred.then()

有时为了省事，可以把done()和fail()合在一起写，这就是then()方法。

　　$.when($.ajax( "/main.php" ))

　　.then(successFunc,failureFunc );

如果then()有两个参数，那么第一个参数是done()方法的回调函数，第二个参数是fail()方法的回调方法。如果then()只有一个参数，那么等同于done()。

　　（8）deferred.reject()

这个方法与deferred.resolve()正好相反，调用后将deferred对象的运行状态变为"已失败"，从而立即触发fail()方法。

　　（9）deferred.always()

这个方法也是用来指定回调函数的，它的作用是，不管调用的是deferred.resolve()还是deferred.reject()，最后总是执行。

　　$.ajax( "test.html" )

　　.always( function() { alert("已执行！");});

（完）

 

 

那么，如果我们要把"属性"（property）和"方法"（method），封装成一个对象，甚至要从原型对象生成一个实例对象，我们应该怎么做呢？

1. 生成对象的原始模式

假定我们把猫看成一个对象，它有"名字"和"颜色"两个属性。

　　varCat = {

　　　　name: '',

　　　　color: ''

　　}

现在，我们需要根据这个原型对象，生成两个实例对象。

　　varcat1 = {}; // 创建一个空对象

　　　　cat1.name= "大毛"; // 按照原型对象的属性赋值

　　　　cat1.color= "黄色";

　　varcat2 = {};

　　　　cat2.name= "二毛";

　　　　cat2.color= "黑色";

好了，这就是最简单的封装了。但是，这样的写法有两个缺点，一是如果多生成几个实例，写起来就非常麻烦；二是实例与原型之间，没有任何办法，可以看出有什么联系。

2. 原始模式的改进

我们可以写一个函数，解决代码重复的问题。

　　functionCat(name,color){

　　　　return{

　　　　　　name:name,

　　　　　　color:color

　　　　}

　　}

然后生成实例对象，就等于是在调用函数：

　　varcat1 = Cat("大毛","黄色");

　　varcat2 = Cat("二毛","黑色");

这种方法的问题依然是，cat1和cat2之间没有内在的联系，不能反映出它们是同一个原型对象的实例。

3. 构造函数模式

为了解决从原型对象生成实例的问题，Javascript提供了一个构造函数（Constructor）模式。

所谓"构造函数"，其实就是一个普通函数，但是内部使用了this变量。对构造函数使用new运算符，就能生成实例，并且this变量会绑定在实例对象上。

比如，猫的原型对象现在可以这样写，

　　functionCat(name,color){

　　　　this.name=name;

　　　　this.color=color;

　　}

我们现在就可以生成实例对象了。

　　varcat1 = new Cat("大毛","黄色");

　　varcat2 = new Cat("二毛","黑色");

　　alert(cat1.name);// 大毛

　　alert(cat1.color);// 黄色

这时cat1和cat2会自动含有一个constructor属性，指向它们的构造函数。

　　alert(cat1.constructor== Cat); //true

　　alert(cat2.constructor== Cat); //true

Javascript还提供了一个instanceof运算符，验证原型对象与实例对象之间的关系。

　　alert(cat1instanceof Cat); //true

　　alert(cat2instanceof Cat); //true

4. 构造函数模式的问题

构造函数方法很好用，但是存在一个浪费内存的问题。

请看，我们现在为Cat对象添加一个不变的属性"type"（种类），再添加一个方法eat（吃老鼠）。那么，原型对象Cat就变成了下面这样：

　　functionCat(name,color){

　　　　this.name= name;

　　　　this.color= color;

　　　　this.type= "猫科动物";

　　　　this.eat= function(){alert("吃老鼠");};

　　}

还是采用同样的方法，生成实例：

　　varcat1 = new Cat("大毛","黄色");

　　varcat2 = new Cat ("二毛","黑色");

　　alert(cat1.type);// 猫科动物

　　cat1.eat();// 吃老鼠

表面上好像没什么问题，但是实际上这样做，有一个很大的弊端。那就是对于每一个实例对象，type属性和eat()方法都是一模一样的内容，每一次生成一个实例，都必须为重复的内容，多占用一些内存。这样既不环保，也缺乏效率。

　　alert(cat1.eat== cat2.eat); //false

能不能让type属性和eat()方法在内存中只生成一次，然后所有实例都指向那个内存地址呢？回答是可以的。

5. Prototype模式

Javascript规定，每一个构造函数都有一个prototype属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承。

这意味着，我们可以把那些不变的属性和方法，直接定义在prototype对象上。

　　functionCat(name,color){

　　　　this.name= name;

　　　　this.color= color;

　　}

　　Cat.prototype.type= "猫科动物";

　　Cat.prototype.eat= function(){alert("吃老鼠")};

然后，生成实例。

　　varcat1 = new Cat("大毛","黄色");

　　varcat2 = new Cat("二毛","黑色");

　　alert(cat1.type);// 猫科动物

　　cat1.eat();// 吃老鼠

这时所有实例的type属性和eat()方法，其实都是同一个内存地址，指向prototype对象，因此就提高了运行效率。

　　alert(cat1.eat== cat2.eat); //true

6. Prototype模式的验证方法

6.1 isPrototypeOf()

这个方法用来判断，某个proptotype对象和某个实例之间的关系。

　　alert(Cat.prototype.isPrototypeOf(cat1));//true

　　alert(Cat.prototype.isPrototypeOf(cat2));//true

6.2 hasOwnProperty()

每个实例对象都有一个hasOwnProperty()方法，用来判断某一个属性到底是本地属性，还是继承自prototype对象的属性。

　　alert(cat1.hasOwnProperty("name"));// true

　　alert(cat1.hasOwnProperty("type"));// false

6.3 in运算符

in运算符可以用来判断，某个实例是否含有某个属性，不管是不是本地属性。

　　alert("name"in cat1); // true

　　alert("type"in cat1); // true

in运算符还可以用来遍历某个对象的所有属性。

　　for(varprop in cat1) { alert("cat1["+prop+"]="+cat1[prop]); }

未完，请继续阅读这个系列的第二部分《构造函数的继承》和第三部分《非构造函数的继承》。

Javascript面向对象编程（二）：构造函数的继承

这个系列的第一部分，主要介绍了如何"封装"数据和方法，以及如何从原型对象生成实例。

今天要介绍的是，如何生成一个"继承"多个对象的实例。

比如，现在有一个"动物"对象的构造函数，

　　functionAnimal(){

　　　　this.species= "动物";

　　}

还有一个"猫"对象的构造函数，

　　functionCat(name,color){

　　　　this.name= name;

　　　　this.color= color;

　　}

怎样才能使"猫"继承"动物"呢？

1. 构造函数绑定

最简单的方法，大概就是使用call或apply方法，将父对象的构造函数绑定在子对象上，也就是在子对象构造函数中加一行：

　　functionCat(name,color){

　　　　Animal.apply(this, arguments);

　　　　this.name= name;

　　　　this.color= color;

　　}

　　varcat1 = new Cat("大毛","黄色");

　　alert(cat1.species);// 动物

2. prototype模式

更常见的做法，则是使用prototype属性。

如果"猫"的prototype对象，指向一个Animal的实例，那么所有"猫"的实例，就能继承Animal了。

　　Cat.prototype= new Animal();

　　Cat.prototype.constructor= Cat;

　　varcat1 = new Cat("大毛","黄色");

　　alert(cat1.species);// 动物

代码的第一行，我们将Cat的prototype对象指向一个Animal的实例。

　　Cat.prototype= new Animal();

它相当于完全删除了prototype对象原先的值，然后赋予一个新值。但是，第二行又是什么意思呢？

　　Cat.prototype.constructor= Cat;

原来，任何一个prototype对象都有一个constructor属性，指向它的构造函数。也就是说，Cat.prototype 这个对象的constructor属性，是指向Cat的。

我们在前一步已经删除了这个prototype对象原来的值，所以新的prototype对象没有constructor属性，所以我们必须手动加上去，否则后面的"继承链"会出问题。这就是第二行的意思。

总之，这是很重要的一点，编程时务必要遵守。下文都遵循这一点，即如果替换了prototype对象，

　　o.prototype= {};

那么，下一步必然是为新的prototype对象加上constructor属性，并将这个属性指回原来的构造函数。

　　o.prototype.constructor= o;

3. 直接继承prototype

由于Animal对象中，不变的属性都可以直接写入Animal.prototype。所以，我们也可以让Cat()跳过 Animal()，直接继承Animal.prototype。

现在，我们先将Animal对象改写：

　　functionAnimal(){ }

　　Animal.prototype.species= "动物";

然后，将Cat的prototype对象，然后指向Animal的prototype对象，这样就完成了继承。

　　Cat.prototype= Animal.prototype;

　　Cat.prototype.constructor= Cat;

　　varcat1 = new Cat("大毛","黄色");

　　alert(cat1.species);// 动物

与前一种方法相比，这样做的优点是效率比较高（不用执行和建立Animal的实例了），比较省内存。缺点是 Cat.prototype和Animal.prototype现在指向了同一个对象，那么任何对Cat.prototype的修改，都会反映到Animal.prototype。

所以，上面这一段代码其实是有问题的。请看第二行

　　Cat.prototype.constructor= Cat;

这一句实际上把Animal.prototype对象的constructor属性也改掉了！

　　alert(Animal.prototype.constructor);// Cat

4. 利用空对象作为中介

由于"直接继承prototype"存在上述的缺点，所以可以利用一个空对象作为中介。

　　varF = function(){};

　　F.prototype= Animal.prototype;

　　Cat.prototype= new F();

　　Cat.prototype.constructor= Cat;

F是空对象，所以几乎不占内存。这时，修改Cat的prototype对象，就不会影响到Animal的prototype对象。

　　alert(Animal.prototype.constructor);// Animal

5. prototype模式的封装函数

我们将上面的方法，封装成一个函数，便于使用。

　　functionextend(Child, Parent) {

　　　　varF = function(){};

　　　　F.prototype= Parent.prototype;

　　　　Child.prototype= new F();

　　　　Child.prototype.constructor= Child;

　　　　Child.uber= Parent.prototype;

　　}

使用的时候，方法如下

　　extend(Cat,Animal);

　　varcat1 = new Cat("大毛","黄色");

　　alert(cat1.species);// 动物

这个extend函数，就是YUI库如何实现继承的方法。

另外，说明一点。函数体最后一行

　　Child.uber= Parent.prototype;

意思是为子对象设一个uber属性，这个属性直接指向父对象的prototype属性。这等于是在子对象上打开一条通道，可以直接调用父对象的方法。这一行放在这里，只是为了实现继承的完备性，纯属备用性质。

6. 拷贝继承

上面是采用prototype对象，实现继承。我们也可以换一种思路，纯粹采用"拷贝"方法实现继承。简单说，如果把父对象的所有属性和方法，拷贝进子对象，不也能够实现继承吗？

首先，还是把Animal的所有不变属性，都放到它的prototype对象上。

　　functionAnimal(){}

　　Animal.prototype.species= "动物";

然后，再写一个函数，实现属性拷贝的目的。

　　functionextend2(Child, Parent) {

　　　　varp = Parent.prototype;

　　　　varc = Child.prototype;

　　　　for(var i in p) {

　　　　　　c[i]= p[i];

　　　　　　}

　　　　c.uber= p;

　　}

这个函数的作用，就是将父对象的prototype对象中的属性，一一拷贝给Child对象的prototype对象。

使用的时候，这样写：

　　extend2(Cat,Animal);

　　varcat1 = new Cat("大毛","黄色");

　　alert(cat1.species);// 动物

未完，请继续阅读第三部分《非构造函数的继承》。

Javascript面向对象编程（三）：非构造函数的继承

这个系列的第一部分介绍了"封装"，第二部分介绍了使用构造函数实现"继承"。

今天是最后一个部分，介绍不使用构造函数实现"继承"。

一、什么是"非构造函数"的继承？

比如，现在有一个对象，叫做"中国人"。

　　varChinese = {
　　　　nation:'中国'
　　};

还有一个对象，叫做"医生"。

　　varDoctor ={
　　　　career:'医生'
　　}

请问怎样才能让"医生"去继承"中国人"，也就是说，我怎样才能生成一个"中国医生"的对象？

这里要注意，这两个对象都是普通对象，不是构造函数，无法使用构造函数方法实现"继承"。

二、object()方法

json格式的发明人Douglas Crockford，提出了一个object()函数，可以做到这一点。

　　functionobject(o) {

　　　　functionF() {}

　　　　F.prototype= o;

　　　　returnnew F();

　　}

这个object()函数，其实只做一件事，就是把子对象的prototype属性，指向父对象，从而使得子对象与父对象连在一起。

使用的时候，第一步先在父对象的基础上，生成子对象：

　　varDoctor = object(Chinese);

然后，再加上子对象本身的属性：

　　Doctor.career= '医生';

这时，子对象已经继承了父对象的属性了。

　　alert(Doctor.nation);//中国

三、浅拷贝

除了使用"prototype链"以外，还有另一种思路：把父对象的属性，全部拷贝给子对象，也能实现继承。

下面这个函数，就是在做拷贝：

　　functionextendCopy(p) {

　　　　varc = {};

　　　　for(var i in p) {
　　　　　　c[i]= p[i];
　　　　}

　　　　c.uber= p;

　　　　returnc;
　　}

使用的时候，这样写：

　　varDoctor = extendCopy(Chinese);

　　Doctor.career= '医生';

　　alert(Doctor.nation);// 中国

但是，这样的拷贝有一个问题。那就是，如果父对象的属性等于数组或另一个对象，那么实际上，子对象获得的只是一个内存地址，而不是真正拷贝，因此存在父对象被篡改的可能。

请看，现在给Chinese添加一个"出生地"属性，它的值是一个数组。

　　Chinese.birthPlaces= ['北京','上海','香港'];

通过extendCopy()函数，Doctor继承了Chinese。

　　varDoctor = extendCopy(Chinese);

然后，我们为Doctor的"出生地"添加一个城市：

　　Doctor.birthPlaces.push('厦门');

发生了什么事？Chinese的"出生地"也被改掉了！

　　alert(Doctor.birthPlaces);//北京,上海,香港,厦门

　　alert(Chinese.birthPlaces);//北京,上海,香港,厦门

所以，extendCopy()只是拷贝基本类型的数据，我们把这种拷贝叫做"浅拷贝"。这是早期jQuery实现继承的方式。

四、深拷贝

所谓"深拷贝"，就是能够实现真正意义上的数组和对象的拷贝。它的实现并不难，只要递归调用"浅拷贝"就行了。

　　functiondeepCopy(p, c) {

　　　　varc = c || {};

　　　　for(var i in p) {

　　　　　　if(typeof p[i] === 'object') {

　　　　　　　　c[i]= (p[i].constructor === Array) ? [] : {};

　　　　　　　　deepCopy(p[i],c[i]);

　　　　　　}else {

　　　　　　　　　c[i]= p[i];

　　　　　　}
　　　　}

　　　　returnc;
　　}

使用的时候这样写：

　　varDoctor = deepCopy(Chinese);

现在，给父对象加一个属性，值为数组。然后，在子对象上修改这个属性：

　　Chinese.birthPlaces= ['北京','上海','香港'];

　　Doctor.birthPlaces.push('厦门');

这时，父对象就不会受到影响了。

　　alert(Doctor.birthPlaces);//北京,上海,香港,厦门

　　alert(Chinese.birthPlaces);//北京,上海,香港

目前，jQuery库使用的就是这种继承方法。

Javascript的this用法

this是Javascript语言的一个关键字。

它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。比如，

　　functiontest(){

　　　　this.x= 1;

　　}

随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。

下面分四种情况，详细讨论this的用法。

情况一：纯粹的函数调用

这是函数的最通常用法，属于全局性调用，因此this就代表全局对象Global。

请看下面这段代码，它的运行结果是1。

　　functiontest(){

　　　　this.x= 1;

　　　　alert(this.x);

　　}

　　test();// 1

为了证明this就是全局对象，我对代码做一些改变：

　　varx = 1;

　　functiontest(){

　　　　alert(this.x);

　　}

　　test();// 1

运行结果还是1。再变一下：

　　varx = 1;

　　functiontest(){

　　　　this.x= 0;

　　}

　　test();

　　alert(x);//0

情况二：作为对象方法的调用

函数还可以作为某个对象的方法调用，这时this就指这个上级对象。

　　functiontest(){

　　　　alert(this.x);

　　}

　　varo = {};

　　o.x= 1;

　　o.m= test;

　　o.m();// 1

情况三 作为构造函数调用

所谓构造函数，就是通过这个函数生成一个新对象（object）。这时，this就指这个新对象。

　　functiontest(){

　　　　this.x= 1;

　　}

　　varo = new test();

　　alert(o.x);// 1

运行结果为1。为了表明这时this不是全局对象，我对代码做一些改变：

　　varx = 2;

　　functiontest(){

　　　　this.x= 1;

　　}

　　varo = new test();

　　alert(x);//2

运行结果为2，表明全局变量x的值根本没变。

情况四 apply调用

apply()是函数对象的一个方法，它的作用是改变函数的调用对象，它的第一个参数就表示改变后的调用这个函数的对象。因此，this指的就是这第一个参数。

　　varx = 0;

　　functiontest(){

　　　　alert(this.x);

　　}

　　varo={};

　　o.x= 1;

　　o.m= test;

　　o.m.apply();//0

apply()的参数为空时，默认调用全局对象。因此，这时的运行结果为0，证明this指的是全局对象。

如果把最后一行代码修改为

　　o.m.apply(o);//1

运行结果就变成了1，证明了这时this代表的是对象o。

学习Javascript闭包（Closure）

闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。

下面就是我的学习笔记，对于Javascript初学者应该是很有用的。

一、变量的作用域

要理解闭包，首先必须理解Javascript特殊的变量作用域。

变量的作用域无非就是两种：全局变量和局部变量。

Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。

　　varn=999;

　　functionf1(){
　　　　alert(n);
　　}

　　f1();// 999

另一方面，在函数外部自然无法读取函数内的局部变量。

　　functionf1(){
　　　　varn=999;
　　}

　　alert(n);// error

这里有一个地方需要注意，函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量！

　　functionf1(){
　　　　n=999;
　　}

　　f1();

　　alert(n);// 999

二、如何从外部读取局部变量？

出于种种原因，我们有时候需要得到函数内的局部变量。但是，前面已经说过了，正常情况下，这是办不到的，只有通过变通方法才能实现。

那就是在函数的内部，再定义一个函数。

　　functionf1(){

　　　　varn=999;

　　　　functionf2(){
　　　　　　alert(n);// 999
　　　　}

　　}

在上面的代码中，函数f2就被包括在函数f1内部，这时f1内部的所有局部变量，对f2都是可见的。但是反过来就不行，f2内部的局部变量，对f1就是不可见的。这就是Javascript语言特有的"链式作用域"结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。

既然f2可以读取f1中的局部变量，那么只要把f2作为返回值，我们不就可以在f1外部读取它的内部变量了吗！

　　functionf1(){

　　　　varn=999;

　　　　functionf2(){
　　　　　　alert(n);
　　　　}

　　　　returnf2;

　　}

　　varresult=f1();

　　result();// 999

三、闭包的概念

上一节代码中的f2函数，就是闭包。

各种专业文献上的"闭包"（closure）定义非常抽象，很难看懂。我的理解是，闭包就是能够读取其他函数内部变量的函数。

由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。

所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

四、闭包的用途

闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

怎么来理解这句话呢？请看下面的代码。

　　functionf1(){

　　　　varn=999;

　　　　nAdd=function(){n+=1}

　　　　functionf2(){
　　　　　　alert(n);
　　　　}

　　　　returnf2;

　　}

　　varresult=f1();

　　result();// 999

　　nAdd();

　　result();// 1000

在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。

为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。

这段代码中另一个值得注意的地方，就是"nAdd=function(){n+=1}"这一行，首先在nAdd前面没有使用var关键字，因此nAdd是一个全局变量，而不是局部变量。其次，nAdd的值是一个匿名函数（anonymous function），而这个匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。

五、使用闭包的注意点

1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

六、思考题

如果你能理解下面两段代码的运行结果，应该就算理解闭包的运行机制了。

代码片段一。

　　varname = "The Window";

　　varobject = {
　　　　name: "My Object",

　　　　getNameFunc: function(){
　　　　　　returnfunction(){
　　　　　　　　returnthis.name;
　　　　　　};

　　　　}

　　};

　　alert(object.getNameFunc()());

代码片段二。

　　varname = "The Window";

　　varobject = {
　　　　name: "My Object",

　　　　getNameFunc: function(){
　　　　　　varthat = this;
　　　　　　returnfunction(){
　　　　　　　　returnthat.name;
　　　　　　};

　　　　}

　　};

　　alert(object.getNameFunc()());

（完）

12种不宜使用的Javascript语法

这几天，我在读《Javascript语言精粹》。

这本书很薄，100多页，正好假日里翻翻。

该书的作者是DouglasCrockford，他是目前世界上最精通Javascript的人之一，也是Json格式的创造者。

他认为Javascript有很多糟粕。因为1995年BrendanEich设计这种语言的时候，只用了三个月，很多语言特性没有经过深思熟虑，就推向了市场。结果等到人们意识到这些问题的时候，已经有100万程序员在使用它了，不可能再大幅修改语言本身了。所以，Douglas Crockford决定，他要告诉大家，Javascript中哪些部分是精粹，哪些部分是糟粕和鸡肋。

这个想法非常好，但是我不得不说，这本书写得不够好，不适合新手阅读。原因如下：1）Douglas Crockford叙述得不清晰，更像与同行讨论问题，而不是由浅入深地讲解问题。这本书的重点不是解释，所以读完后，我觉得Javascript好像变得更复杂了。2）他固执地使用铁路图（railroad diagram）解释每一条语句。全世界似乎只有他一个人使用这种比Javascript更难看懂的图。3）该书基本上是一本简化的Javascript语法手册，缺乏足够的新内容。4）该书举例过少，而且在最难的函数和对象部分，使用的例子都是环环相套、层层递进的例子，导致阅读起来很吃力。

该书最有价值的内容不是正文，反而是附录。在附录B中，Douglas Crockford列出了12种应该避免使用的Javascript语法，我觉得非常值得推广。

==============================

1. ==

Javascript有两组相等运算符，一组是==和!=，另一组是===和!==。前者只比较值的相等，后者除了值以外，还比较类型是否相同。

请尽量不要使用前一组，永远只使用===和!==。因为==默认会进行类型转换，规则十分难记。如果你不相信的话，请回答下面五个判断式的值是true还是false：

　　false== 'false'

　　false== undefined

　　false== null

　　null== undefined

　　0== ''

前三个是false，后两个是true。

2. with

with的本意是减少键盘输入。比如

　　obj.a= obj.b;

　　obj.c= obj.d;

可以简写成

　　with(obj){
　　　　a= b;
　　　　c= d;
　　}

但是，在实际运行时，解释器会首先判断obj.b和obj.d是否存在，如果不存在的话，再判断全局变量b和d是否存在。这样就导致了低效率，而且可能会导致意外，因此最好不要使用with语句。

3. eval

eval用来直接执行一个字符串。这条语句也是不应该使用的，因为它有性能和安全性的问题，并且使得代码更难阅读。

eval能够做到的事情，不用它也能做到。比如

　　eval("myValue= myObject." + myKey + ";");

可以直接写成

　　myValue= myObject[myKey];

至于ajax操作返回的json字符串，可以使用官方网站提供的解析器json_parse.js运行。

4. continue

这条命令的作用是返回到循环的头部，但是循环本来就会返回到头部。所以通过适当的构造，完全可以避免使用这条命令，使得效率得到改善。

5. switch 贯穿

switch结构中的case语句，默认是顺序执行，除非遇到break，return和throw。有的程序员喜欢利用这个特点，比如

　　switch(n){
　　　　case1:
　　　　case2:
　　　　　　break;
　　}

这样写容易出错，而且难以发现。因此建议避免switch贯穿，凡是有case的地方，一律加上break。

　　switch(n){
　　　　case1:
　　　　　　break;
　　　　case2:
　　　　　　break;
　　}

6. 单行的块结构

if、while、do和for，都是块结构语句，但是也可以接受单行命令。比如

　　if(ok) t = true;

甚至写成

　　if(ok)
　　　　t= true;

这样不利于阅读代码，而且将来添加语句时非常容易出错。建议不管是否只有一行命令，都一律加上大括号。

　　if(ok){
　　　　t= true;
　　}

7. ++和--

递增运算符++和递减运算符--，直接来自C语言，表面上可以让代码变得很紧凑，但是实际上会让代码看上去更复杂和更晦涩。因此为了代码的整洁性和易读性，不用为好。

8. 位运算符

Javascript完全套用了Java的位运算符，包括按位与&、按位或|、按位异或^、按位非~、左移<<、带符号的右移>>和用0补足的右移>>>。

这套运算符针对的是整数，所以对Javascript完全无用，因为Javascript内部，所有数字都保存为双精度浮点数。如果使用它们的话，Javascript不得不将运算数先转为整数，然后再进行运算，这样就降低了速度。而且“按位与运算符”&同“逻辑与运算符”&&，很容易混淆。

9. function语句

在Javascript中定义一个函数，有两种写法：

　　functionfoo() { }

和

　　varfoo = function () { }

两种写法完全等价。但是在解析的时候，前一种写法会被解析器自动提升到代码的头部，因此违背了函数应该先定义后使用的要求，所以建议定义函数时，全部采用后一种写法。

10. 基本数据类型的包装对象

Javascript的基本数据类型包括字符串、数字、布尔值，它们都有对应的包装对象String、Number和Boolean。所以，有人会这样定义相关值：

　　newString("Hello World");

　　newNumber(2000);

　　newBoolean(false);

这样写完全没有必要，而且非常费解，因此建议不要使用。

另外，newObject和new Array也不建议使用，可以用{}和[]代替。

11. new语句

Javascript是世界上第一个被大量使用的支持Lambda函数的语言，本质上属于与Lisp同类的函数式编程语言。但是当前世界，90%以上的程序员都是使用面向对象编程。为了靠近主流，Javascript做出了妥协，采纳了类的概念，允许根据类生成对象。

类是这样定义的：

　　varCat = function (name) {
　　　　this.name= name;
　　　　this.saying= 'meow' ;
　　}

然后，再生成一个对象

　　varmyCat = new Cat('mimi');

这种利用函数生成类、利用new生成对象的语法，其实非常奇怪，一点都不符合直觉。而且，使用的时候，很容易忘记加上new，就会变成执行函数，然后莫名其妙多出几个全局变量。所以，建议不要这样创建对象，而采用一种变通方法。

Douglas Crockford给出了一个函数：

　　Object.beget= function (o) {
　　　　varF = function (o) {};
　　　　F.prototype= o ;
　　　　returnnew F;
　　};

创建对象时就利用这个函数，对原型对象进行操作：

　　varCat = {
　　　　name:'',
　　　　saying:'meow'
　　};

　　varmyCat = Object.beget(Cat);

对象生成后，可以自行对相关属性进行赋值：

　　myCat.name= 'mimi';

12. void

在大多数语言中，void都是一种类型，表示没有值。但是在Javascript中，void是一个运算符，接受一个运算数，并返回undefined。

　　void0; // undefined

这个命令没什么用，而且很令人困惑，建议避免使用。

（完）

快速排序（Quicksort）的Javascript实现

日本程序员norahiko，写了一个排序算法的动画演示，非常有趣。

这个周末，我就用它当做教材，好好学习了一下各种排序算法。

排序算法（Sortingalgorithm）是计算机科学最古老、最基本的课题之一。要想成为合格的程序员，就必须理解和掌握各种排序算法。

目前，最常见的排序算法大概有七八种，其中"快速排序"（Quicksort）使用得最广泛，速度也较快。它是图灵奖得主C. A. R. Hoare（1934--）于1960时提出来的。

"快速排序"的思想很简单，整个排序过程只需要三步：

　　（1）在数据集之中，选择一个元素作为"基准"（pivot）。

　　（2）所有小于"基准"的元素，都移到"基准"的左边；所有大于"基准"的元素，都移到"基准"的右边。

　　（3）对"基准"左边和右边的两个子集，不断重复第一步和第二步，直到所有子集只剩下一个元素为止。

举例来说，现在有一个数据集{85, 24, 63, 45, 17, 31, 96, 50}，怎么对其排序呢？

第一步，选择中间的元素45作为"基准"。（基准值可以任意选择，但是选择中间的值比较容易理解。）

第二步，按照顺序，将每个元素与"基准"进行比较，形成两个子集，一个"小于45"，另一个"大于等于45"。

第三步，对两个子集不断重复第一步和第二步，直到所有子集只剩下一个元素为止。

下面参照网上的资料（这里和这里），用Javascript语言实现上面的算法。

首先，定义一个quickSort函数，它的参数是一个数组。

varquickSort = function(arr) {

};

然后，检查数组的元素个数，如果小于等于1，就返回。

varquickSort = function(arr) {

　　if(arr.length <= 1) { return arr; }

};

接着，选择"基准"（pivot），并将其与原数组分离，再定义两个空数组，用来存放一左一右的两个子集。

varquickSort = function(arr) {

　　if (arr.length <= 1) { return arr; }

　　varpivotIndex = Math.floor(arr.length / 2) ;

　　varpivot = arr.splice(pivotIndex, 1)[0];

　　varleft = [];

　　varright = [];

};

然后，开始遍历数组，小于"基准"的元素放入左边的子集，大于基准的元素放入右边的子集。

varquickSort = function(arr) {

　　if (arr.length <= 1) { return arr; }

　　var pivotIndex = Math.floor(arr.length / 2) ;

　　var pivot = arr.splice(pivotIndex, 1)[0];

　　var left = [];

　　var right = [];

　　for(var i = 0; i < arr.length; i++){

　　　　if(arr[i] < pivot) {

　　　　　　left.push(arr[i]);

　　　　}else {

　　　　　　right.push(arr[i]);

　　　　}

　　}

};

最后，使用递归不断重复这个过程，就可以得到排序后的数组。

varquickSort = function(arr) {

　　if (arr.length <= 1) { return arr; }

　　var pivotIndex = Math.floor(arr.length / 2);

　　var pivot = arr.splice(pivotIndex, 1)[0];

　　var left = [];

　　var right = [];

　　for (var i = 0; i < arr.length; i++){

　　　　if (arr[i] < pivot) {

　　　　　　left.push(arr[i]);

　　　　} else {

　　　　　　right.push(arr[i]);

　　　　}

　　}

　　returnquickSort(left).concat([pivot], quickSort(right));

};

使用的时候，直接调用quickSort()就行了。

（完）

Javascript继承机制的设计思想

我一直很难理解Javascript语言的继承机制。

它没有"子类"和"父类"的概念，也没有"类"（class）和"实例"（instance）的区分，全靠一种很奇特的"原型链"（prototype chain）模式，来实现继承。

我花了很多时间，学习这个部分，还做了很多笔记。但是都属于强行记忆，无法从根本上理解。

直到昨天，我读到法国程序员Vjeux的解释，才恍然大悟，完全明白了Javascript为什么这样设计。

下面，我尝试用自己的语言，来解释它的设计思想。彻底说明白prototype对象到底是怎么回事。其实根本就没那么复杂，真相非常简单。

一、从古代说起

要理解Javascript的设计思想，必须从它的诞生说起。

1994年，网景公司（Netscape）发布了Navigator浏览器0.9版。这是历史上第一个比较成熟的网络浏览器，轰动一时。但是，这个版本的浏览器只能用来浏览，不具备与访问者互动的能力。比如，如果网页上有一栏"用户名"要求填写，浏览器就无法判断访问者是否真的填写了，只有让服务器端判断。如果没有填写，服务器端就返回错误，要求用户重新填写，这太浪费时间和服务器资源了。

因此，网景公司急需一种网页脚本语言，使得浏览器可以与网页互动。工程师Brendan Eich负责开发这种新语言。他觉得，没必要设计得很复杂，这种语言只要能够完成一些简单操作就够了，比如判断用户有没有填写表单。

1994年正是面向对象编程（object-oriented programming）最兴盛的时期，C++是当时最流行的语言，而Java语言的1.0版即将于第二年推出，Sun公司正在大肆造势。

BrendanEich无疑受到了影响，Javascript里面所有的数据类型都是对象（object），这一点与Java非常相似。但是，他随即就遇到了一个难题，到底要不要设计"继承"机制呢？

二、Brendan Eich的选择

如果真的是一种简易的脚本语言，其实不需要有"继承"机制。但是，Javascript里面都是对象，必须有一种机制，将所有对象联系起来。所以，Brendan Eich最后还是设计了"继承"。

但是，他不打算引入"类"（class）的概念，因为一旦有了"类"，Javascript就是一种完整的面向对象编程语言了，这好像有点太正式了，而且增加了初学者的入门难度。

他考虑到，C++和Java语言都使用new命令，生成实例。

C++的写法是：

　　ClassName *object = new ClassName(param);

Java的写法是：

　　Foo foo = new Foo();

因此，他就把new命令引入了Javascript，用来从原型对象生成一个实例对象。但是，Javascript没有"类"，怎么来表示原型对象呢？

这时，他想到C++和Java使用new命令时，都会调用"类"的构造函数（constructor）。他就做了一个简化的设计，在Javascript语言中，new命令后面跟的不是类，而是构造函数。

举例来说，现在有一个叫做DOG的构造函数，表示狗对象的原型。

　　function DOG(name){

　　　　this.name = name;

　　}

对这个构造函数使用new，就会生成一个狗对象的实例。

　　vardogA = new DOG('大毛');

　　alert(dogA.name); // 大毛

注意构造函数中的this关键字，它就代表了新创建的实例对象。

三、new运算符的缺点

用构造函数生成实例对象，有一个缺点，那就是无法共享属性和方法。

比如，在DOG对象的构造函数中，设置一个实例对象的共有属性species。

　　function DOG(name){

　　　　this.name = name;

　　　　this.species= '犬科';

　　}

然后，生成两个实例对象：

　　var dogA = new DOG('大毛');

　　var dogB = new DOG('二毛');

这两个对象的species属性是独立的，修改其中一个，不会影响到另一个。

　　dogA.species= '猫科';

　　alert(dogB.species); // 显示"犬科"，不受dogA的影响

每一个实例对象，都有自己的属性和方法的副本。这不仅无法做到数据共享，也是极大的资源浪费。

四、prototype属性的引入

考虑到这一点，Brendan Eich决定为构造函数设置一个prototype属性。

这个属性包含一个对象（以下简称"prototype对象"），所有实例对象需要共享的属性和方法，都放在这个对象里面；那些不需要共享的属性和方法，就放在构造函数里面。

实例对象一旦创建，将自动引用prototype对象的属性和方法。也就是说，实例对象的属性和方法，分成两种，一种是本地的，另一种是引用的。

还是以DOG构造函数为例，现在用prototype属性进行改写：

　　function DOG(name){

　　　　this.name = name;

　　}

　　DOG.prototype= { species : '犬科' };

　　vardogA = new DOG('大毛');

　　var dogB = new DOG('二毛');

　　alert(dogA.species);// 犬科

　　alert(dogB.species); // 犬科

现在，species属性放在prototype对象里，是两个实例对象共享的。只要修改了prototype对象，就会同时影响到两个实例对象。

　　DOG.prototype.species= '猫科';

　　alert(dogA.species);// 猫科

　　alert(dogB.species); // 猫科

五、总结

由于所有的实例对象共享同一个prototype对象，那么从外界看起来，prototype对象就好像是实例对象的原型，而实例对象则好像"继承"了prototype对象一样。

这就是Javascript继承机制的设计思想。不知道我说清楚了没有，继承机制的具体应用方法，可以参考我写的系列文章：

　　* 《Javascript面向对象编程（一）：封装》

　　* 《Javascript面向对象编程（二）：构造函数的继承》

　　* 《Javascript面向对象编程（三）：非构造函数的继承》

（完）

Javascript诞生记

1.

二周前，我谈了一点Javascript的历史。

今天把这部分补全，从历史的角度，说明Javascript到底是如何设计出来的。

只有了解这段历史，才能明白Javascript为什么是现在的样子。我依据的资料，主要是Brendan Eich的自述。

2.

上一篇文章写道：

"1994年，网景公司（Netscape）发布了Navigator浏览器0.9版。这是历史上第一个比较成熟的网络浏览器，轰动一时。但是，这个版本的浏览器只能用来浏览，不具备与访问者互动的能力。......网景公司急需一种网页脚本语言，使得浏览器可以与网页互动。"

网页脚本语言到底是什么语言？网景公司当时有两个选择：一个是采用现有的语言，比如Perl、Python、Tcl、Scheme等等，允许它们直接嵌入网页；另一个是发明一种全新的语言。

这两个选择各有利弊。第一个选择，有利于充分利用现有代码和程序员资源，推广起来比较容易；第二个选择，有利于开发出完全适用的语言，实现起来比较容易。

到底采用哪一个选择，网景公司内部争执不下，管理层一时难以下定决心。

3.

就在这时，发生了另外一件大事：1995年Sun公司将Oak语言改名为Java，正式向市场推出。

Sun公司大肆宣传，许诺这种语言可以"一次编写，到处运行"（Write Once, Run Anywhere），它看上去很可能成为未来的主宰。

网景公司动了心，决定与Sun公司结成联盟。它不仅允许Java程序以applet（小程序）的形式，直接在浏览器中运行；甚至还考虑直接将Java作为脚本语言嵌入网页，只是因为这样会使HTML网页过于复杂，后来才不得不放弃。

总之，当时的形势就是，网景公司的整个管理层，都是Java语言的信徒，Sun公司完全介入网页脚本语言的决策。因此，Javascript后来就是网景和Sun两家公司一起携手推向市场的，这种语言被命名为"Java+script"并不是偶然的。

4.

此时，34岁的系统程序员Brendan Eich登场了。1995年4月，网景公司录用了他。

BrendanEich的主要方向和兴趣是函数式编程，网景公司招聘他的目的，是研究将Scheme语言作为网页脚本语言的可能性。Brendan Eich本人也是这样想的，以为进入新公司后，会主要与Scheme语言打交道。

仅仅一个月之后，1995年5月，网景公司做出决策，未来的网页脚本语言必须"看上去与Java足够相似"，但是比Java简单，使得非专业的网页作者也能很快上手。这个决策实际上将Perl、Python、Tcl、Scheme等非面向对象编程的语言都排除在外了。

BrendanEich被指定为这种"简化版Java语言"的设计师。

5.

但是，他对Java一点兴趣也没有。为了应付公司安排的任务，他只用10天时间就把Javascript设计出来了。

由于设计时间太短，语言的一些细节考虑得不够严谨，导致后来很长一段时间，Javascript写出来的程序混乱不堪。如果Brendan Eich预见到，未来这种语言会成为互联网第一大语言，全世界有几百万学习者，他会不会多花一点时间呢？

总的来说，他的设计思路是这样的：

　　（1）借鉴C语言的基本语法；

　　（2）借鉴Java语言的数据类型和内存管理；

　　（3）借鉴Scheme语言，将函数提升到"第一等公民"（firstclass）的地位；

　　（4）借鉴Self语言，使用基于原型（prototype）的继承机制。

所以，Javascript语言实际上是两种语言风格的混合产物----（简化的）函数式编程+（简化的）面向对象编程。这是由BrendanEich（函数式编程）与网景公司（面向对象编程）共同决定的。

6.

多年以后，Brendan Eich还是看不起Java。

他说：

"Java（对Javascript）的影响，主要是把数据分成基本类型（primitive）和对象类型（object）两种，比如字符串和字符串对象，以及引入了Y2K问题。这真是不幸啊。"

把基本数据类型包装成对象，这样做是否可取，这里暂且不论。Y2K问题则是直接与Java有关。根据设想，Date.getYear()返回的应该是年份的最后两位：

　　var date1 = new Date(1999,0,1);

　　var year1 = date1.getYear();

　　alert(year1); // 99

但是实际上，对于2000年，它返回的是100！

　　var date2 = new Date(2000,0,1);

　　var year2 = date2.getYear();

　　alert(year2); // 100

如果用这个函数生成年份，某些网页可能出现"19100"这样的结果。这个问题完全来源于Java，因为Javascript的日期类直接采用了java.util.Date函数库。Brendan Eich显然很不满意这个结果，这导致后来不得不添加了一个返回四位数年份的Date.getFullYear()函数。

如果不是公司的决策，Brendan Eich绝不可能把Java作为Javascript设计的原型。作为设计者，他一点也不喜欢自己的这个作品：

"与其说我爱Javascript，不如说我恨它。它是C语言和Self语言一夜情的产物。十八世纪英国文学家约翰逊博士说得好：'它的优秀之处并非原创，它的原创之处并不优秀。'（the part that is good is not original,and the part that is original is not good.）"

（完）

Javascript的10个设计缺陷

前几篇文章，我经常说Javascript的设计不够严谨，有很多失误。

今天的这一篇，前半部分就谈为什么会这样，后半部分将列举Javascript的10个设计缺陷。

我参考的文献主要是Douglas Crockford的专著《Javascript语言精粹》（JavaScript:The Good Parts）和Fredrik Holmström的文章《我对Javascript的抱怨》（Mygripes with Javascript）。

一、为什么Javascript有设计缺陷？

这里有三个客观原因，导致Javascript的设计不够完善。

1. 设计阶段过于仓促

Javascript的设计，其实只用了十天。而且，设计师是为了向公司交差，本人并不愿意这样设计（参见《Javascript诞生记》）。

另一方面，这种语言的设计初衷，是为了解决一些简单的网页互动（比如，检查"用户名"是否填写），并没有考虑复杂应用的需要。设计者做梦也想不到，Javascript将来可以写出像Gmail这种极其庞大复杂的网页。

2. 没有先例

Javascript同时结合了函数式编程和面向对象编程的特点，这很可能是历史上的第一例。而且直到今天为止，Javascript仍然是世界上唯一使用Prototype继承模型的主要语言。这使得它没有设计先例可以参考。

3. 过早的标准化

Javascript的发展非常快，根本没有时间调整设计。

1995年5月，设计方案定稿；10月，解释器开发成功；12月，向市场推出，立刻被广泛接受，全世界的用户大量使用。Javascript缺乏一个从小到大、慢慢积累用户的过程，而是连续的爆炸式扩散增长。大量的既成网页和业余网页设计者的参与，使得调整语言规格困难重重。

更糟的是，Javascript的规格还没来及调整，就固化了。

1996年8月，微软公司强势介入，宣布推出自己的脚本语言Jscript；11月，为了压制微软，网景公司决定申请Javascript的国际标准；1997年6月，第一个国际标准ECMA-262正式颁布。

也就是说，Javascript推出一年半之后，国际标准就问世了。设计缺陷还没有充分暴露就成了标准。相比之下，C语言问世将近20年之后，国际标准才颁布。

二、Javascript的10个设计缺陷

1. 不适合开发大型程序

Javascript没有名称空间（namespace），很难模块化；没有如何将代码分布在多个文件的规范；允许同名函数的重复定义，后面的定义可以覆盖前面的定义，很不利于模块化加载。

2. 非常小的标准库

Javascript提供的标准函数库非常小，只能完成一些基本操作，很多功能都不具备。

3. null和undefined

null属于对象（object）的一种，意思是该对象为空；undefined则是一种数据类型，表示未定义。

　　typeof null; // object

　　typeof undefined; // undefined

两者非常容易混淆，但是含义完全不同。

　　var foo;

　　alert(foo == null); // true

　　alert(foo == undefined); // true

　　alert(foo === null); // false

　　alert(foo === undefined); // true

在编程实践中，null几乎没用，根本不应该设计它。

4. 全局变量难以控制

Javascript的全局变量，在所有模块中都是可见的；任何一个函数内部都可以生成全局变量，这大大加剧了程序的复杂性。

　　a = 1;

　　(function(){

　　　　b=2;

　　　　alert(a);

　　})(); // 1

　　alert(b); //2

5. 自动插入行尾分号

Javascript的所有语句，都必须以分号结尾。但是，如果你忘记加分号，解释器并不报错，而是为你自动加上分号。有时候，这会导致一些难以发现的错误。

比如，下面这个函数根本无法达到预期的结果，返回值不是一个对象，而是undefined。

　　function(){

　　　　return
　　　　　　{
　　　　　　　　i=1
　　　　　　};

　　}

原因是解释器自动在return语句后面加上了分号。

　　function(){

　　　　return;
　　　　　　{
　　　　　　　　i=1
　　　　　　};

　　}

6. 加号运算符

+号作为运算符，有两个含义，可以表示数字与数字的和，也可以表示字符与字符的连接。

　　alert(1+10); // 11

　　alert("1"+"10"); // 110

如果一个操作项是字符，另一个操作项是数字，则数字自动转化为字符。

　　alert(1+"10"); // 110

　　alert("10"+1); // 101

这样的设计，不必要地加剧了运算的复杂性，完全可以另行设置一个字符连接的运算符。

7. NaN

NaN是一种数字，表示超出了解释器的极限。它有一些很奇怪的特性：

　　NaN === NaN; //false

　　NaN !== NaN; //true

　　alert( 1 + NaN ); // NaN

与其设计NaN，不如解释器直接报错，反而有利于简化程序。

8. 数组和对象的区分

由于Javascript的数组也属于对象（object），所以要区分一个对象到底是不是数组，相当麻烦。DouglasCrockford的代码是这样的：

　　if ( arr &&
　　　　typeofarr === 'object' &&
　　　　typeofarr.length === 'number' &&
　　　　!arr.propertyIsEnumerable('length')){

　　　　alert("arr is an array");

　　}

9. == 和 ===

==用来判断两个值是否相等。当两个值类型不同时，会发生自动转换，得到的结果非常不符合直觉。

　　"" == "0" // false

　　0 == "" // true

　　0 == "0" // true

　　false == "false" // false

　　false == "0" // true

　　false == undefined // false

　　false == null // false

　　null == undefined // true

　　" \t\r\n" == 0 // true

因此，推荐任何时候都使用"==="（精确判断）比较符。

10. 基本类型的包装对象

Javascript有三种基本数据类型：字符串、数字和布尔值。它们都有相应的建构函数，可以生成字符串对象、数字对象和布尔值对象。

　　new Boolean(false);

　　new Number(1234);

　　new String("Hello World");

与基本数据类型对应的对象类型，作用很小，造成的混淆却很大。

　　alert( typeof 1234); // number

　　alert( typeof new Number(1234)); // object

关于Javascript的更多怪异行为，请参见Javascript Garden和wtfjs.com。

三、如何看待Javascript的设计缺陷？

既然Javascript有缺陷，数量还不少，那么它是不是一种很糟糕的语言？有没有前途？

回答是Javascript并不算糟糕，相反它的编程能力很强大，前途很光明。

首先，如果遵守良好的编程规范，加上第三方函数库的帮助，Javascript的这些缺陷大部分可以回避。

其次，Javascript目前是网页编程的唯一语言，只要互联网继续发展，它就必然一起发展。目前，许多新项目大大扩展了它的用途，node.js使得Javascript可以用于后端的服务器编程，coffeeScript使你可以用python和ruby的语法，撰写Javascript。

最后，只要发布新版本的语言标准（比如 ECMAscript5），就可以弥补这些设计缺陷。当然，标准的发布和标准的实现是两回事，上述的很多缺陷也许会一直伴随到Javascript存在的最后一天。

（完）

如何判断Javascript对象是否存在

Javascript语言的设计不够严谨，很多地方一不小心就会出错。

举例来说，请考虑以下情况。

现在，我们要判断一个全局对象myObj是否存在，如果不存在，就对它进行声明。用自然语言描述的算法如下：

　　if(myObj不存在){

　　　　声明myObj;

　　}

你可能会觉得，写出这段代码很容易。但是实际上，它涉及的语法问题，远比我们想象的复杂。Juriy Zaytsev指出，判断一个Javascript对象是否存在，有超过50种写法。只有对Javascript语言的实现细节非常清楚，才可能分得清它们的区别。

第一种写法

根据直觉，你可能觉得可以这样写：

　　if(!myObj) {

　　　　myObj= { };

　　}

但是，运行这段代码，浏览器会直接抛出ReferenceError错误，导致运行中断。请问错在哪里？

对了，if语句判断myObj是否为空时，这个变量还不存在，所以才会报错。改成下面这样，就能正确运行了。

　　if(!myObj) {

　　　　var myObj = { };

　　}

为什么加了一个var以后，就不报错了？难道这种情况下，if语句做判断时，myObj就已经存在了吗？

要回答这个问题，就必须知道Javascript解释器的工作方式。Javascript语言是"先解析，后运行"，解析时就已经完成了变量声明，所以上面的代码实际等同于：

　　var myObj;

　　if(!myObj) {

　　　　varmyObj = { };

　　}

因此，if语句做判断时，myObj确实已经存在了，所以就不报错了。这就是var命令的"代码提升"（hoisting）作用。Javascript解释器，只"提升"var命令定义的变量，对不使用var命令、直接赋值的变量不起作用，这就是为什么不加var会报错的原因。

第二种写法

除了var命令，还可以有另一种改写，也能得到正确的结果：

　　if (!window.myObj) {

　　　　myObj= { };

　　}

window是javascript的顶层对象，所有的全局变量都是它的属性。所以，判断myobj是否为空，等同于判断window对象是否有myobj属性，这样就可以避免因为myObj没有定义而出现ReferenceError错误。不过，从代码的规范性考虑，最好还是对第二行加上var：

　　if(!window.myObj) {

　　　　var myObj = { };

　　}

或者写成这样：

　　if(!window.myObj) {

　　　　window.myObj = { };

　　}

第三种写法

上面这种写法的缺点在于，在某些运行环境中（比如V8、Rhino），window未必是顶层对象。所以，考虑改写成：

　　if(!this.myObj){

　　　　this.myObj = { };

　　}

在全局变量的层面中，this关键字总是指向顶层变量，所以就可以独立于不同的运行环境。

第四种写法

但是，上面这样写可读性较差，而且this的指向是可变的，容易出错，所以进一步改写：

　　var global = this;

　　if(!global.myObj) {

　　　　global.myObj= { };

　　}

用自定义变量global表示顶层对象，就清楚多了。

第五种写法

还可以使用typeof运算符，判断myObj是否有定义。

　　if(typeof myObj== "undefined") {

　　　　varmyObj = { };

　　}

这是目前使用最广泛的判断javascript对象是否存在的方法。

第六种写法

由于在已定义、但未赋值的情况下，myObj的值直接等于undefined，所以上面的写法可以简化：

　　if(myObj ==undefined) {

　　　　varmyObj = { };

　　}

这里有两个地方需要注意，首先第二行的var关键字不能少，否则会出现ReferenceError错误，其次undefined不能加单引号或双引号，因为这里比较的是undefined这种数据类型，而不是"undefined"这个字符串。

第七种写法

上面的写法在"精确比较"（===）的情况下，依然成立：

　　if(myObj ===undefined) {

　　　　varmyObj = { };

　　}

第八种写法

根据javascript的语言设计，undefined== null，所以比较myObj是否等于null，也能得到正确结果：

　　if(myObj ==null) {

　　　　varmyObj = { };

　　}

不过，虽然运行结果正确，但是从语义上看，这种判断方法是错的，应该避免。因为null指的是已经赋值为null的空对象，即这个对象实际上是有值的，而undefined指的是不存在或没有赋值的对象。因此，这里只能使用"比较运算符"（==），如果这里使用"精确比较运算符"（===），就会出错。

第九种写法

还可以使用in运算符，判断myObj是否为顶层对象的一个属性：

　　if (!('myObj' in window)) {

　　　　window.myObj= { };

　　}

第十种写法

最后，使用hasOwnProperty方法，判断myObj是否为顶层对象的一个属性：

　　if (!this.hasOwnProperty('myObj')) {

　　　　this.myObj= { };

　　}

总结

1. 如果只判断对象是否存在，推荐使用第五种写法。

2. 如果除了对象是否存在，还要判断对象是否有null值，推荐使用第一种写法。

3. 除非特殊情况，所有变量都应该使用var命令声明。

4. 为了跨平台，建议避免使用window表示顶层对象。

5. 在Javascript语言中，null和undefined容易产生混淆。在可能同时涉及两者的情况下，建议使用"精确比较"运算符（===）。

（完）

jQuery设计思想

jQuery是目前使用最广泛的javascript函数库。

据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。

对于网页开发者来说，学会jQuery是必要的。因为它让你了解业界最通用的技术，为将来学习更高级的库打下基础，并且确实可以很轻松地做出许多复杂的效果。

虽然jQuery上手简单，比其他库容易学会，但是要全面掌握，却不轻松。因为它涉及到网页开发的方方面面，提供的各种方法和内部变化有上千种之多。初学者常常感到，入门很方便，提高很困难。

目前，互联网上最好的jQuery入门教材，是Rebecca Murphey写的《jQuery基础》（jQueryFundamentals）。在Google里搜索"jQuery 培训"，此书排在第一位。jQuery官方团队已经同意，把此书作为官方教程的基础。

这本书虽然是入门教材，但也足足有100多页。我对它做了一个详细的笔记，试图理清jQuery的设计思想，找出学习的脉络。我的目标是全面掌握jQuery，遇到问题的时候，心里有底，基本知道使用它的哪一个功能，然后可以迅速从手册中找到具体的写法。

下面就是我的笔记，它应该是目前网上不多的jQuery中文教程之一。你只需要一点javascript语言的基本知识，就能看懂它，在最短的时间里，掌握jQuery的所有主要方面（除了ajax和插件开发）。

===========================================

jQuery设计思想

原文网址：http://jqfundamentals.com/book/

阮一峰 翻译整理

【目录】

　　一、选择网页元素

　　二、改变结果集

　　三、链式操作

　　四、元素的操作：取值和赋值

　　五、元素的操作：移动

　　六、元素的操作：复制、删除和创建

　　七、工具方法

　　八、事件操作

　　九、特殊效果

【正文】

一、选择网页元素

jQuery的基本设计思想和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他Javascript库的根本特点。

使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()（简写为$），然后得到被选中的元素。

选择表达式可以是CSS选择器：

　　$(document)//选择整个文档对象

　　$('#myId')//选择ID为myId的网页元素

　　$('div.myClass')// 选择class为myClass的div元素

　　$('input[name=first]')// 选择name属性等于first的input元素

也可以是jQuery特有的表达式：

　　$('a:first')//选择网页中第一个a元素

　　$('tr:odd')//选择表格的奇数行

　　$('#myForm:input') // 选择表单中的input元素

　　$('div:visible')//选择可见的div元素

　　$('div:gt(2)')// 选择所有的div元素，除了前三个

　　$('div:animated')// 选择当前处于动画状态的div元素

二、改变结果集

jQuery设计思想之二，就是提供各种强大的过滤器，对结果集进行筛选，缩小选择结果。

　　$('div').has('p');// 选择包含p元素的div元素

　　$('div').not('.myClass');//选择class不等于myClass的div元素

　　$('div').filter('.myClass');//选择class等于myClass的div元素

　　$('div').first();//选择第1个div元素

　　$('div').eq(5);//选择第6个div元素

有时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动方法：

　　$('div').next('p');//选择div元素后面的第一个p元素

　　$('div').parent();//选择div元素的父元素

　　$('div').closest('form');//选择离div最近的那个form父元素

　　$('div').children();//选择div的所有子元素

　　$('div').siblings();//选择div的同级元素

三、链式操作

jQuery设计思想之三，就是最终选中网页元素以后，可以对它进行一系列操作，并且所有操作可以连接在一起，以链条的形式写出来，比如：

　　$('div').find('h3').eq(2).html('Hello');

分解开来，就是下面这样：

　　$('div')//找到div元素

　　　.find('h3')//选择其中的h3元素

　　　.eq(2)//选择第3个h3元素

　　　.html('Hello');//将它的内容改为Hello

这是jQuery最令人称道、最方便的特点。它的原理在于每一步的jQuery操作，返回的都是一个jQuery对象，所以不同操作可以连在一起。

jQuery还提供了.end()方法，使得结果集可以后退一步：

　　$('div')

　　　.find('h3')

　　　.eq(2)

　　　.html('Hello')

　　　.end() //退回到选中所有的h3元素的那一步

　　　.eq(0)//选中第一个h3元素

　　　.html('World');//将它的内容改为World

四、元素的操作：取值和赋值

操作网页元素，最常见的需求是取得它们的值，或者对它们进行赋值。

jQuery设计思想之四，就是使用同一个函数，来完成取值（getter）和赋值（setter），即"取值器"与"赋值器"合一。到底是取值还是赋值，由函数的参数决定。

　　$('h1').html();//html()没有参数，表示取出h1的值

　　$('h1').html('Hello');//html()有参数Hello，表示对h1进行赋值

常见的取值和赋值函数如下：

　　.html() 取出或设置html内容

　　.text() 取出或设置text内容

　　.attr() 取出或设置某个属性的值

　　.width() 取出或设置某个元素的宽度

　　.height() 取出或设置某个元素的高度

　　.val() 取出某个表单元素的值

需要注意的是，如果结果集包含多个元素，那么赋值的时候，将对其中所有的元素赋值；取值的时候，则是只取出第一个元素的值（.text()例外，它取出所有元素的text内容）。

五、元素的操作：移动

jQuery设计思想之五，就是提供两组方法，来操作元素在网页中的位置移动。一组方法是直接移动该元素，另一组方法是移动其他元素，使得目标元素达到我们想要的位置。

假定我们选中了一个div元素，需要把它移动到p元素后面。

第一种方法是使用.insertAfter()，把div元素移动p元素后面：

　　$('div').insertAfter('p');

第二种方法是使用.after()，把p元素加到div元素前面：

　　$('p').after('div');

表面上看，这两种方法的效果是一样的，唯一的不同似乎只是操作视角的不同。但是实际上，它们有一个重大差别，那就是返回的元素不一样。第一种方法返回div元素，第二种方法返回p元素。你可以根据需要，选择到底使用哪一种方法。

使用这种模式的操作方法，一共有四对：

　　.insertAfter()和.after()：在现存元素的外部，从后面插入元素

　　.insertBefore()和.before()：在现存元素的外部，从前面插入元素

　　.appendTo()和.append()：在现存元素的内部，从后面插入元素

　　.prependTo()和.prepend()：在现存元素的内部，从前面插入元素

六、元素的操作：复制、删除和创建

除了元素的位置移动之外，jQuery还提供其他几种操作元素的重要方法。

复制元素使用.clone()。

删除元素使用.remove()和.detach()。两者的区别在于，前者不保留被删除元素的事件，后者保留，有利于重新插入文档时使用。

清空元素内容（但是不删除该元素）使用.empty()。

创建新元素的方法非常简单，只要把新元素直接传入jQuery的构造函数就行了：

　　$('<p>Hello</p>');

　　$('<liclass="new">new list item</li>');

　　$('ul').append('<li>listitem</li>');

七、工具方法

jQuery设计思想之六：除了对选中的元素进行操作以外，还提供一些与元素无关的工具方法（utility）。不必选中元素，就可以直接使用这些方法。

如果你懂得Javascript语言的继承原理，那么就能理解工具方法的实质。它是定义在jQuery构造函数上的方法，即jQuery.method()，所以可以直接使用。而那些操作元素的方法，是定义在构造函数的prototype对象上的方法，即jQuery.prototype.method()，所以必须生成实例（即选中元素）后使用。如果不理解这种区别，问题也不大，只要把工具方法理解成，是像javascript原生函数那样，可以直接使用的方法就行了。

常用的工具方法有以下几种：

　　$.trim()去除字符串两端的空格。

　　$.each()遍历一个数组或对象。

　　$.inArray()返回一个值在数组中的索引位置。如果该值不在数组中，则返回-1。

　　$.grep()返回数组中符合某种标准的元素。

　　$.extend()将多个对象，合并到第一个对象。

　　$.makeArray()将对象转化为数组。

　　$.type()判断对象的类别（函数对象、日期对象、数组对象、正则对象等等）。

　　$.isArray()判断某个参数是否为数组。

　　$.isEmptyObject()判断某个对象是否为空（不含有任何属性）。

　　$.isFunction()判断某个参数是否为函数。

　　$.isPlainObject()判断某个参数是否为用"{}"或"newObject"建立的对象。

　　$.support()判断浏览器是否支持某个特性。

八、事件操作

jQuery设计思想之七，就是把事件直接绑定在网页元素之上。

　　$('p').click(function(){

　　　　alert('Hello');

　　});

目前，jQuery主要支持以下事件：

　　.blur() 表单元素失去焦点。

　　.change() 表单元素的值发生变化

　　.click() 鼠标单击

　　.dblclick() 鼠标双击

　　.focus() 表单元素获得焦点

　　.focusin() 子元素获得焦点

　　.focusout() 子元素失去焦点

　　.hover() 同时为mouseenter和mouseleave事件指定处理函数

　　.keydown() 按下键盘（长时间按键，只返回一个事件）

　　.keypress() 按下键盘（长时间按键，将返回多个事件）

　　.keyup() 松开键盘

　　.load()元素加载完毕

　　.mousedown() 按下鼠标

　　.mouseenter()鼠标进入（进入子元素不触发）

　　.mouseleave()鼠标离开（离开子元素不触发）

　　.mousemove() 鼠标在元素内部移动

　　.mouseout()鼠标离开（离开子元素也触发）

　　.mouseover() 鼠标进入（进入子元素也触发）

　　.mouseup() 松开鼠标

　　.ready() DOM加载完成

　　.resize() 浏览器窗口的大小发生改变

　　.scroll() 滚动条的位置发生变化

　　.select() 用户选中文本框中的内容

　　.submit() 用户递交表单

　　.toggle()根据鼠标点击的次数，依次运行多个函数

　　.unload() 用户离开页面

以上这些事件在jQuery内部，都是.bind()的便捷方式。使用.bind()可以更灵活地控制事件，比如为多个事件绑定同一个函数：

　　$('input').bind(

　　　　'clickchange', //同时绑定click和change事件

　　　　function(){

　　　　　　alert('Hello');

　　　　}

　　);

有时，你只想让事件运行一次，这时可以使用.one()方法。

　　$("p").one("click",function() {

　　　　alert("Hello");//只运行一次，以后的点击不会运行

　　});

.unbind()用来解除事件绑定。

　　$('p').unbind('click');

所有的事件处理函数，都可以接受一个事件对象（eventobject）作为参数，比如下面例子中的e：

　　$("p").click(function(e){

　　　　alert(e.type);// "click"

　　});

这个事件对象有一些很有用的属性和方法：

　　event.pageX事件发生时，鼠标距离网页左上角的水平距离

　　event.pageY事件发生时，鼠标距离网页左上角的垂直距离

　　event.type事件的类型（比如click）

　　event.which按下了哪一个键

　　event.data在事件对象上绑定数据，然后传入事件处理函数

　　event.target事件针对的网页元素

　　event.preventDefault()阻止事件的默认行为（比如点击链接，会自动打开新页面）

　　event.stopPropagation() 停止事件向上层元素冒泡

在事件处理函数中，可以用this关键字，返回事件针对的DOM元素：

　　$('a').click(function(){

　　　　if($(this).attr('href').match('evil')) { //如果确认为有害链接

　　　　　　e.preventDefault();//阻止打开

　　　　　　$(this).addClass('evil');//加上表示有害的class

　　　　}

　　});

有两种方法，可以自动触发一个事件。一种是直接使用事件函数，另一种是使用.trigger()或.triggerHandler()。

　　$('a').click();

　　$('a').trigger('click');

九、特殊效果

最后，jQuery允许对象呈现某些特殊效果。

　　$('h1').show(); //展现一个h1标题

常用的特殊效果如下：

　　.fadeIn() 淡入

　　.fadeOut() 淡出

　　.fadeTo() 调整透明度

　　.hide() 隐藏元素

　　.show() 显示元素

　　.slideDown() 向下展开

　　.slideUp() 向上卷起

　　.slideToggle() 依次展开或卷起某个元素

　　.toggle() 依次展示或隐藏某个元素

除了.show()和.hide()，所有其他特效的默认执行时间都是400ms（毫秒），但是你可以改变这个设置。

　　$('h1').fadeIn(300); // 300毫秒内淡入

　　$('h1').fadeOut('slow'); // 缓慢地淡出

在特效结束后，可以指定执行某个函数。

　　$('p').fadeOut(300, function() { $(this).remove(); });

更复杂的特效，可以用.animate()自定义。

　　$('div').animate(

　　　　{

　　　　　　left : "+=50", //不断右移

　　　　　　opacity : 0.25 //指定透明度

　　　　},

　　　　300, // 持续时间

　　　　function() { alert('done!'); } //回调函数

　　);

.stop()和.delay()用来停止或延缓特效的执行。

$.fx.off如果设置为true，则关闭所有网页特效。

（完）

jQuery最佳实践

上周，我整理了《jQuery设计思想》。

那篇文章是一篇入门教程，从设计思想的角度，讲解"怎么使用jQuery"。今天的文章则是更进一步，讲解"如何用好jQuery"。

我主要参考了Addy Osmani的PPT《提高jQuery性能的诀窍》（jQueryProven Performance Tips And Tricks）。他是jQuery开发团队的成员，具有一定的权威性，提出的结论都有测试数据支持，非常有价值。

==============================================

jQuery最佳实践

阮一峰 整理

1. 使用最新版本的jQuery

jQuery的版本更新很快，你应该总是使用最新的版本。因为新版本会改进性能，还有很多新功能。

下面就来看看，不同版本的jQuery性能差异有多大。这里是三条最常见的jQuery选择语句：

　　$('.elem')

　　$('.elem',context)

　　context.find('.elem')

我们用1.4.2、1.4.4、1.6.2三个版本的jQuery测试，看看浏览器在1秒内能够执行多少次。结果如下：

可以看到，1.6.2版本的运行次数，远远超过两个老版本。尤其是第一条语句，性能有数倍的提高。

其他语句的测试，比如.attr("value")和.val()，也是新版本的jQuery表现好于老版本。

2. 用对选择器

在jQuery中，你可以用多种选择器，选择同一个网页元素。每种选择器的性能是不一样的，你应该了解它们的性能差异。

（1）最快的选择器：id选择器和元素标签选择器

举例来说，下面的语句性能最佳：

　　$('#id')

　　$('form')

　　$('input')

遇到这些选择器的时候，jQuery内部会自动调用浏览器的原生方法（比如getElementById()），所以它们的执行速度快。

（2）较慢的选择器：class选择器

$('.className')的性能，取决于不同的浏览器。

Firefox、Safari、Chrome、Opera浏览器，都有原生方法getElementByClassName()，所以速度并不慢。但是，IE5-IE8都没有部署这个方法，所以这个选择器在IE中会相当慢。

（3）最慢的选择器：伪类选择器和属性选择器

先来看例子。找出网页中所有的隐藏元素，就要用到伪类选择器：

　　$(':hidden')

属性选择器的例子则是：

　　$('[attribute=value]')

这两种语句是最慢的，因为浏览器没有针对它们的原生方法。但是，一些浏览器的新版本，增加了querySelector()和querySelectorAll()方法，因此会使这类选择器的性能有大幅提高。

最后是不同选择器的性能比较图。

可以看到，ID选择器遥遥领先，然后是标签选择器，第三是Class选择器，其他选择器都非常慢。

3. 理解子元素和父元素的关系

下面六个选择器，都是从父元素中选择子元素。你知道哪个速度最快，哪个速度最慢吗？

　　$('.child',$parent)

　　$parent.find('.child')

　　$parent.children('.child')

　　$('#parent> .child')

　　$('#parent.child')

　　$('.child',$('#parent'))

我们一句句来看。

(1) $('.child', $parent)

这条语句的意思是，给定一个DOM对象，然后从中选择一个子元素。jQuery会自动把这条语句转成$.parent.find('child')，这会导致一定的性能损失。它比最快的形式慢了5%-10%。

(2) $parent.find('.child')

这条是最快的语句。.find()方法会调用浏览器的原生方法（getElementById，getElementByName，getElementByTagName等等），所以速度较快。

(3) $parent.children('.child')

这条语句在jQuery内部，会使用$.sibling()和javascript的nextSibling()方法，一个个遍历节点。它比最快的形式大约慢50%。

(4) $('#parent > .child')

jQuery内部使用Sizzle引擎，处理各种选择器。Sizzle引擎的选择顺序是从右到左，所以这条语句是先选.child，然后再一个个过滤出父元素#parent，这导致它比最快的形式大约慢70%。

(5) $('#parent .child')

这条语句与上一条是同样的情况。但是，上一条只选择直接的子元素，这一条可以于选择多级子元素，所以它的速度更慢，大概比最快的形式慢了77%。

(6) $('.child', $('#parent'))

jQuery内部会将这条语句转成$('#parent').find('.child')，比最快的形式慢了23%。

所以，最佳选择是$parent.find('.child')。而且，由于$parent往往在前面的操作已经生成，jQuery会进行缓存，所以进一步加快了执行速度。

具体的例子和比较结果，请看这里。

4. 不要过度使用jQuery

jQuery速度再快，也无法与原生的javascript方法相比。所以有原生方法可以使用的场合，尽量避免使用jQuery。

请看下面的例子，为a元素绑定一个处理点击事件的函数：

　　$('a').click(function(){

　　　　alert($(this).attr('id'));

　　});

这段代码的意思是，点击a元素后，弹出该元素的id属性。为了获取这个属性，必须连续两次调用jQuery，第一次是$(this)，第二次是attr('id')。

事实上，这种处理完全不必要。更正确的写法是，直接采用javascript原生方法，调用this.id：

　　$('a').click(function(){

　　　　alert(this.id);

　　});

根据测试，this.id的速度比$(this).attr('id')快了20多倍。

5. 做好缓存

选中某一个网页元素，是开销很大的步骤。所以，使用选择器的次数应该越少越好，并且尽可能缓存选中的结果，便于以后反复使用。

比如，下面这样的写法就是糟糕的写法：

　　jQuery('#top').find('p.classA');

　　jQuery('#top').find('p.classB');

更好的写法是：

　　var cached = jQuery('#top');

　　cached.find('p.classA');

　　cached.find('p.classB');

根据测试，缓存比不缓存，快了2-3倍。

6. 使用链式写法

jQuery的一大特点，就是允许使用链式写法。

　　$('div').find('h3').eq(2).html('Hello');

采用链式写法时，jQuery自动缓存每一步的结果，因此比非链式写法要快。根据测试，链式写法比（不使用缓存的）非链式写法，大约快了25%。

7. 事件的委托处理（Event Delegation）

javascript的事件模型，采用"冒泡"模式，也就是说，子元素的事件会逐级向上"冒泡"，成为父元素的事件。

利用这一点，可以大大简化事件的绑定。比如，有一个表格（table元素），里面有100个格子（td元素），现在要求在每个格子上面绑定一个点击事件（click），请问是否需要将下面的命令执行100次？

　　$("td").bind("click",function(){

　　　　$(this).toggleClass("click");

　　});

回答是不需要，我们只要把这个事件绑定在table元素上面就可以了，因为td元素发生点击事件之后，这个事件会"冒泡"到父元素table上面，从而被监听到。

因此，这个事件只需要在父元素绑定1次即可，而不需要在子元素上绑定100次，从而大大提高性能。这就叫事件的"委托处理"，也就是子元素"委托"父元素处理这个事件。

具体的写法有两种。第一种是采用.delegate()方法：

　　$("table").delegate("td","click", function(){

　　　　$(this).toggleClass("click");

　　});

第二种是采用.live()方法：

　　$("table").each(function(){

　　　　$("td",this).live("click", function(){

　　　　　　$(this).toggleClass("click");
　　　　});
　　});

这两种写法基本等价。唯一的区别在于，.delegate()是当事件冒泡到指定的父元素时触发，.live()则是当事件冒泡到文档的根元素后触发，因此.delegate()比.live()稍快一点。此外，这两种方法相比传统的.bind()方法还有一个好处，那就是对动态插入的元素也有效，.bind()只对已经存在的DOM元素有效，对动态插入的元素无效。

根据测试，委托处理比不委托处理，快了几十倍。在委托处理的情况下，.delegate()又比.live()大约快26%。

8. 少改动DOM结构

（1）改动DOM结构开销很大，因此不要频繁使用.append()、.insertBefore()和.insetAfter()这样的方法。

如果要插入多个元素，就先把它们合并，然后再一次性插入。根据测试，合并插入比不合并插入，快了将近10倍。

（2）如果你要对一个DOM元素进行大量处理，应该先用.detach()方法，把这个元素从DOM中取出来，处理完毕以后，再重新插回文档。根据测试，使用.detach()方法比不使用时，快了60%。

（3）如果你要在DOM元素上储存数据，不要写成下面这样：

　　varelem = $('#elem');

　　elem.data(key,value);

而要写成

　　varelem = $('#elem');

　　$.data(elem,key,value);

根据测试，后一种写法要比前一种写法，快了将近10倍。因为elem.data()方法是定义在jQuery函数的prototype对象上面的，而$.data()方法是定义jQuery函数上面的，调用的时候不从复杂的jQuery对象上调用，所以速度快得多。（此处可以参阅下面第10点。）

9. 正确处理循环

循环总是一种比较耗时的操作，如果可以使用复杂的选择器直接选中元素，就不要使用循环，去一个个辨认元素。

javascript原生循环方法for和while，要比jQuery的.each()方法快，应该优先使用原生方法。

10. 尽量少生成jQuery对象

每当你使用一次选择器（比如$('#id')），就会生成一个jQuery对象。jQuery对象是一个很庞大的对象，带有很多属性和方法，会占用不少资源。所以，尽量少生成jQuery对象。

举例来说，许多jQuery方法都有两个版本，一个是供jQuery对象使用的版本，另一个是供jQuery函数使用的版本。下面两个例子，都是取出一个元素的文本，使用的都是text()方法。你既可以使用针对jQuery对象的版本：

　　var $text = $("#text");

　　var$ts = $text.text();

也可以使用针对jQuery函数的版本：

　　var $text = $("#text");

　　var$ts = $.text($text);

由于后一种针对jQuery函数的版本不通过jQuery对象操作，所以相对开销较小，速度比较快。

（完）

jQuery的deferred对象详解

jQuery的开发速度很快，几乎每半年一个大版本，每两个月一个小版本。

每个版本都会引入一些新功能。今天我想介绍的，就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象。

这个功能很重要，未来将成为jQuery的核心方法，它彻底改变了如何在jQuery中使用ajax。为了实现它，jQuery的全部ajax代码都被改写了。

但是，它比较抽象，初学者很难掌握，网上的教程也不多。所以，我把自己的学习笔记整理出来了，希望对大家有用。

本文不是初级教程，针对的读者是那些已经具备jQuery使用经验的开发者。如果你想了解jQuery的基本用法，请阅读我编写的《jQuery设计思想》和《jQuery最佳实践》。

======================================

jQuery的deferred对象详解

作者：阮一峰

一、什么是deferred对象？

开发网站的过程中，我们经常遇到某些耗时很长的javascript操作。其中，既有异步的操作（比如ajax读取服务器数据），也有同步的操作（比如遍历一个大型数组），它们都不是立即能得到结果的。

通常的解决方法是，为它们指定回调函数（callback）。即事先规定，一旦它们运行结束，应该调用哪些函数。

但是，在回调函数方面，jQuery的功能非常弱。为了改变这一点，jQuery开发团队就设计了deferred对象。

简单说，deferred对象就是jQuery的回调函数解决方案。在英语中，defer的意思是"延迟"，所以deferred对象的含义就是"延迟"到未来某个点再执行。

它解决了如何处理耗时操作的问题，对那些操作提供了更好的控制，以及统一的编程接口。它的主要功能，可以归结为四点。下面我们通过示例代码，一步步来学习。

二、ajax操作的链式写法

jQuery的ajax操作，传统写法是这样的：

　　$.ajax({

　　　　url: "test.html",

　　　　success: function(){
　　　　　　alert("哈哈，成功了！");
　　　　},

　　　　error:function(){
　　　　　　alert("出错啦！");
　　　　}

　　});

（运行代码示例1）

在上面的代码中，$.ajax()接受一个对象参数，这个对象包含两个方法：success方法指定操作成功后的回调函数，error方法指定操作失败后的回调函数。

$.ajax()操作完成后，如果使用的是低于1.5.0版本的jQuery，返回的是XHR对象，你没法进行链式操作；如果高于1.5.0版本，返回的是deferred对象，可以进行链式操作。

现在，新的写法是这样的：

　　$.ajax("test.html")

　　.done(function(){alert("哈哈，成功了！"); })

　　.fail(function(){alert("出错啦！"); });

（运行代码示例2）

可以看到，done()相当于success方法，fail()相当于error方法。采用链式写法以后，代码的可读性大大提高。

三、指定同一操作的多个回调函数

deferred对象的一大好处，就是它允许你自由添加多个回调函数。

还是以上面的代码为例，如果ajax操作成功后，除了原来的回调函数，我还想再运行一个回调函数，怎么办？

很简单，直接把它加在后面就行了。

　　$.ajax("test.html")

　　.done(function(){ alert("哈哈，成功了！");})

　　.fail(function(){ alert("出错啦！");} )

　　.done(function(){alert("第二个回调函数！");} );

（运行代码示例3）

回调函数可以添加任意多个，它们按照添加顺序执行。

四、为多个操作指定回调函数

deferred对象的另一大好处，就是它允许你为多个事件指定一个回调函数，这是传统写法做不到的。

请看下面的代码，它用到了一个新的方法$.when()：

　　$.when($.ajax("test1.html"),$.ajax("test2.html"))

　　.done(function(){ alert("哈哈，成功了！");})

　　.fail(function(){ alert("出错啦！");});

（运行代码示例4）

这段代码的意思是，先执行两个操作$.ajax("test1.html")和$.ajax("test2.html")，如果成功了，就运行done()指定的回调函数；如果有一个失败或都失败了，就执行fail()指定的回调函数。

五、普通操作的回调函数接口（上）

deferred对象的最大优点，就是它把这一套回调函数接口，从ajax操作扩展到了所有操作。也就是说，任何一个操作----不管是ajax操作还是本地操作，也不管是异步操作还是同步操作----都可以使用deferred对象的各种方法，指定回调函数。

我们来看一个具体的例子。假定有一个很耗时的操作wait：

　　var wait = function(){

　　　　var tasks = function(){

　　　　　　alert("执行完毕！");

　　　　};

　　　　setTimeout(tasks,5000);

　　};

我们为它指定回调函数，应该怎么做呢？

很自然的，你会想到，可以使用$.when()：

　　$.when(wait())

　　.done(function(){ alert("哈哈，成功了！");})

　　.fail(function(){ alert("出错啦！");});

但是，有一个问题。$.when()的参数只能是deferred对象，所以必须对wait进行改写：

　　var dtd = $.Deferred(); // 新建一个deferred对象

　　var wait = function(dtd){

　　　　var tasks = function(){

　　　　　　alert("执行完毕！");

　　　　　　dtd.resolve(); // 改变deferred对象的执行状态

　　　　};

　　　　setTimeout(tasks,5000);

　　　　returndtd.promise();

　　};

这里有两个地方需要注意。

首先，最后一行不能直接返回dtd，必须返回dtd.promise()。原因是jQuery规定，任意一个deferred对象有三种执行状态----未完成，已完成和已失败。如果直接返回dtd，$.when()的默认执行状态为"已完成"，立即触发后面的done()方法，这就失去回调函数的作用了。dtd.promise()的目的，就是保证目前的执行状态----也就是"未完成"----不变，从而确保只有操作完成后，才会触发回调函数。

其次，当操作完成后，必须手动改变Deferred对象的执行状态，否则回调函数无法触发。dtd.resolve()的作用，就是将dtd的执行状态从"未完成"变成"已完成"，从而触发done()方法。

最后别忘了，修改完wait之后，调用的时候就必须直接传入dtd参数。

　　$.when(wait(dtd))

　　.done(function(){ alert("哈哈，成功了！");})

　　.fail(function(){ alert("出错啦！");});

（运行代码示例5）

六、普通操作的回调函数接口（中）

除了使用$.when()为普通操作添加回调函数，还可以使用deferred对象的建构函数$.Deferred()。

这时，wait函数还是保持不变，我们直接把它传入$.Deferred()：

　　$.Deferred(wait)

　　.done(function(){ alert("哈哈，成功了！");})

　　.fail(function(){ alert("出错啦！");});

（运行代码示例6）

jQuery规定，$.Deferred()可以接受一个函数作为参数，该函数将在$.Deferred()返回结果之前执行。并且，$.Deferred()所生成的Deferred对象将作为这个函数的默认参数。

七、普通操作的回调函数接口（下）

除了上面两种方法以外，我们还可以直接在wait对象上部署deferred接口。

　　var dtd = $.Deferred(); // 生成Deferred对象

　　var wait = function(dtd){

　　　　var tasks = function(){

　　　　　　alert("执行完毕！");

　　　　　　dtd.resolve(); // 改变Deferred对象的执行状态

　　　　};

　　　　setTimeout(tasks,5000);

　　};

　　dtd.promise(wait);

　　wait.done(function(){ alert("哈哈，成功了！");})

　　.fail(function(){ alert("出错啦！");});

　　wait(dtd);

（运行代码示例7）

这里的关键是dtd.promise(wait)这一行，它的作用就是在wait对象上部署Deferred接口。正是因为有了这一行，后面才能直接在wait上面调用done()和fail()。

八、小结：deferred对象的方法

前面已经讲到了deferred对象的多种方法，下面做一个总结：

　　（1） $.Deferred() 生成一个deferred对象。

　　（2） deferred.done() 指定操作成功时的回调函数

　　（3） deferred.fail() 指定操作失败时的回调函数

　　（4） deferred.promise() 没有参数时，作用为保持deferred对象的运行状态不变；接受参数时，作用为在参数对象上部署deferred接口。

　　（5） deferred.resolve() 手动改变deferred对象的运行状态为"已完成"，从而立即触发done()方法。

　　（6） $.when() 为多个操作指定回调函数。

除了这些方法以外，deferred对象还有三个重要方法，上面的教程中没有涉及到。

　　（7）deferred.then()

有时为了省事，可以把done()和fail()合在一起写，这就是then()方法。

　　$.when($.ajax( "/main.php" ))

　　.then(successFunc,failureFunc );

如果then()有两个参数，那么第一个参数是done()方法的回调函数，第二个参数是fail()方法的回调方法。如果then()只有一个参数，那么等同于done()。

　　（8）deferred.reject()

这个方法与deferred.resolve()正好相反，调用后将deferred对象的运行状态变为"已失败"，从而立即触发fail()方法。

　　（9）deferred.always()

这个方法也是用来指定回调函数的，它的作用是，不管调用的是deferred.resolve()还是deferred.reject()，最后总是执行。

　　$.ajax( "test.html" )

　　.always( function() { alert("已执行！");});

（完）