在JavaScript中模擬類(class)及類的繼承關(guān)系

更新時(shí)間：2016年05月20日 19:19:07 作者：Aaron

眾所周知,JavaScript中沒(méi)有類,然而我們卻可以動(dòng)手實(shí)現(xiàn)一個(gè)擁有繼承特性的類,所以接下來(lái)我們要討論的便是在JavaScript中模擬類(class)及類的繼承關(guān)系:

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

js中實(shí)現(xiàn)“類”與繼承，既是重點(diǎn)，又是難點(diǎn)。很多同學(xué)可能都對(duì)js中“類”與繼承都有所了解，但是深入剖析的時(shí)候，感覺(jué)力不從心、模棱兩可。
我們先來(lái)總結(jié)一下js定義“類”的幾種方法：

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

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

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之后才出來(lái)的。用這個(gè)方法，"類"就是一個(gè)對(duì)象，不是函數(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）都部署了這個(gè)方法。如果遇到老式瀏覽器，可以用下面的代碼自行部署。

　　if (!Object.create) {
　　　　Object.create = function (o) {
　　　　　　 function F() {}
　　　　　　F.prototype = o;
　　　　　　return new F();
　　　　};
　　}

方法三：極簡(jiǎn)主義法

封裝

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

　　var Dog= {
　　　　creatFn: function(){
　　　　　　// some code here
　　　　}
　　};

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

　　var Dog= {
　　　　creatFn: function(){
　　　　　　var dog= {};
　　　　　　dog.name = "狗狗";
　　　　　　dog.makeSound = function(){ alert("汪汪汪"); };
　　　　　　return dog;
　　　　}
　　};

使用的時(shí)候，調(diào)用creatFn()方法，就可以得到實(shí)例對(duì)象。

　　var dog1 = Dog.creatFn();
　　dog1.makeSound(); // 汪汪汪

這種方法的好處是，容易理解，結(jié)構(gòu)清晰優(yōu)雅，符合傳統(tǒng)的"面向?qū)ο缶幊?的構(gòu)造，因此可以方便地部署下面的特性。

繼承

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

　　var Animal = {
　　　　creatFn: function(){
　　　　　　var animal = {};
　　　　　　animal.eat= function(){ alert("吃飯飯"); };
　　　　　　return animal;
　　　　}
　　};

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

　　var Dog= {
　　　　creatFn: function(){
　　　　　　var dog= Animal.creatFn();
　　　　　　dog.name = "狗狗";
　　　　　　dog.makeSound = function(){ alert("汪汪汪"); };
　　　　　　return dog;
　　　　}
　　};

這樣得到的Dog實(shí)例，就會(huì)同時(shí)繼承Dog類和Animal類。

　　var dog1= Dog.creatFn();
　　dog1.eat(); // 吃飯飯

私有屬性和私有方法

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

　　var Dog= {
　　　　creatFn: function(){
　　　　　　var dog= {};
　　　　　　var sound = "汪汪汪";
　　　　　　dog.makeSound = function(){ alert(sound); };
　　　　　　return dog;
　　　　}
　　};

上例的內(nèi)部變量sound，外部無(wú)法讀取，只有通過(guò)dog的公有方法makeSound()來(lái)讀取。

　　var dog1 = Dog.creatFn();
　　alert(dog1.sound); // undefined

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

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

　　var Dog= {
　　　　sound : "汪汪汪",
　　　　creatFn: function(){
　　　　　　var dog= {};
　　　　　　dog.makeSound = function(){ alert(Dog.sound); };
　　　　　　dog.changeSound = function(x){ Dog.sound = x; };
　　　　　　return dog;
　　　　}
　　};

然后，生成兩個(gè)實(shí)例對(duì)象：

　　var dog1 = Dog.creatFn();
　　var dog2 = Dog.creatFn();
　　dog1.makeSound(); // 汪汪汪

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

　　dog2.changeSound("嗚嗚嗚");
　　dog1.makeSound(); //嗚嗚嗚

js繼承

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

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

原型鏈繼承（對(duì)象間的繼承）
類式繼承（構(gòu)造函數(shù)間的繼承）

原型鏈繼承

什么是原型鏈繼承？這里我就不說(shuō)什么定義了。其實(shí)就是用prototype繼承父級(jí)。

舉個(gè)例子：

function Parent(){
 this.name = 'mike';
} 
function Child(){
 this.age = 12;
}
Child.prototype = new Parent();//Child繼承Parent，通過(guò)原型，形成鏈條

var test = new Child();
alert(test.age);
alert(test.name);//得到被繼承的屬性
//繼續(xù)原型鏈繼承
function Brother(){ //brother構(gòu)造
 this.weight = 60;
}
Brother.prototype = new Child();//繼續(xù)原型鏈繼承
var brother = new Brother();
alert(brother.name);//繼承了Parent和Child,彈出mike
alert(brother.age);//彈出12

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

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

類式繼承一般是通過(guò)運(yùn)用call或者apply 進(jìn)行子類型構(gòu)造函數(shù)的內(nèi)部調(diào)用超類型的構(gòu)造函數(shù)。舉個(gè)例子：

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

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

此外還有一些繼承方式，我們一起來(lái)看一下！

組合繼承

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

舉例如下：

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);//對(duì)象冒充，給超類型傳參
}
Child.prototype = new Parent();//原型鏈繼承
var test = new Child(21);//寫new Parent(21)也行
alert(test.run());//mike,jack,smith are both21

原型式繼承

和上面講的原形鏈?zhǔn)嚼^承只有一字之差，但是不是同一個(gè)內(nèi)容。我們所說(shuō)的原型式繼承，就是我們上節(jié)課所講的，通過(guò)Object.create()方式來(lái)創(chuàng)建新的類。因?yàn)檫@種方式老式瀏覽器不支持。因此，假如我們不用Object.create()，也可以有替代法，方式如下：

 function obj(o){
 function F(){}
 F.prototype = o;
 return new F();
 }

這個(gè)函數(shù)，就實(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();

類的繼承，基本上就是如上幾種方式。下面再簡(jiǎn)單的說(shuō)一下ES6的class類吧！

es6實(shí)現(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); // 調(diào)用父類的constructor(x, y)
 this.color = color;
 } 
 toString() {
 return this.color + ' ' + super.toString(); // 調(diào)用父類的toString()
 }
}

您可能感興趣的文章: