最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

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

 更新時(shí)間:2015年12月13日 15:06:20   投稿:mrr  
Javascript語言對(duì)繼承實(shí)現(xiàn)的并不好,需要工程師自己去實(shí)現(xiàn)一套完整的繼承機(jī)制。下面我們由淺入深的系統(tǒng)掌握使用javascript繼承的技巧,對(duì)javascript繼承相關(guān)知識(shí)感興趣的朋友一起看看吧

老生常談的問題,大部分人也不一定可以系統(tǒng)的理解。Javascript語言對(duì)繼承實(shí)現(xiàn)的并不好,需要工程師自己去實(shí)現(xiàn)一套完整的繼承機(jī)制。下面我們由淺入深的系統(tǒng)掌握使用javascript繼承的技巧。

1. 直接使用原型鏈

這是最簡粗暴的一種方式,基本沒法用于具體的項(xiàng)目中。一個(gè)簡單的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)簡單的繼承。

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á)式,用于檢測函數(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庫,我們就可以通過很簡單的方式實(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源碼分析,希望本文分享能夠幫助到大家。

  • JS可以控制樣式的名稱寫法一覽

    JS可以控制樣式的名稱寫法一覽

    這篇文章主要介紹了JS可以控制樣式的名稱寫法,有需要的朋友可以參考一下
    2014-01-01
  • echarts實(shí)現(xiàn)橫向和縱向滾動(dòng)條(使用dataZoom)

    echarts實(shí)現(xiàn)橫向和縱向滾動(dòng)條(使用dataZoom)

    這篇文章主要給大家介紹了關(guān)于echarts使用dataZoom實(shí)現(xiàn)橫向和縱向滾動(dòng)條的相關(guān)資料,最近項(xiàng)目中使用到echarts圖表,當(dāng)數(shù)據(jù)過多時(shí)需要添加橫向滾動(dòng)條,需要的朋友可以參考下
    2023-08-08
  • bootstrap實(shí)現(xiàn)輪播圖效果

    bootstrap實(shí)現(xiàn)輪播圖效果

    這篇文章主要為大家詳細(xì)介紹了bootstrap實(shí)現(xiàn)輪播圖效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-05-05
  • JS關(guān)閉窗口與JS關(guān)閉頁面的幾種方法小結(jié)

    JS關(guān)閉窗口與JS關(guān)閉頁面的幾種方法小結(jié)

    本篇文章要是對(duì)JS關(guān)閉窗口與JS關(guān)閉頁面的幾種方法進(jìn)行了總結(jié)介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助
    2013-12-12
  • 比較新舊兩個(gè)數(shù)組值得增加和刪除的JS代碼

    比較新舊兩個(gè)數(shù)組值得增加和刪除的JS代碼

    這篇文章介紹了比較新舊兩個(gè)數(shù)組值得增加和刪除的JS代碼,有需要的朋友可以參考一下
    2013-10-10
  • 加載遠(yuǎn)程圖片時(shí),經(jīng)常因?yàn)榫彺娑貌坏礁碌慕鉀Q方法(分享)

    加載遠(yuǎn)程圖片時(shí),經(jīng)常因?yàn)榫彺娑貌坏礁碌慕鉀Q方法(分享)

    本篇文章是對(duì)加載遠(yuǎn)程圖片時(shí),經(jīng)常因?yàn)榫彺娑貌坏礁碌慕鉀Q方法進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下
    2013-06-06
  • 一文解析ChatGPT?之?Fetch?請(qǐng)求

    一文解析ChatGPT?之?Fetch?請(qǐng)求

    這篇文章主要為大家介紹了ChatGPT?之?Fetch請(qǐng)求的內(nèi)容解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-03-03
  • 根據(jù)表格中的某一列進(jìn)行排序的javascript代碼

    根據(jù)表格中的某一列進(jìn)行排序的javascript代碼

    根據(jù)表格中的某一列進(jìn)行排序的實(shí)現(xiàn)方法有很多,下面為大家介紹下如何使用js來簡單實(shí)現(xiàn)下,需要的朋友不要錯(cuò)過
    2013-11-11
  • 輕松解決JavaScript定時(shí)器越走越快的問題

    輕松解決JavaScript定時(shí)器越走越快的問題

    這篇文章主要介紹了輕松解決JavaScript定時(shí)器越走越快的問題 ,本文通過實(shí)例帶給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-05-05
  • 最新評(píng)論

    喀喇沁旗| 绥棱县| 喀喇沁旗| 交城县| 高碑店市| 同德县| 广汉市| 什邡市| 宝清县| 德昌县| 海阳市| 望都县| 饶平县| 白山市| 尚义县| 崇左市| 望江县| 清涧县| 中阳县| 沭阳县| 河池市| 城市| 舒城县| 德江县| 海兴县| 邵东县| 会宁县| 鹤岗市| 蚌埠市| 武汉市| 镇雄县| 巴马| 桦川县| 博罗县| 凤山县| 新田县| 红原县| 富宁县| 宽城| 三江| 乃东县|