国产激情自拍_国产9色视频_丁香花在线电影小说观看 _久久久久国产精品嫩草影院

首頁 > 語言 > 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教程頻道。
發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表

圖片精選

国产激情自拍_国产9色视频_丁香花在线电影小说观看 _久久久久国产精品嫩草影院
国产人成精品| 97一区二区三区| 欧美日韩国产亚洲沙发| 永久av在线| 中文字幕网站视频在线| 国产视频福利在线| 久青青在线观看视频国产| 亚洲精品影视在线| 黄色免费av| 国产三级在线看| 国产欧美日韩精品综合| 黄色av免费在线| 国产人成在线观看| www.成人.com| www在线播放| 国产丝袜护土调教在线视频| 97在线超碰| 精品视频一二区| 在线91av| 国产女人在线视频| 国产三级做爰在线观看| 国产第一页在线| 精品美女视频在线观看免费软件| 中文字幕在线观看av| 中文在线视频| 国产尤物视频在线| 日本调教视频在线观看 | 日本成人a视频| 中文字幕在线影院| 超碰免费在线观看| 国产亚洲精品拍拍拍拍拍| 国产精品入口麻豆免费| 在线a人片免费观看视频| 国产视频二区在线观看| 青青在线视频| 国内自拍视频在线看免费观看| 国产精品免费视频一区一| 国产一级黄色电影| 日本中文字幕在线2020| xxxxx中文字幕| 欧美亚洲天堂| 精品极品三级久久久久| av在线不卡免费| 国产精品国精产品一二| 午夜伦全在线观看| wwwww亚洲| 精品剧情v国产在线观看| www.夜夜操| 国产成人精品18| 国产日本在线| 国产精品视频一区麻豆| 久久精品免视着国产成人| 秋霞av在线| 美女网站在线观看| 国产黄视频在线观看| japanese色国产在线看视频| 91福利在线免费| 国产精美视频| 精品视频在线一区二区| 国产黄色片大全| 国产在线色视频| av中文在线资源| 国产精品理人伦一区二区三区 | 亚洲精品一区中文字幕电影| 国产精品自拍在线观看| 国产裸舞福利在线视频合集| 久久国产综合视频| 国产精品视频流白浆免费视频| jlzzjlzz欧美大全| 91在线最新| 中文字幕av在线播放| 国产福利小视频在线| 久蕉依人在线视频| 日本高清中文字幕二区在线| 91社区在线观看| 国产一级黄色| 免费在线超碰| 午夜在线不卡| 伊人影院蕉久影院在线播放| 国产激情视频在线观看| 青青草原av在线| 97国产视频| 老鸭窝av在线| 2021av天天| 免费看的av| 天堂中文字幕在线| 久久久久久国产视频| 国产无遮挡在线视频免费观看| wwwww亚洲| 国产精选在线视频拍拍拍| 日本中文字幕在线看| 伊人影院在线视频| 成年女人在线视频| 国产夫妻视频| 成人超碰在线| 91香蕉视频免费在线观看| 97操碰视频| 国产成人精品实拍在线| 永久免费av网站| 在线三级中文| sese一区| 亚洲成人在线播放| 狠狠综合久久久综合| 亚洲一道本在线| 国产福利小视频在线观看| www.久草.com| 国产剧情在线一区| 免费99热在线观看| 超碰在线网址| 精品无人区乱码1区2区3区免费| a级片国产精品自在拍在线播放| 精品av中文字幕在线毛片| sm国产在线调教视频| 天天草天天干| 一本免费视频| 开心婷婷激情| 性色视频在线| 国产中文字幕第一页| 国产精品666| 国产小视频免费在线观看| 亚洲国产日韩成人综合天堂| 超碰国产在线| 午夜国产在线| 亚洲男人网站| 国产午夜精品一区理论片| 天天干天天摸| 国产午夜精品久久久久免费视| 尤物视频免费在线观看| 国产一级黄色电影| 国产私拍精品| 国产中文伊人| 在线观看电影av| 黄网址在线播放免费| 国产成人精品18| 亚洲精品aaaa精品| 天堂在线亚洲| 中文字幕2020第一页| 欧美精品一区二区三区免费| 国产xxx在线| 国产黄色在线播放| 精品视频一二三| 日本中文字幕在线观看| xxx国产精品| 最近中文字幕大全中文字幕免费 | 国产偷窥洗澡视频| а√最新版在线天堂| 国产桃色电影在线播放| 激情四房婷婷| 黄色av网址在线免费观看| 尤物视频在线免费观看| wwww在线观看免费视频| 黄网址在线永久免费观看| 中文日本在线观看| 国产青草视频在线观看视频| 牛牛精品视频在线| 国产偷倩在线播放| 国产亚洲精品久久久久久移动网络| 国产美女福利在线| 国产一级在线观看www色| 青青草原国产在线| 久色视频在线观看| 在线成人一区| 精品无人区乱码1区2区3区免费 | 国产美女被草| 国产精彩视频在线观看免费蜜芽| av免费在线一区二区三区| 亚洲欧美久久婷婷爱综合一区天堂| baoyu777.永久免费视频| av网址在线看| 伊人精品影院| 国产美女在线免费观看| 在线中文字幕视频| 国产精品入口麻豆免费观看| 国产高清在线| 国产高清免费视频| 一级二级三级在线观看| 中文一区在线观看| 成人欧美亚洲| 国产一级激情| 不卡av免费观看| 国产一卡二卡3卡4卡四卡在线| 黄色网址在线免费播放| 91麻豆福利| 免费的黄网站在线观看| free性亚洲| 中文字幕日本在线观看| 超碰免费97在线观看| av在线电影观看| gogogogo高清视频在线| 国产一起色一起爱| 99免费视频| 精品无吗乱吗av国产爱色| 国产二区三区在线| 亚洲欧美日韩综合精品网| 在线天堂视频| 就爱干草视频| 99热在线免费播放| 国产三级在线免费观看| 国产激情在线观看| 日日夜夜中文字幕|