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

介紹一個(gè)簡(jiǎn)單的JavaScript類框架

 更新時(shí)間:2015年06月24日 15:48:31   投稿:goldensun  
這篇文章主要介紹了一個(gè)簡(jiǎn)單的JavaScript類框架,有助于初學(xué)者理解JS類的創(chuàng)建與繼承,需要的朋友可以參考下

 在寫work-in-progress JavaScript book一書時(shí),對(duì)于javascript繼承體系,我花費(fèi)了相當(dāng)?shù)臅r(shí)間,并在該過(guò)程中研究了各種不同的模擬經(jīng)典類繼承的方案。這些技術(shù)方案中,我最為推崇的是base2與Prototype的實(shí)現(xiàn)。

從這些方案中,應(yīng)該能提煉出一個(gè)具有其思想內(nèi)涵的框架,該框架須具有簡(jiǎn)單、可重用、易于理解并無(wú)依賴等特點(diǎn),其中簡(jiǎn)單性與可用性是重點(diǎn)。以下是使用示例:
 

var Person = Class. extend ( {
 init: function (isDancing ) {
  this. dancing = isDancing;
 },
 dance: function ( ) {
  return this. dancing;
 }
} );
var Ninja = Person.extend({
 init: function(){
  this._super( false );
 },
 dance: function(){
  // Call the inherited version of dance()
  return this._super();
 },
 swingSword: function(){
  return true;
 }
});
var p = new Person(true);
p.dance(); // => true
var n = new Ninja();
n.dance(); // => false
n.swingSword(); // => true
// Should all be true
p instanceof Person && p instanceof Class &&
n instanceof Ninja && n instanceof Person && n instanceof Class

 

有幾點(diǎn)需要留意:

  •     構(gòu)造函數(shù)須簡(jiǎn)單(通過(guò)init函數(shù)來(lái)實(shí)現(xiàn)),
  •     新定義的類比須繼承于已有的類,
  •     所有的‘類'都繼承于始祖類:Class,因此如果要?jiǎng)?chuàng)建一個(gè)全新的類,該類必須為Class的子類,
  •     最具挑戰(zhàn)的一點(diǎn):父類的被覆寫方法必須能訪問(wèn)到(通過(guò)配置上下文環(huán)境)。
  •     在上面的示例中,你能發(fā)現(xiàn)通過(guò)this._super()來(lái)調(diào)用Person父類的init()和dance()方法。

對(duì)結(jié)果相當(dāng)滿意:使類的定義結(jié)構(gòu)化,保持單一繼承,并且能夠調(diào)用超類方法。

簡(jiǎn)單的類創(chuàng)建與繼承

下面為其實(shí)現(xiàn)(便于閱讀并有注釋),大概25行左右。歡迎并感謝提出建議。
 

/* Simple JavaScript Inheritance
 * By John Resig http://ejohn.org/
 * MIT Licensed.
 */
// Inspired by base2 and Prototype
( function ( ) {
 var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;
 // The base Class implementation (does nothing)
 this.Class = function(){};
  
 // Create a new Class that inherits from this class
 Class.extend = function(prop) {
  var _super = this.prototype;
   
  // Instantiate a base class (but only create the instance,
  // don't run the init constructor)
  initializing = true;
  var prototype = new this();
  initializing = false;
   
  // Copy the properties over onto the new prototype
  for (var name in prop) {
   // Check if we're overwriting an existing function
   prototype[name] = typeof prop[name] == "function" &&
    typeof _super[name] == "function" && fnTest.test(prop[name]) ?
    (function(name, fn){
     return function() {
      var tmp = this._super;
       
      // Add a new ._super() method that is the same method
      // but on the super-class
      this._super = _super[name];
       
      // The method only need to be bound temporarily, so we
      // remove it when we're done executing
      var ret = fn.apply(this, arguments);    
      this._super = tmp;
       
      return ret;
     };
    })(name, prop[name]) :
    prop[name];
  }
   
  // The dummy class constructor
  function Class() {
   // All construction is actually done in the init method
   if ( !initializing && this.init )
    this.init.apply(this, arguments);
  }
   
  // Populate our constructed prototype object
  Class.prototype = prototype;
   
  // Enforce the constructor to be what we expect
  Class.prototype.constructor = Class;
  // And make this class extendable
  Class.extend = arguments.callee;
   
  return Class;
 };
})();

其中  “初始化(initializing/don't call init)”與“創(chuàng)建_super方法”最為棘手。接下來(lái),我會(huì)對(duì)此做簡(jiǎn)要的介紹,使得大家對(duì)其實(shí)現(xiàn)機(jī)制能更好的理解。

初始化

    為了說(shuō)明函數(shù)原型式的繼承方式,首先來(lái)看傳統(tǒng)的實(shí)現(xiàn)過(guò)程,即將子類的prototype屬性指向父類的一個(gè)實(shí)例。如下所示:

 

function Person ( ) { }
function Ninja ( ) { }
Ninja. prototype = new Person ( );
// Allows for instanceof to work:
(new Ninja()) instanceof Person

然而,這里具有挑戰(zhàn)性的一點(diǎn),便是我們只想要得到‘是否實(shí)例(instatnceOf)'的效果,而不需要實(shí)例一個(gè) Person并調(diào)用其構(gòu)造函數(shù)所帶來(lái)的后果。為防止這一點(diǎn),在代碼中設(shè)置一個(gè)bool參數(shù)initializing,只有在實(shí)例化父類并將其配置到子類的prototype屬性時(shí), 其值才為true。這樣處理的目的是區(qū)分開真正的實(shí)例化與設(shè)計(jì)繼承時(shí)這兩種調(diào)用構(gòu)造函數(shù)之間的區(qū)別,進(jìn)而在真正實(shí)例化時(shí)調(diào)用init方法:
 

if ( !initializing )
 this.init.apply(this, arguments);

    值得特別注意的是,因?yàn)樵趇nit函數(shù)中可能會(huì)運(yùn)行相當(dāng)費(fèi)資源的代碼(如連接服務(wù)器,創(chuàng)建DOM元素等,誰(shuí)也無(wú)法預(yù)測(cè)),所以做出區(qū)分是完全必要的。

超類方法(Super Method)

當(dāng)使用繼承時(shí),最常見的需求便是子類能訪問(wèn)超類被覆寫的方法。在該實(shí)現(xiàn)下,最終的方案便是提供一個(gè)臨時(shí)方法(._super),該方法指向超類方法,并且只能在子類方法中訪問(wèn)。
 

var Person = Class. extend ( {
 init: function (isDancing ) {
  this. dancing = isDancing;
 }
} );
var Ninja = Person.extend({
 init: function(){
  this._super( false );
 }
});
var p = new Person(true);
p.dancing; // => true
var n = new Ninja();
n.dancing; // => false


實(shí)現(xiàn)這一功能需要幾步處理。首先,我們使用extend來(lái)合并基本的Person實(shí)例(類實(shí)例,上面我們提到過(guò)其構(gòu)造過(guò)程)與字面對(duì)象(Person.extend()的函數(shù)參數(shù))。在合并過(guò)程中,做了簡(jiǎn)單的檢查:首先檢查將被合并的的屬性是否為函數(shù),如為函數(shù),然后檢查將被覆寫的超類屬性是否也為函數(shù)?如果這兩個(gè)檢查都為true,則需要為該屬性準(zhǔn)備_super方法。

注意,在這里創(chuàng)建了一個(gè)匿名閉包(返回的是函數(shù)對(duì)象)來(lái)封裝增加的super方法?;诰S護(hù)運(yùn)行環(huán)境的需要,我們應(yīng)該將舊的this._super(不管其是否存在)保存起來(lái)以備函數(shù)運(yùn)行后重置,這有助于在有相同名稱(不想偶然丟失對(duì)象指針)的情況下發(fā)生不可預(yù)知的問(wèn)題。

然后,創(chuàng)建新的_super方法,該方法對(duì)象僅指向超類中被覆寫的方法。謝天謝地,不用對(duì)_super做任何改動(dòng)或變更作用域,因?yàn)楹瘮?shù)的執(zhí)行環(huán)境會(huì)隨著函數(shù)調(diào)用對(duì)象自動(dòng)變更(指針this會(huì)指向超類).

最后,調(diào)用字面量對(duì)象的方法,方法執(zhí)行中可能會(huì)使用this._super(),方法執(zhí)行后,將屬性_super重置回其原來(lái)狀態(tài),之后return退出函數(shù)。


以上可以有許多種方案能達(dá)到相同的效果(我之前曾見過(guò)將super綁定到其自身,然后用arguments.callee訪問(wèn)),但是感覺還是這種方法最能能體現(xiàn)可用性與簡(jiǎn)潔性的特點(diǎn)。

在我已完成的多個(gè)基于javascript原型的工作中,只有這個(gè)類繼承實(shí)現(xiàn)方案是我發(fā)表出來(lái)與大家分享的。我認(rèn)為,簡(jiǎn)潔的代碼(易于學(xué)習(xí),易于繼承,更少下載)更需要提出來(lái)讓大家探討,因此,對(duì)于學(xué)習(xí)javascript類構(gòu)造與繼承的人們來(lái)說(shuō),這套實(shí)現(xiàn)方案是一個(gè)好的開始。

相關(guān)文章

  • javascript函數(shù)聲明和函數(shù)表達(dá)式區(qū)別分析

    javascript函數(shù)聲明和函數(shù)表達(dá)式區(qū)別分析

    本文向大家展示了javascript中函數(shù)聲明和函數(shù)表達(dá)式的概念及區(qū)別,介紹的非常全面,也很詳盡,這里推薦給大家
    2014-12-12
  • 簡(jiǎn)單了解JavaScript作用域

    簡(jiǎn)單了解JavaScript作用域

    這篇文章主要介紹了JavaScript作用域的相關(guān)資料,文中講解非常細(xì)致,代碼幫助大家更好的理解和學(xué)習(xí),感興趣的朋友可以了解下
    2020-07-07
  • JavaScript String 對(duì)象常用方法詳解

    JavaScript String 對(duì)象常用方法詳解

    下面小編就為大家?guī)?lái)一篇JavaScript String 對(duì)象常用方法詳解。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-05-05
  • JS 面向?qū)ο笾^承---多種組合繼承詳解

    JS 面向?qū)ο笾^承---多種組合繼承詳解

    下面小編就為大家?guī)?lái)一篇JS 面向?qū)ο笾^承---多種組合繼承詳解。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-07-07
  • javascript 實(shí)例詳解循環(huán)用法

    javascript 實(shí)例詳解循環(huán)用法

    假如您需要運(yùn)行代碼多次,且每次使用不同的值,那么循環(huán)(loop)相當(dāng)方便使用。本篇文章通過(guò)幾個(gè)實(shí)例來(lái)帶你掌握循環(huán)的用法
    2021-11-11
  • 最新評(píng)論