老生常談的問題,大部分人也不一定可以系統的理解。Javascript語言對繼承實現的並不好,需要工程師自己去實現一套完整的繼承機制。下面我們由淺入深的系統掌握使用javascript繼承的技巧。
1. 直接使用原型鏈
這是最簡粗暴的一種方式,基本沒法用於具體的項目中。一個簡單的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();
這種方式的問題是原型中的屬性會被所用實例共享,通過一個實例改變一個繼承過來的屬性時,會影響到其他實例。,這顯然不是一種常規意義上的繼承。
2.使用構造函數
構造函數本質上也只是一個函數而已,可以在任何作用域中調用,在子構造函數中調用父構造函數,就可以實現簡單的繼承。
function SuperType(){ this.colors = {"red","blue","green"} } function SubType(){ SuperType.call(this); } var instance = new SubType();
這種實現避免了多個實例共享屬性的問題,但是又出現了新的問題,比如沒法共享函數,而且 instance instanceof SuperType 為false。
3. 組合使用原型和構造函數
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();
組合使用原型和構造函數是javascript中最常用的繼承模式。使用這種方式,每個實例都有自己的屬性,同時可以共享原型中的方法。但是這種方式的缺點是:無論什麼情況,都會調用兩次超類構造函數。一次是在創建子類原型時,另一次是在子類構造函數內部。這種問題該怎麼解決呢?
4. 寄生組合式繼承
SubType的原型並不一定非要是SuperType的實例,只需是一個構造函數的原型是SuperType的原型的普通對象就可以了。Douglas Crockford的方法如下:
function obejct(o){ function F(){}; F.prototype = o; return new F(); }
其實這也就是ES5中Object.create的實現。那麼我們可以修改本文中的第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();
其實寄生組合式繼承已經是一種非常好的繼承實現機制了,足以應付日常使用。如果我們提出更高的要求:比如如何在子類中調用父類的方法呢?
5.simple-inheritance庫的實現
看這麼難懂的代碼,起初我是拒絕的,但是深入之後才發現大牛就是大牛,精妙思想無處不在。我對每一行代碼都有詳細的注釋。如果你想了解細節,請務必詳細研究,讀懂每一行。我覺得這個實現最精妙的地方就是按需重寫父類方法,在實例對象中可以通過_super調用父類的同名方法,類似於java的實現。
(function(){ //initializing用於控制類的初始化,非常巧妙,請留意下文中使用技巧 //fnTest返回一個正則比表達式,用於檢測函數中是否含有_super,這樣就可以按需重寫,提高效率。當然浏覽器如果不支持的話就返回一個通用正則表達式 var initializing = false,fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/; //所有類的基類Class,這裡的this一般是window對象 this.Class = function(){}; //對基類添加extend方法,用於從基類繼承 Class.extend = function(prop){ //保存當前類的原型 var _super = this.prototype; //創建當前類的對象,用於賦值給子類的prototype,這裡非常巧妙的使用父類實例作為子類的原型,而且避免了父類的初始化(通過閉包作用域的initializing控制) initializing = true; var prototype = new this(); initializing = false; //將參數prop中賦值到prototype中,這裡的prop中一般是包括init函數和其他函數的對象 for(var name in prop){ //對應重名函數,需要特殊處理,處理後可以在子函數中使用this._super()調用父類同名構造函數, 這裡的fnTest很巧妙:只有子類中含有_super字樣時才處理從寫以提高效率 prototype[name] = typeof prop[name] == "function" && typeof _super[name] == "function" && fnTest.test(prop[name])? (function(name,fn){ return function(){ //_super在這裡是我們的關鍵字,需要暫時存儲一下 var tmp = this._super; //這裡就可以通過this._super調用父類的構造函數了 this._super = _super[name]; //調用子類函數 fn.apply(this,arguments); //復原_super,如果tmp為空就不需要復原了 tmp && (this._super = tmp); } })(name,prop[name]) : prop[name]; } //當new一個對象時,實際上是調用該類原型上的init方法,注意通過new調用時傳遞的參數必須和init函數的參數一一對應 function Class(){ if(!initializing && this.init){ this.init.apply(this,arguments); } } //給子類設置原型 Class.prototype = prototype; //給子類設置構造函數 Class.prototype.constructor = Class; //設置子類的extend方法,使得子類也可以通過extend方法被繼承 Class.extend = arguments.callee; return Class; } })();
通過使用simple-inheritance庫,我們就可以通過很簡單的方式實現繼承了,是不是發現特別像強類型語言的繼承。
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繼承機制與simple-inheritance源碼分析,希望本文分享能夠幫助到大家。