Javascipt語法不支持"類"（class）[es6已經支持]，但是有模擬類的方法。今天我主要談談Javascipt中模擬“類”的方法及js中繼承的總結和回顧。
js中實現“類”與繼承，既是重點，又是難點。很多同學可能都對js中“類”與繼承都有所了解，但是深入剖析的時候，感覺力不從心、模棱兩可。
我們先來總結一下js定義“類”的幾種方法：
方法一：構造函數法
這個方法是比較經典的方法，我們會經常見到。生成實例的時候，使用new關鍵字。類的屬性和方法，還可以定義在構造函數的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之后才出來的。用這個方法，"類"就是一個對象，不是函數。
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，代碼部署起來非常簡單。 首先，它也是用一個對象模擬"類"。在這個類里面，定義一個構造函數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(); // 汪汪汪
這種方法的好處是，容易理解，結構清晰優雅，符合傳統的"面向對象編程"的構造，因此可以方便地部署下面的特性。
繼承
讓一個類繼承另一個類，實現起來很方便。只要在前者的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
數據共享
有時候，我們需要所有實例對象，能夠讀寫同一項內部數據。這個時候，只要把這個內部數據，封裝在類對象的里面、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(); // 汪汪汪
這時，如果有一個實例對象，修改了共享的數據，另一個實例對象也會受到影響。
dog2.changeSound("嗚嗚嗚"); dog1.makeSound(); //嗚嗚嗚js繼承
關于繼承，網上也有很多資料可以查詢，但是很多朋友對其理解的不夠深入。講到繼承，假如你不去查資料，猛地一下，可能說不出個所以然來。這就說明我們的基礎知識打的不夠扎實。沒有理解透徹。今天，我站在前輩的基礎之上，再來和大家一起回顧一下這個 繼承。
繼承最常用的兩種方式如下：
原型鏈繼承
什么是原型鏈繼承？這里我就不說什么定義了。其實就是用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);//得到被繼承的屬性//繼續原型鏈繼承function Brother(){ //brother構造 this.weight = 60;}Brother.prototype = new Child();//繼續原型鏈繼承var brother = new Brother();alert(brother.name);//繼承了Parent和Child,彈出mikealert(brother.age);//彈出12上面例子，通過原型，形成鏈條，Child繼承了Parent，Brother有繼承了Child，最后brother既有Child和Parent的屬性，又有自己的屬性。這就是原形鏈的繼承。
類式繼承（借用構造函數）
類式繼承一般是通過運用call或者apply 進行子類型構造函數的內部調用超類型的構造函數。舉個例子：
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);//21alert(test.name);//mike,jack,smithtest.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原型式繼承
和上面講的原形鏈式繼承只有一字之差，但是不是同一個內容。我們所說的原型式繼承，就是我們上節課所講的，通過Object.create()方式來創建新的類。因為這種方式老式瀏覽器不支持。因此，假如我們不用Object.create()，也可以有替代法，方式如下：
function obj(o){ function F(){} F.prototype = o; return new F(); }這個函數，就實現了我們Object.create()創建類的方式！
因此舉例如下：
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);//trigkit4b1.name = 'mike';alert(b1.name);//mikealert(b1.arr);//brother,sister,babab1.arr.push('parents');alert(b1.arr);//brother,sister,baba,parentsvar b2 = obj(box);alert(b2.name);//trigkit4alert(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實現類
//定義類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') // truepoint.hasOwnProperty('y') // truepoint.hasOwnProperty('toString') // falsepoint.__proto__.hasOwnProperty('toString') // trueClass的繼承
class ColorPoint extends Point { constructor(x, y, color) { super(x, y); // 調用父類的constructor(x, y) this.color = color; } toString() { return this.color + ' ' + super.toString(); // 調用父類的toString() }}新聞熱點
疑難解答
