国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 語言 > JavaScript > 正文

由淺入深講解Javascript繼承機制與simple-inheritance源碼分析

2024-05-06 16:26:16
字體:
來源:轉載
供稿:網友
Javascript語言對繼承實現的并不好,需要工程師自己去實現一套完整的繼承機制。下面我們由淺入深的系統掌握使用javascript繼承的技巧,對javascript繼承相關知識感興趣的朋友一起看看吧
 

老生常談的問題,大部分人也不一定可以系統的理解。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源碼分析,希望本文分享能夠幫助到大家。



注:相關教程知識閱讀請移步到JavaScript/Ajax教程頻道。
發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表

圖片精選

主站蜘蛛池模板: 定结县| 新巴尔虎右旗| 阳信县| 莒南县| 谷城县| 兴化市| 鲁甸县| 阜南县| 潜江市| 民丰县| 图木舒克市| 屏南县| 灵台县| 崇义县| 木兰县| 陇西县| 平原县| 通许县| 靖江市| 会东县| 东山县| 张家口市| 如东县| 澎湖县| 塔城市| 凌海市| 墨脱县| 育儿| 高阳县| 吴江市| 平度市| 庐江县| 顺平县| 长沙县| 唐海县| 叙永县| 肇州县| 苗栗县| 固安县| 仪征市| 当涂县|