2017-01-23 71 views
0
var ppElement=function(str_elmt){ 
     this.tagName=(str_elmt==null)?"div":str_elmt; 
    } 
    ppElement.prototype={ 
     constructor:ppElement, 
     ppCreate:function(){ 
     return document.createElement(this.tagName); 
     }, 
     ppAppend:function(){ 
     var prntObj=arguments[0]; 
     for(var i=1;i<arguments.length;i++){ 
      prntObj.appendChild(arguments[i]); 
     } 
     } 
    }; 
    /*=====================================*/ 
    var ppLabel=function(str_txt){ 
     this.text=str_txt; 
    } 
    ppLabel.prototype=Object.create(ppElement.prototype,{ 
     constructor:ppLabel, 
     ppCreateLabel:{ 
     value:function(){ 
      var obj,txtObj; 
      ppElement.call(this); 
      obj=this.ppCreate(); 
      txtObj=document.createTextNode(this.text); 
      this.ppAppend(obj,txtObj); 
      return obj; 
     } 
     } 
    }); 
    /*=====================================*/ 
    var tempObj=new ppLabel("Jeff"); 
    tempObj.ppCreateLabel(); 
    /*=====================================*/ 

此代碼由我撰寫。我正嘗試使用object.create從ppLabel繼承ppElement的方法。我對object.create有點困惑。我無法理解object.create中發生了什麼。上面的代碼適用於我,但我想了解它。我想了解以下javascript代碼

幾個問題:

  • 這是否實現在所有瀏覽器的工作原理?

  • 如何從單個派生類的2個基類繼承?如果有可能的話,有人告訴我如何以prototype-constructor模式實現它們(我在互聯網上發現它們,並且我已經在該模式中編寫了上述代碼)。

  • 這種寫代碼會影響性能嗎? (我選擇了這個模式,因爲有人說,JavaScript是原型的語言,所以我決定寫我的原型構造模式代碼)

  • 我們可以使用__proto__?我在網上發現使用__proto__已被棄用。

如果我在代碼中犯了什麼錯誤,請隨時說,這對我真的很有幫助。

謝謝!

+0

約定以大寫字母開始構造函數名稱,這樣可以更容易理解代碼。另外,考慮使用函數聲明而不是構造函數的函數表達式。考慮使用* Object.assign *來擴展默認的* constructor.prototype *而不是替換它。 * codereview *可能更好? – RobG

+0

我沒有JavaScript專家,所以也許這個鏈接將幫助你 [鏈接](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create) 它看起來像基本的JavaScript,所以這應該適用於所有瀏覽器。 從我的角度來看,繼承2個基類是一個很大的禁忌 - 它可能只會導致麻煩。 不知道關於性能,關於___proto___ 一般來說,代碼看起來不錯,但........考慮使用** TypeScript **。它將使代碼更易於讀取,並將其轉換爲JavaScript,以支持所有瀏覽器。好多了! –

+0

我會嘗試用大寫字母爲構造函數開始名稱。謝謝@RobG –

回答

0

上面的代碼適用於我,但我想了解它。

這裏有很多很多的問題和網上關於原型繼承的文章, MDN: Inheritance and the prototype chain

此實現是否適用於所有瀏覽器?

所有支持的Object.create,將其在EMCA-262 ED 5引入,所以這將是最。也許你不關心那些沒有的東西(例如IE 8和更低版本)。實現polyfill相當容易。

如何從單個派生類的2個基類繼承?

ECMAScript中沒有類。有構造函數和原型(和類的語法,但它不創建類)。

無論如何,我認爲你已經做到了。有不同的方式去實現它,但最終結果幾乎是你所做的。也就是說,將所需的原型堆積在構造函數。原型[[Prototype]]之上,因此它們都是實例的原型鏈。

如果可能的話有人告訴我如何在原型構造函數模式下實現它們(我在互聯網上找到它們,並且已經在該模式中編寫了上述代碼)。

我想你已經做到了。

這種寫代碼會影響性能嗎? (我選擇了這種模式,因爲據說JavaScript是原型語言,所以我決定在原型構造器模式中編寫我的代碼)

影響性能與什麼相比?沒有構造函數的平原函數?不太可能。這更多的是語義問題,以及如何閱讀和理解代碼。

我們可以用原型?我在互聯網上發現使用proto已棄用。

可以但不建議。它已被添加到ECMA-262的附錄中。如果您需要直接訪問對象的[[Prototype]],則可能有更好的方法來做任何您想要做的事情。但當然也有例外。

+0

非常感謝您花時間回答我的所有問題@RobG。幾乎你已經回答了我的所有疑問。我不清楚繼承兩個基類。對於一個派生類,我只能從一個基類繼承。如果您願意,請通過添加另一個類並將它們繼承到ppLabel來幫助解決此問題。謝謝!! –

+0

請參閱[* MND:類*](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes),它也可以用傳統的構造函數和原型結構完成,但大多數似乎喜歡新的Class語法。 – RobG