類與繼承在javascript的出現，說明javascript已經達到大規模開發的門檻了，在之前是ECMAScript4,就試圖引入類，模組等東西，但由於過分引入太多的特性，搞得javascript烏煙瘴氣，導致被否決。不過只是把類別延時到ES6.到目前為止，javascript還沒有正真意義上的類別。不過我們可以模擬類，曾近一段時間，類工廠是框架的標配，本章會介紹各種類實現，方便大家在自己的框架中或選擇時自己喜歡的那一類風格。
1.javascript對類別的支援
在其它語言中 ，類別的實例都要透過建構子new出來。作為一個刻意模仿java的語言。 javascript存在new操作符，所有函數都可以作為建構器。構造函數與普通的方法沒有什麼不同。瀏覽器為了建構它繁花似錦的生態圈，例如Node,Element,HTMLElement，HTMLParagraphElement，顯然使用繼承關係方便一些方法或屬性的共享，於是javascript從其它語言借鑒了原型這種機制。 Prototype作為一個特殊的物件屬性存在於每一個函數上。當一個函數透過new操作符new出其“孩子”——“實例”，這個名為實例的物件就擁有這個函數的Prototype物件所有的一切成員，從而實現實現所有實例物件都共用一組方法或屬性。而javascript所謂的「類別」就是透過修改這個Prototype對象，以區別原生對象及其其它定義的「類別」。在瀏覽器中，node這個類別是基於Object修改而來的，而Element則是基於Node，而HTMLElement又基於Element....相對我們的工作業務，我們可以創建自己的類別來實現重用與共享。
function A(){
}
A.prototype = {
aa:"aa",
method:function(){
}
};
var a = new A;
var b = new A;
console.log(a.aa === b.aa);
console.log(a.method === b.method)
一般地，我們把定義在原型上的方法叫原型方法，它為所有的實例所共享，這有好也有不好，為了實現差異化，javascript允許我們直接在構造器內指定其方法，這叫特權方法。如果是屬性，就叫特權屬性。它們每一個實例一個副本，各不影響。因此，我們通常把共享用於操作資料的方法放在原型，把私有的屬性放在特權屬性中。但放於this上，還是讓人任意訪問到，那就放在函數體內的作用域內吧。這時它就成為名副其實的私有屬性。
function A() {
var count = 0;
this.aa = "aa";
this.method = function() {
return count;
}
this.obj = {}
}
A.prototype = {
aa:"aa",
method:function(){
}
};
var a = new A;
var b = new A;
console.log(a.aa === b.aa);//true 由于aa的值为基本类型，比较值
console.log(a.obj === b.obj) //false 引用类型，每次进入函数体都要重新创建，因此都不一样。
console.log(a.method === b.method); //false
特權方法或屬性只是只是遮住原型的方法或屬性，因此只要刪掉特權方法，就能方法到同名的原型方法或屬性。
delete a.method; delete b.method; console.log(a.method === A.prototype.method);//true console.log(a.method === b.method); //true
用java的語言來說，原型方法與特權方法都屬性實例方法，在java中還有一種叫類別方法與類別屬性的東西。它們用javascript來模擬也非常簡單，直接定義在函數上就行了。
A.method2 = function(){} //类方法
var c = new A;
console.log(c.method2); //undefined
接下來，我們看下繼承的實現，上面說過，Prototype上有什麼東西，它的實例就有什麼東西，不論這個屬性是後來添加的，還是整個Prototype都置換上去的。如果我們將這個prototype物件置換為另一個類別的原型，那麼它就輕而易舉的獲得那個類別的所有原型成員。
function A() {};
A.prototype = {
aaa : 1
}
function B() {};
B.prototype = A.prototype;
var b = new B;
console.log(b.aaa); //=> 1;
A.prototype.bb = 2;
console.log(b.bb) //=> 2;
由於是引用著同一個對象，這意味這，我們修改A類的原型，也等同於修該了B類的原型。因此，我們不能把一個物件賦值給兩個類別。這有兩種辦法，
方法1：透過for in 把父類別的原型成員逐一賦給子類別的原型
方法2是：子類別的原型不是直接由父類別獲得，先將父類別的原型賦值給一個函數，然後將這個函數的實例當作子類別的原型。
方法一，我們通常要實作mixin這樣的方法，有的書稱之為拷貝繼承，好處就是簡單直接，壞處就是無法透過instanceof驗證。 Prototype.js的extend方法就用來做這事。
function extend (des, source) { //des = destination
for (var property in source)
des[property] = source[property];
return des;
}
方法二，就在原型上動腦筋，因此稱之為原型繼承。下面是範本
function A() {};
A.prototype = {
aa:function(){
alert(1)
}
}
function bridge() {
};
bridge.prototype = A.prototype;
function B() {}
B.prototype = new bridge();
var a = new A;
var b = new B;
console.log(a == b) //false 证明成功分开原型
console.log(A.prototype == B.prototype) //true 子类共享父类的原型方法
console.log(a.aa === b.aa); //为父类动态添加新的方法
A.prototype.bb = function () {
alert(2)
}
//true，继承父类的方法
B.prototype.cc = function (){
alert(3)
}
//false 父类未必有子类的new实例
console.log(a.cc === b.cc)
//并且它能够正常通过javascript自带的验证机制instanceof
console.log(b instanceof A) ;//true
console.log(b instanceof B) ; //true
方法二能透過instanceof驗證，es5就內建了這種方法來實現原型繼承，它就是Object.create,如果不考慮第二個參數，它約等於下面的程式碼。
Object.create = function (o) {
function F() {}
F.prototype = o;
return new F();
}
上面的方法，要求傳入一個父類別的原型作為參數，然後回傳子類別的原型
不過，我們這樣還是遺漏了一點東西──子類別不只是繼承父類別的遺產，還應該有自己的東西，此外，原型繼承並沒有讓子類別繼承父類別的成員與特權成員。這些我們都得手動添加，如類別成員，我們可以透過上面的extend方法，特權成員我們可以在子類別構造器中，透過apply實現。
function inherit(init, Parent, proto){
function Son(){
Parent.apply(this, argument); //先继承父类的特权成员
init.apply(this, argument); //在执行自己的构造器
}
}
//由于Object.create是我们伪造的，因此避免使用第二个参数
Son.prototype = Object.create(Parent.prototype,{});
Son.prototype.toString = Parent.prototype.toString; //处理IEbug
Son.prototype.valueOf = Parent.prototype.valueOf; //处理IEbug
Son.prototype.constructor = Son; //确保构造器正常指向，而不是Object
extend(Son, proto) ;//添加子类的特有的原型成员
return Son;
下面，做一组实验，测试下实例的回溯机制。当我们访问对象的一个属性，那么他先寻找其特权成员，如果有同名就返回，没有就找原型，再没有，就找父类的原型...我们尝试将它的原型临时修改下，看它的属性会变成那个。
function A(){
}
A.prototype = {
aa:1
}
var a = new A;
console.log(a.aa) ; //=>1
//将它的所有原型都替换掉
A.prototype = {
aa:2
}
console.log(a.aa); //=>1
//于是我们想到每个实例都有一个constructor方法，指向其构造器
//而构造器上面正好有我们的原型，javascript引擎是不是通过该路线回溯属性呢
function B(){
}
B.prototype = {
aa:3
}
a.constructor = B;
console.log(a.aa) //1 表示不受影响
因此类的实例肯定通过另一条通道进行回溯，翻看ecma规范可知每一个对象都有一个内部属性[[prototype]],它保存这我们new它时的构造器所引用的Prototype对象。在标准浏览器与IE11里，它暴露了一个叫__proto__属性来访问它。因此，只要不动__proto__上面的代码怎么动，a.aa始终坚定不毅的返回1.
再看一下，new时操作发生了什么。
1.创建了一个空对象 instance
2.instance.__proto__ = intanceClass.prototype
3.将构造函数里面的this = instance
4.执行构造函数里的代码
5.判定有没有返回值，没有返回值就返回默认值为undefined,如果返回值为复合数据类型，则直接返回，否则返回this
于是有了下面的结果。
function A(){
console.log(this.__proto__.aa); //1
this.aa = 2
}
A.prototype = {aa:1}
var a = new A;
console.log(a.aa)
a.__proto__ = {
aa:3
}
console.log(a.aa) //=>2
delete a. aa; //删除特权属性，暴露原型链上的同名属性
console.log(a.aa) //=>3
有了__proto__，我们可以将原型设计继承设计得更简单，我们还是拿上面的例子改一改，进行试验
function A() {}
A.prototype = {
aa:1
}
function bridge() {}
bridge.prototype = A.prototype;
function B(){}
B.prototype = new bridge();
B.prototype.constructor = B;
var b = new B;
B.prototype.cc = function(){
alert(3)
}
//String.prototype === new String().__proto__ => true
console.log(B.prototype.__proto__ === A.prototype) //true
console.log(b.__proto__ == B.prototype); //true
console.log(b.__proto__.__proto__ === A.prototype); //true 得到父类的原型对象
因为b.__proto__.constructor为B，而B的原型是从bridge中得来的，而bride.prototype = A.prototype,反过来，我们在定义时，B.prototype.__proto__ = A.prototype,就能轻松实现两个类的继承.
__proto__属性已经加入es6,因此可以通过防止大胆的使用
2.各种类工厂的实现。
上节我们演示了各种继承方式的实现，但都很凌乱。我们希望提供一个专门的方法，只要用户传入相应的参数，或按照一定简单格式就能创建一个类。特别是子类。
由于主流框架的类工厂太依赖他们庞杂的工具函数，而一个精巧的类工厂也不过百行左右
相当精巧的库，P.js
使用版：https://github.com/jiayi2/factoryjs
这是一个相当精巧的库，尤其调用父类的同名方法时，它直接将父类的原型抛在你面前，连_super也省了。
var P = (function(prototype, ownProperty, undefined) {
return function P(_superclass /* = Object */, definition) {
// handle the case where no superclass is given
if (definition === undefined) {
definition = _superclass;
_superclass = Object;
}
// C is the class to be returned.
//
// When called, creates and initializes an instance of C, unless
// `this` is already an instance of C, then just initializes `this`;
// either way, returns the instance of C that was initialized.
//
// TODO: the Chrome inspector shows all created objects as `C`
// rather than `Object`. Setting the .name property seems to
// have no effect. Is there a way to override this behavior?
function C() {
var self = this instanceof C ? this : new Bare;
self.init.apply(self, arguments);
return self;
}
// C.Bare is a class with a noop constructor. Its prototype will be
// the same as C, so that instances of C.Bare are instances of C.
// `new MyClass.Bare` then creates new instances of C without
// calling .init().
function Bare() {}
C.Bare = Bare;
// Extend the prototype chain: first use Bare to create an
// uninitialized instance of the superclass, then set up Bare
// to create instances of this class.
var _super = Bare[prototype] = _superclass[prototype];
var proto = Bare[prototype] = C[prototype] = C.p = new Bare;
// pre-declaring the iteration variable for the loop below to save
// a `var` keyword after minification
var key;
// set the constructor property on the prototype, for convenience
proto.constructor = C;
C.extend = function(def) { return P(C, def); }
return (C.open = function(def) {
if (typeof def === 'function') {
// call the defining function with all the arguments you need
// extensions captures the return value.
def = def.call(C, proto, _super, C, _superclass);
}
// ...and extend it
if (typeof def === 'object') {
for (key in def) {
if (ownProperty.call(def, key)) {
proto[key] = def[key];
}
}
}
// if no init, assume we're inheriting from a non-Pjs class, so
// default to using the superclass constructor.
if (!('init' in proto)) proto.init = _superclass;
return C;
})(definition);
}
// as a minifier optimization, we've closured in a few helper functions
// and the string 'prototype' (C[p] is much shorter than C.prototype)
})('prototype', ({}).hasOwnProperty);
我们尝试创建一个类：
var Dog = P (function(proto, superProto){
proto.init = function(name) { //构造函数
this.name = name;
}
proto.move = function(meters){ //原型方法
console.log(this.name + " moved " + meters + " m.")
}
});
var a = new Dog("aaa")
var b = new Dog("bbb"); //无实例变化
a.move(1);
b.move(2);
我们在现在的情况下，可以尝试创建更简洁的定义方式
var Animal = P (function(proto, superProto){
proto.init = function(name) { //构造函数
this.name = name;
}
proto.move = function(meters){ //原型方法
console.log(this.name + " moved " + meters + " m.")
}
});
var a = new Animal("aaa")
var b = new Animal("bbb"); //无实例变化
a.move(1);
b.move(2);
//...............
var Snake = P (Animal, function(snake, animal){
snake.init = function(name, eyes){
animal.init.call(this, arguments); //调运父类构造器
this.eyes = 2;
}
snake.move = function() {
console.log('slithering...');
animal.move.call(this, 5); //调运父类同名方法
}
});
var s = new Snake("snake", 1);
s.move();
console.log(s.name);
console.log(s.eyes);
私有属性演示，由于放在函数体内集中定义，因此安全可靠！
var Cobra = P (Snake, function(cobra){
var age = 1;//私有属性
//这里还可以编写私有方法
cobra.glow = function(){ //长大
return age++;
}
});
var c = new Cobra("cobra");
console.log(c.glow()); //1
console.log(c.glow()); //2
console.log(c.glow()); //3
以上所述就是本文的全部内容了，希望大家能够喜欢。
