1. 为什么要面向对象
如果你只是要用javascript做个用户名校验，那么基于事件驱动的面向过程的编程方法已经足够了，再复杂一点，如果是一个有十几个字段的表单校验，或者你个滑动banner，用上面的方法也还可以；但是如果你要搞一个类似Gmail的东西，哪怕只有其功能的十分之一的的复杂前端应用，面向对象也是必须的了。否则，代码的复杂度将是难以想象的，即使勉强开发完成了，以后的维护也将是个噩梦。
本文将主要介绍javascript对象、类和继承的基础知识，最后讲述了使用“this”的一些经验。
2. 关于javascript对象
1). js对象，即为一组属性和方法的集合，可以动态的添加或删除属性/方法
ex：
//通过对象直接量创建对象
var o = {a:123, b:'abc', f:function(){...}};
//添加属性
o.c = [1,2,3];
//添加方法
o.g = function(){...};
//删除属性/方法
delete o.a;
oc = undefinde; |
以上，通过“.”访问的属性/方法，均可以通过‘[]’访问
比如我们可以这么调用jquery对象的hide()方法：
$(‘#xxx’)[‘hide’]();
我们甚至可以这么使用：
var xh = $(‘#xxx’)[‘hide’];
然后将xh作为参数传给其他方法，然后再需要的时候使用 xh() 来执行这个方法
2). 获取对象的类型
typeof
任何对象使用typeof操作符返回均是“object”（Date和数组的typeof也是“object”）
那么我们如何知道对象的类型哪？
constructor属性
每一个对象都有一个constructor属性用类记录当前对象的构造函数
ex：
var a = [];
var b = typeof a; //b = "object"
var c = a.constructor === Array; //true 注意，这里的Array不是字符串 |
instanceof操作符
每个对象都会有一个内部的属性_proto_，这个属性对js开发人员不可见，只在虚拟机内部使用。每当创建一个对象的时候，这个对象的_proto_就会被赋值为这个对象的构造函数的prototype，这样对象的_proto_属性和构造函数的prototype引用相同的对象，并且一旦对象创建完成，_proto_属性就不会改变。 这样通过对象的_proto_属性，以及_proto_所引用的对象的_proto_属性，就构成了一个_proto_链，及鼎鼎大名的“原型链”。
如：o instanceof c;
在上面的语句执行过程中，虚拟机会把c.prototype和o的_proto_链上的节点逐个进行比较，如果找到相等的节点，则返回true，否则返回false。
ex:
var o = new C();//假设C继承自A
o instanceof C;//true
a instanceof A;//true
a instanceof Object;//true |
3). 对象的属性
每当javascript读取某个对象的某个属性时，都会执行一次搜索，目标是具有给定名字的属性。搜索首先从对象实例本身开始。如果在实例中找到了具有给定名字的属性，则返回该属性的值；如果没有找到，则继续搜索指针指向类原型的prototype属性，在prototype中查找具有给定名字的属性。如果在prototype中找到了这个属性，则返回该属性的值。虽然可以通过对象实例读取保存在原型中的值，但却不能通过对象实例重写prototype中的值。如果在实例中添加一个与prototype中属性同名的属性，则该属性会屏蔽原型中的那个属性。添加的同名属性只会阻止我们访问原型中的那个属性，但不会修改那个属性。即使将这个属性设置为null，也只会在实例中设置这个属性，而不会恢复其指向prototype的链接。不过，使用delete操作符则可以完全删除实例属性，从而让我们可以重新重新访问prototype中的属性。
3. 类
JavaScritpt没有专门的Class机制，但是我们可以function传创建构造函数，继而通过构造函数创建对象
ex1：
function O1(){
//添加属性
this.a = 123;
//添加方法
this.f1 = function(){
...
};
}
var ot = new O1();
alert(ot.a);//123 |
这里，我们就得到了O1的构造函数，另外，我们也可以利用prototype扩展类属性和方法
ex2：
function O2(){
}
O2.prototype.a = 1234;
O2.prototype.f1 = function(){
alert(this.a);
};
var ot = new O2();
ot.f1();//1234 |
前面已经提到，prototype是类原型的属性对象，O2的实例化对象ot，在访问ot.f1是，会首先从ot的属性查找f1的定义，如果找不到，就会到O2的prototype内查找。
在实际使用效果上，ex1和ex2基本是相同的，它们的区别是：每new一个O1，就同时创建一份属性和方法，内存中就会多一份O1的属性和方法；而通过prototype扩展的O2的属性和方法，无论O2被实例化几次，在内存中只会有一份，所以，我们推荐使用ex2.的方法来创建类。
但是，通过ex2.的方法创建类，代码有些散，另外，通常，我们希望某些类属性是在各个实现里是不同的
ex3：
function O3(){
this.a = 234;
}
O3.prototype = {
f1 : function(){
alert(this.a);
},
//使用这种方式完全覆盖了prototype，对象的constructor属性会变成Object，这一步，是将其修改为O3
constructor : O3
};
var ot = new O3();
ot.f1();//234 |
通过ex3.定义的类，在类方法里面通过this参数访问类属性/方法，但这些属性在类方法的外面，通过ot.xx都可以访问，那么，如何来定义私有变量和方法哪？
另外，这种ex3.的定义方式，构造函数和prototype仍然被分成了两部分，还可以进一步优化吗？
ex4：
var O4 = function(){
//构造函数
funciton O(){
//public
this.a = 567;
}
//private
var b = 234;
function pf(){
return b;
}
//public
O.prototype = {
f1 : function(){
alert(b);
},
f2 : function(){
return b;
},
constructor : O4
};
//返回类O给变量O4
return O;
}();//定义一个立即执行的方法
var ot = new O4();
ot.f1();//234 |
到这里，就和java书写class的方式差不多了吧，让我们来总结一下：
a. 在构造函数中添加类属性，在prototype添加类方法
b. 将类代码放在一个立即执行的function中，形成一个单独的命名空间，只对完暴露构造函数，可以在里面模拟private的属性和方法
c. 记得重新定义prototype.constructor，否则用到的时候可能会出错（其实大部分时候用不着它）
此外，我们还可以通过下面这种方式书写prototype来封装私有属性和方法
ex5：
var O5 = function(){
//构造函数
funciton O(){
//public
this.a = 567;
}
//通过立即执行的function返回prototype对象
O.prototype = function(){
//属性和方法
var b = 234;
var c = 2345;
function f1(){
//...
}
function f2(){
//...
}
//通过return返回给prototype便是public，其他的private
return {
c : c,
f1 : f1
}
}();
return O;
}(); |
如本节刚开时所述，“ JavaScritpt没有专门的Class机制”，我们只能使用构造函数和原型链来模拟类的实现，有众多的方法可以写出一个类，我们需要根据实际的需要来确定类的写法。
~~~未完待续
关于本站