欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

對javascript繼承的理解

 更新時間:2016年10月11日 16:17:20   投稿:mdxy-dxy  
昨天讀了關(guān)于javascript繼承的幾篇文章,對原型鏈、construct、this有了新的認識

由于javascript原生是不支持類的(ES6已經(jīng)支持class與extends),更不用談繼承、多態(tài)了,為了模擬出一些其它面向?qū)ο缶幊陶Z言的這些特性,有好多大牛寫了給出了實現(xiàn)方式,看了John Resig的《Simple JavaScript Inheritance》這篇文章,深深被折服了,原來短短幾十行javascript也可以這么強大、優(yōu)雅,下面以我的理解方式來解讀下。

主要實現(xiàn)了繼承、訪問父類的重名方法(這里的實現(xiàn)方式太妙了),但遺憾的是不能實現(xiàn)成員變量/函數(shù)的隱藏。

(function(){
  //設(shè)置標志位,是new A()過程中還是 B=A.extends({/*   */})過程中;
  var initializing = false,
      //fnTest 可取結(jié)果為倆正則對象 /\b_super\b/與 /.*/
      //當正則的test方法參數(shù)支持自動調(diào)用toString()方法時取前面那個
      fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;
    
  // 創(chuàng)建一個全局的 Class對象
  this.Class = function(){};
    
  // 創(chuàng)建繼承函數(shù)
  Class.extend = function(prop) {
    //此處把_super指向父類的prototype,屬性繼承時需要用其判斷父、子是否有同名方法
    var _super = this.prototype;
      
    //開始B=A.extends({/*   */});
    initializing = true;
    //實例化父類,并把父類的實例方法及屬性給prototype
    var prototype = new this();
    initializing = false;
    //結(jié)束B=A.extends({/*   */});
      
    // 遍歷用戶傳入的用于構(gòu)建子類的對象
    //處理的地方包括:
    //1、屬性直接存到prototype上
    //2、方法中沒通過this._super()調(diào)用父類中的同名方法,則直接把該方法存到prototype上
    //3、方法中有通過this._super()調(diào)用父類中的同名方法,則把如下過程包裹成一個函數(shù)存到prototype上:
    //   把this._super指向父類的同名方法,然后再調(diào)用子類的該方法并返回執(zhí)行結(jié)果
    for (var name in prop) {
      // 循環(huán)體中看起來略微復雜,是整個代碼的精華所在
      //簡化下此過程就是  v = a && b && c ? d : e; 等同于 v = (a && b && c) ? d : e
      //該過程中主要運用的就是邏輯運算中的短路運算 a,b,c全為true則v=d,否則v=e
      //a中判斷prop[name]是否是函數(shù),b中判斷父類中是否也有同名的name函數(shù),c主要判斷name函數(shù)中是否有調(diào)用父類的同名方法(即調(diào)用了this._super())
      //d就是a,b,c同時滿足的時候,也就是說:name是函數(shù),且name函數(shù)存在與父類中,且子類的name函數(shù)需要調(diào)用了父類的同名函數(shù)
      //若a,b,c中有一項不滿足則直接把prop[name]給prototype[name]
      prototype[name] = typeof prop[name] == "function" &&
        typeof _super[name] == "function" && fnTest.test(prop[name]) ?
        (function(name, fn){
          //首先,先決條件決定了prototype[name]是個函數(shù),所以先包裹一個函數(shù)返回
          return function() {
            //作者這里備份,然后調(diào)用fn后又還原this._super
            //由于return的是一個function,具有延時調(diào)用的作用 所以在子類調(diào)用fn時this始終指向子類本身
            //而這里的_super是父類的_super,與this._super并無關(guān)系,所以備份應該是多余的
            //var tmp = this._super;
            //this._super指向與fn(即prop[name])同名的父類方法,方便fn內(nèi)部調(diào)用
            //這里是實現(xiàn)子類中通過this._super()調(diào)用父類同名函數(shù)的關(guān)鍵
            this._super = _super[name];
            //此時再調(diào)用子類,子類里面的this._super已經(jīng)指向了父類同名的函數(shù),即_super[name]
            var ret = fn.apply(this, arguments);   
            //this._super = tmp;
            //返回執(zhí)行結(jié)果
            return ret;
          };
        })(name, prop[name]) :
        prop[name];
    }
      
    //此“Class”與外頭那個“Class”是兩個東西
    //這個Class實為子類的構(gòu)造函數(shù)
    function Class() {
      //不是A.extends({/*   */})過程中
      if ( !initializing && this.init )
        this.init.apply(this, arguments);
    }
      
    //前面處理好的prototype綁定給子類的prototype
    Class.prototype = prototype;
      
    //修正構(gòu)造函數(shù)
    Class.prototype.constructor = Class;
    
    //賦予子類可被繼續(xù)繼承的功能
    Class.extend = arguments.callee;
      
    return Class;
  };
})();

如果想更深入了解js繼承,請繼續(xù)往下查看文章

相關(guān)文章

  • 關(guān)于頁面被攔截的問題

    關(guān)于頁面被攔截的問題

    先來看一下幾個常用瀏覽器的攔截設(shè)置
    2010-02-02
  • javascript 同時在IE和FireFox獲取KeyCode的代碼

    javascript 同時在IE和FireFox獲取KeyCode的代碼

    以前一直在IE8中測試網(wǎng)站,后來寫的一部分含有Ajax的代碼出現(xiàn)了故障,不得已下載了Firefox以及它的插件Firebug,才發(fā)現(xiàn),F(xiàn)F不支持windows.event事件。于是換了一種思路。
    2010-02-02
  • bootstrap選項卡使用方法解析

    bootstrap選項卡使用方法解析

    這篇文章主要為大家詳細介紹了bootstrap選項卡使用方法,包括選項卡組件和底部可以切換的選項卡面板使用,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-01-01
  • javascript+canvas制作九宮格小程序

    javascript+canvas制作九宮格小程序

    這篇文章主要介紹了javascript+canvas制作九宮格小程序,效果非常棒,這里推薦給有需要的小伙伴們
    2014-12-12
  • JS實現(xiàn)的雪花飄落特效示例

    JS實現(xiàn)的雪花飄落特效示例

    這篇文章主要介紹了JS實現(xiàn)的雪花飄落特效,結(jié)合實例形式詳細分析了JavaScript結(jié)合時間函數(shù)動態(tài)操作頁面元素的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
    2019-12-12
  • Javascript中的神器——Promise

    Javascript中的神器——Promise

    本文主要介紹了Javascript中Promise的相關(guān)知識。具有很好的參考價值,下面跟著小編一起來看下吧
    2017-02-02
  • JS控制網(wǎng)頁動態(tài)生成任意行列數(shù)表格的方法

    JS控制網(wǎng)頁動態(tài)生成任意行列數(shù)表格的方法

    這篇文章主要介紹了JS控制網(wǎng)頁動態(tài)生成任意行列數(shù)表格的方法,實例分析了javascript操作表格節(jié)點控制dom元素添加的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-03-03
  • Javascript實現(xiàn)秒表計時游戲

    Javascript實現(xiàn)秒表計時游戲

    這篇文章主要為大家詳細介紹了Javascript實現(xiàn)秒表計時游戲,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-05-05
  • javascript 函數(shù)的暫停和恢復實例詳解

    javascript 函數(shù)的暫停和恢復實例詳解

    這篇文章主要介紹了javascript 函數(shù)的暫停和恢復,結(jié)合實例形式詳細分析了javascript 函數(shù)的暫停和恢復相關(guān)原理、實現(xiàn)方法及操作注意事項,需要的朋友可以參考下
    2020-04-04
  • js的Object.assign用法示例分析

    js的Object.assign用法示例分析

    這篇文章主要介紹了js的Object.assign用法,結(jié)合實例形式分析了js Object.assign基本功能、原理、使用方法及相關(guān)操作注意事項,需要的朋友可以參考下
    2020-03-03

最新評論