老生常談的問題，大部分人也不一定可以系統(tǒng)的理解。Javascript語言對(duì)繼承實(shí)現(xiàn)的并不好，需要工程師自己去實(shí)現(xiàn)一套完整的繼承機(jī)制。下面我們由淺入深的系統(tǒng)掌握使用javascript繼承的技巧。
1. 直接使用原型鏈
這是最簡(jiǎn)粗暴的一種方式，基本沒法用于具體的項(xiàng)目中。一個(gè)簡(jiǎn)單的demo如下：
function SuperType(){ this.property = true;}SuperType.prototype.getSuperValue = function(){ return this.property;}function SubType(){ this.subproperty = false;}//繼承SubType.prototype = new SuperType();SubType.prototype.getSubValue = function(){ return this.subproperty;}var instance = new SubType();這種方式的問題是原型中的屬性會(huì)被所用實(shí)例共享，通過一個(gè)實(shí)例改變一個(gè)繼承過來的屬性時(shí)，會(huì)影響到其他實(shí)例。,這顯然不是一種常規(guī)意義上的繼承。
2.使用構(gòu)造函數(shù)
構(gòu)造函數(shù)本質(zhì)上也只是一個(gè)函數(shù)而已，可以在任何作用域中調(diào)用，在子構(gòu)造函數(shù)中調(diào)用父構(gòu)造函數(shù)，就可以實(shí)現(xiàn)簡(jiǎn)單的繼承。
function SuperType(){ this.colors = {"red","blue","green"}}function SubType(){ SuperType.call(this); }var instance = new SubType();這種實(shí)現(xiàn)避免了多個(gè)實(shí)例共享屬性的問題，但是又出現(xiàn)了新的問題，比如沒法共享函數(shù)，而且 instance instanceof SuperType 為false。
3. 組合使用原型和構(gòu)造函數(shù)
function SuperType(name){ this.name = name; this.colors = {"red","blue","green"}}SuperType.prototype.sayName = function(){ //code}function SubType(name,age){ SuperType.call(this,name); this.age = age;}SubType.prototype = new SuperType();var instance = new SubType();組合使用原型和構(gòu)造函數(shù)是javascript中最常用的繼承模式。使用這種方式，每個(gè)實(shí)例都有自己的屬性，同時(shí)可以共享原型中的方法。但是這種方式的缺點(diǎn)是：無論什么情況，都會(huì)調(diào)用兩次超類構(gòu)造函數(shù)。一次是在創(chuàng)建子類原型時(shí)，另一次是在子類構(gòu)造函數(shù)內(nèi)部。這種問題該怎么解決呢？
4. 寄生組合式繼承
SubType的原型并不一定非要是SuperType的實(shí)例,只需是一個(gè)構(gòu)造函數(shù)的原型是SuperType的原型的普通對(duì)象就可以了。Douglas Crockford的方法如下：
function obejct(o){ function F(){}; F.prototype = o; return new F();}其實(shí)這也就是ES5中Object.create的實(shí)現(xiàn)。那么我們可以修改本文中的第3種方案：
function inheritPrototype(subType,superType){ var prototype = object(superType.prototype); prototype.constructor = subType; subType.prototype = prototype;}function SuperType(name){ this.name = name; this.colors = {"red","blue","green"}}SuperType.prototype.sayName = function(){ //code}function SubType(name,age){ SuperType.call(this,name); this.age = age;}inheritPrototype(SubType,SuperType);var instance = new SubTYpe();其實(shí)寄生組合式繼承已經(jīng)是一種非常好的繼承實(shí)現(xiàn)機(jī)制了，足以應(yīng)付日常使用。如果我們提出更高的要求：比如如何在子類中調(diào)用父類的方法呢？
5.simple-inheritance庫的實(shí)現(xiàn)
看這么難懂的代碼，起初我是拒絕的，但是深入之后才發(fā)現(xiàn)大牛就是大牛，精妙思想無處不在。我對(duì)每一行代碼都有詳細(xì)的注釋。如果你想了解細(xì)節(jié)，請(qǐng)務(wù)必詳細(xì)研究，讀懂每一行。我覺得這個(gè)實(shí)現(xiàn)最精妙的地方就是按需重寫父類方法，在實(shí)例對(duì)象中可以通過_super調(diào)用父類的同名方法，類似于java的實(shí)現(xiàn)。
(function(){ //initializing用于控制類的初始化，非常巧妙，請(qǐng)留意下文中使用技巧 //fnTest返回一個(gè)正則比表達(dá)式，用于檢測(cè)函數(shù)中是否含有_super，這樣就可以按需重寫，提高效率。當(dāng)然瀏覽器如果不支持的話就返回一個(gè)通用正則表達(dá)式 var initializing = false,fnTest = /xyz/.test(function(){xyz;}) ? //b_super/b/ : /.*/; //所有類的基類Class,這里的this一般是window對(duì)象 this.Class = function(){}; //對(duì)基類添加extend方法，用于從基類繼承 Class.extend = function(prop){ //保存當(dāng)前類的原型 var _super = this.prototype; //創(chuàng)建當(dāng)前類的對(duì)象，用于賦值給子類的prototype，這里非常巧妙的使用父類實(shí)例作為子類的原型，而且避免了父類的初始化(通過閉包作用域的initializing控制) initializing = true; var prototype = new this(); initializing = false; //將參數(shù)prop中賦值到prototype中，這里的prop中一般是包括init函數(shù)和其他函數(shù)的對(duì)象 for(var name in prop){ //對(duì)應(yīng)重名函數(shù)，需要特殊處理，處理后可以在子函數(shù)中使用this._super()調(diào)用父類同名構(gòu)造函數(shù), 這里的fnTest很巧妙:只有子類中含有_super字樣時(shí)才處理從寫以提高效率 prototype[name] = typeof prop[name] == "function" && typeof _super[name] == "function" && fnTest.test(prop[name])? (function(name,fn){ return function(){ //_super在這里是我們的關(guān)鍵字，需要暫時(shí)存儲(chǔ)一下 var tmp = this._super; //這里就可以通過this._super調(diào)用父類的構(gòu)造函數(shù)了 this._super = _super[name]; //調(diào)用子類函數(shù) fn.apply(this,arguments); //復(fù)原_super，如果tmp為空就不需要復(fù)原了 tmp && (this._super = tmp); } })(name,prop[name]) : prop[name]; } //當(dāng)new一個(gè)對(duì)象時(shí)，實(shí)際上是調(diào)用該類原型上的init方法,注意通過new調(diào)用時(shí)傳遞的參數(shù)必須和init函數(shù)的參數(shù)一一對(duì)應(yīng) function Class(){ if(!initializing && this.init){ this.init.apply(this,arguments); } } //給子類設(shè)置原型 Class.prototype = prototype; //給子類設(shè)置構(gòu)造函數(shù) Class.prototype.constructor = Class; //設(shè)置子類的extend方法，使得子類也可以通過extend方法被繼承 Class.extend = arguments.callee; return Class; }})();通過使用simple-inheritance庫，我們就可以通過很簡(jiǎn)單的方式實(shí)現(xiàn)繼承了，是不是發(fā)現(xiàn)特別像強(qiáng)類型語言的繼承。
var Human = Class.extend({ init: function(age,name){ this.age = age; this.name = name; }, say: function(){ console.log("I am a human"); }});var Man = Human.extend({ init: function(age,name,height){ this._super(age,name); this.height = height; }, say: function(){ this._super(); console.log("I am a man"); }});var man = new Man(21,'bob','191');man.say();由淺入深講解Javascript繼承機(jī)制與simple-inheritance源碼分析，希望本文分享能夠幫助到大家。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
