Javascipt語法不支持"類"（class）[es6已經(jīng)支持]，但是有模擬類的方法。今天我主要談談Javascipt中模擬“類”的方法及js中繼承的總結和回顧。

js中實現(xiàn)“類”與繼承，既是重點，又是難點。很多同學可能都對js中“類”與繼承都有所了解，但是深入剖析的時候，感覺力不從心、模棱兩可。

我們先來總結一下js定義“類”的幾種方法：

方法一：構造函數(shù)法

這個方法是比較經(jīng)典的方法，我們會經(jīng)常見到。生成實例的時候，使用new關鍵字。類的屬性和方法，還可以定義在構造函數(shù)的prototype對象之上。

function Person(name,age,job){

 this.name=name;

 this.age=age;

 this.job=job;

}

Person.prototype.sayName=function(){

 alert(this.name);

}

var person1 = new Person("張三","29","web frontpage manager");

var person2 = new Person("李四","22","doctor");

person1.sayName(); //彈出"張三"

console.log(person2.name)//輸出“李四”

方法二：Object.create()法

方法Object.creat()作為new操作符的替代方案是ES5之后才出來的。用這個方法，"類"就是一個對象，不是函數(shù)。

var myMammal = {

 name : 'Herb the Mammal',

 get_name : function () {

 return this.name;

 },

 says : function () {

 return this.saying || '';

 }

}

var myCat = Object.create(myMammal);

myCat.name = 'Henrietta';

myCat.saying = 'meow';

myCat.get_name = function () {

 console.log(this.says + ' ' + this.name + this.says);

}

myCat.get_name();

輸出：

function () {

 return this.saying || '';

 } Henriettafunction () {

 return this.saying || '';

 }

目前，各大瀏覽器的最新版本（包括IE9）都部署了這個方法。如果遇到老式瀏覽器，可以用下面的代碼自行部署。

if (!Object.create) {

　　Object.create = function (o) {

　　　　 function F() {}

　　　　F.prototype = o;

　　　　return new F();

　　};

}

方法三：極簡主義法

封裝

這種方法不使用this和prototype，代碼部署起來非常簡單。 首先，它也是用一個對象模擬"類"。在這個類里面，定義一個構造函數(shù)creatFn()，用來生成實例。

var Dog= {

　　creatFn: function(){

　　　　// some code here

　　}

};

然后，在creatFn()里面，定義一個實例對象，把這個實例對象作為返回值。

var Dog= {

　　creatFn: function(){

　　　　var dog= {};

　　　　dog.name = "狗狗";

　　　　dog.makeSound = function(){ alert("汪汪汪"); };

　　　　return dog;

　　}

};

使用的時候，調用creatFn()方法，就可以得到實例對象。

var dog1 = Dog.creatFn();

dog1.makeSound(); // 汪汪汪

這種方法的好處是，容易理解，結構清晰優(yōu)雅，符合傳統(tǒng)的"面向對象編程"的構造，因此可以方便地部署下面的特性。

繼承

讓一個類繼承另一個類，實現(xiàn)起來很方便。只要在前者的creatFn()方法中，調用后者的creatFn()方法即可。 先定義一個Animal類。

var Animal = {

　　creatFn: function(){

　　　　var animal = {};

　　　　animal.eat= function(){ alert("吃飯飯"); };

　　　　return animal;

　　}

};

然后，在Dog的creatFn()方法中，調用Animal的creatFn()方法。

var Dog= {

　　creatFn: function(){

　　　　var dog= Animal.creatFn();

　　　　dog.name = "狗狗";

　　　　dog.makeSound = function(){ alert("汪汪汪"); };

　　　　return dog;

　　}

};

這樣得到的Dog實例，就會同時繼承Dog類和Animal類。

var dog1= Dog.creatFn();

dog1.eat(); // 吃飯飯

私有屬性和私有方法

在creatFn()方法中，只要不是定義在dog對象上的方法和屬性，都是私有的。

var Dog= {

　　creatFn: function(){

　　　　var dog= {};

　　　　var sound = "汪汪汪";

　　　　dog.makeSound = function(){ alert(sound); };

　　　　return dog;

　　}

};

上例的內部變量sound，外部無法讀取，只有通過dog的公有方法makeSound()來讀取。

var dog1 = Dog.creatFn();

alert(dog1.sound); // undefined

數(shù)據(jù)共享

有時候，我們需要所有實例對象，能夠讀寫同一項內部數(shù)據(jù)。這個時候，只要把這個內部數(shù)據(jù)，封裝在類對象的里面、creatFn()方法的外面即可。

var Dog= {

　　sound : "汪汪汪",

　　creatFn: function(){

　　　　var dog= {};

　　　　dog.makeSound = function(){ alert(Dog.sound); };

　　　　dog.changeSound = function(x){ Dog.sound = x; };

　　　　return dog;

　　}

};

然后，生成兩個實例對象：

var dog1 = Dog.creatFn();

var dog2 = Dog.creatFn();

dog1.makeSound(); // 汪汪汪

這時，如果有一個實例對象，修改了共享的數(shù)據(jù)，另一個實例對象也會受到影響。

dog2.changeSound("嗚嗚嗚");

dog1.makeSound(); //嗚嗚嗚

js繼承

關于繼承，網(wǎng)上也有很多資料可以查詢，但是很多朋友對其理解的不夠深入。講到繼承，假如你不去查資料，猛地一下，可能說不出個所以然來。這就說明我們的基礎知識打的不夠扎實。沒有理解透徹。今天，我站在前輩的基礎之上，再來和大家一起回顧一下這個 繼承。

繼承最常用的兩種方式如下：

原型鏈繼承（對象間的繼承）

類式繼承（構造函數(shù)間的繼承）

原型鏈繼承

什么是原型鏈繼承？這里我就不說什么定義了。其實就是用prototype繼承父級。

舉個例子：

function Parent(){

 this.name = 'mike';

} 

function Child(){

 this.age = 12;

}

Child.prototype = new Parent();//Child繼承Parent，通過原型，形成鏈條

var test = new Child();

alert(test.age);

alert(test.name);//得到被繼承的屬性

//繼續(xù)原型鏈繼承

function Brother(){ //brother構造

 this.weight = 60;

}

Brother.prototype = new Child();//繼續(xù)原型鏈繼承

var brother = new Brother();

alert(brother.name);//繼承了Parent和Child,彈出mike

alert(brother.age);//彈出12

上面例子，通過原型，形成鏈條，Child繼承了Parent，Brother有繼承了Child，最后brother既有Child和Parent的屬性，又有自己的屬性。這就是原形鏈的繼承。

類式繼承（借用構造函數(shù)）

類式繼承一般是通過運用call或者apply 進行子類型構造函數(shù)的內部調用超類型的構造函數(shù)。舉個例子：

function Parent(age){

 this.name = ['mike','jack','smith'];

 this.age = age;

}

function Child(age){

 Parent.call(this,age);

}

var test = new Child(21);

alert(test.age);//21

alert(test.name);//mike,jack,smith

test.name.push('bill');

alert(test.name);//mike,jack,smith,bill

上面的兩種繼承是最基本的兩種繼承方式。

此外還有一些繼承方式，我們一起來看一下！

組合繼承

組合繼承通常是上面兩種繼承方式組合在一起使用的繼承方式。

舉例如下：

function Parent(age){

 this.name = ['mike','jack','smith'];

 this.age = age;

}

Parent.prototype.run = function () {

 return this.name + ' are both' + this.age;

};

function Child(age){

 Parent.call(this,age);//對象冒充，給超類型傳參

}

Child.prototype = new Parent();//原型鏈繼承

var test = new Child(21);//寫new Parent(21)也行

alert(test.run());//mike,jack,smith are both21

原型式繼承

和上面講的原形鏈式繼承只有一字之差，但是不是同一個內容。我們所說的原型式繼承，就是我們上節(jié)課所講的，通過Object.create()方式來創(chuàng)建新的類。因為這種方式老式瀏覽器不支持。因此，假如我們不用Object.create()，也可以有替代法，方式如下：

function obj(o){

function F(){}

F.prototype = o;

return new F();

}

這個函數(shù)，就實現(xiàn)了我們Object.create()創(chuàng)建類的方式！

因此舉例如下：

function obj(o){

 function F(){}

 F.prototype = o;

 return new F();

 }

var box = {

 name : 'trigkit4',

 arr : ['brother','sister','baba']

};

var b1 = obj(box);

alert(b1.name);//trigkit4

b1.name = 'mike';

alert(b1.name);//mike

alert(b1.arr);//brother,sister,baba

b1.arr.push('parents');

alert(b1.arr);//brother,sister,baba,parents

var b2 = obj(box);

alert(b2.name);//trigkit4

alert(b2.arr);//brother,sister,baba,parents

寄生式繼承

舉例如下：

function creatAnother(original){

 var clone=new Object(original);

 clone.sayHi=function(){

 alert("hi")

 };

 return clone;

}

var person={

 name:"haorooms",

 friends:["hao123","zhansan","lisi"]

}

var antherPerson=creatAnother(person);

antherPerson.sayHi();//hi

寄生組合式

function inheritPrototype (subType,superType) {

 var prototype = Object.creat(superType.prototype);

 prototype.constructor = subType;

 subType.prototype = prototype;

};

function SuperType (name) {

 this.name = name;

 this.colors = ['red', 'blue', 'green'];

}

SuperType.prototype.sayName = function () {

 console.log(this.name);

}

function SubType(name, age) {

 //繼承屬性

 SuperType.call(this,name);

 this.age = age;

}

//繼承方法

inheritPrototype(SubType,SuperType);

SubType.prototype.sayAge = function () {

 console.log(this.age);

}

var instance = new SubType();

類的繼承，基本上就是如上幾種方式。下面再簡單的說一下ES6的class類吧！

es6實現(xiàn)類

//定義類

class Point {

 constructor(x, y) {

 this.x = x;

 this.y = y;

 }

 toString() {

 return '('+this.x+', '+this.y+')';

 }

}

var point = new Point(2, 3);

point.toString() // (2, 3)

point.hasOwnProperty('x') // true

point.hasOwnProperty('y') // true

point.hasOwnProperty('toString') // false

point.__proto__.hasOwnProperty('toString') // true

Class的繼承

class ColorPoint extends Point {

 constructor(x, y, color) {

 super(x, y); // 調用父類的constructor(x, y)

 this.color = color;

 } 

 toString() {

 return this.color + ' ' + super.toString(); // 調用父類的toString()

 }

}