javascript繼承模式混淆

Question

我發現這是最推薦的方式來在javascript中進行繼承。

function extend(Child, Parent) { 
var F = function(){}; 
F.prototype = Parent.prototype; 
Child.prototype = new F(); 
} 

如果我已經有孩子的原型中的方法，他們不會覆蓋，我們不應該保存它們。

function extend(Child, Parent) { 
var c = child.prototype; 
var oldProto = new C(); 
var F = function(){}; 
F.prototype = Parent.prototype; 
Child.prototype = new F(); 
for(var i in oldProto){ 
    Child.prototype[i] = oldProto[i] 
} 
} 

Answer 1

你試圖實現的模式叫做multiple inheritance。由於您遇到的問題，這個問題極不推薦使用，稱爲鑽石問題。改爲使用mixin pattern。

Answer 2

我不確定這對你有什麼好處，但要記住它很重要：原型與類不同。你正在做的是試圖讓JS像傳統的面嚮對象語言一樣行事，這種語言試圖教海豚跳芭蕾舞，或者迫使老虎變成純素食者：令人欽佩，但註定會流淚。

我真的不明白爲什麼你想使用extend函數來做任何你想做的事情。爲什麼不簡單地使用這個：

function Parent() 
{}; 
function Child() 
{}; 
//augment parent proto 
Parent.prototype.parentMethod1 = function() 
{}; 
//set Child's proto to Parent 
Child.prototype = new Parent(); 
Child.prototype.constructor = Child; 
//Then augment the Child's prototype 
Child.prototype.childMethod1 = function() 
{}; 
var foo = new Child(); 
foo.parentMethod1();//works 
foo.childMethod1();//works, too 

IMO，這完全解決了這個問題。當然，這有點冗長，但OOP始終是。

Answer 3

下面的代碼是我在JavaScript中繼承的最好的代碼之一。

Object.create（proto [，propertiesObject]）在MDN here上討論。

下面，Jon定義了一個名爲ExtendBase的基本空對象，然後添加了一個名爲extend的函數屬性，它不是枚舉型的，它的參數是一個新的對象。

該對象應該包含可枚舉的屬性，例如將被添加到基礎對象的方法和數據。

他從傳遞的對象中獲取所有可枚舉的屬性，然後使用這些屬性的名稱創建必要描述符的數組以傳遞到Object.create。然後，他使用父對象作爲原型，並將結果描述符作爲新屬性直接添加到Object.create（）調用中的子對象。如你所見，你可以使用帶有屬性的對象參數（包括方法）來擴展一個父對象，而不會丟失該對象的屬性，結果是一個父對象作爲原型的子對象，而對象的可枚舉對象傳遞的對象直接添加到孩子。

然而，這樣可保持整潔原型鏈，而打算使用被三立創建的其他對象父延伸到一個新的孩子在某種程度上是有道理的，延長的父對象：

現場樣品here（按F12在Chrome控制檯輸出，或在Firefox使用Firebug等）

的JavaScript：

// Original Author: FireFly - Jonas Höglund - ##javascript channel 
// on irc.freenode.net - see THANKS File. Updated to private data 
// members and passable initial parameters by Scott Sanbar 

/////////////// 
// Library code 
/////////////// 

var ExtendBase = {}; 

Object.defineProperty(ExtendBase, 'extend', { 
    enumerable:false, value:function (obj) { 
     'use strict'; 

     var descs = {}; 

     Object.getOwnPropertyNames(obj).forEach(function (key) { 
      descs[key] = Object.getOwnPropertyDescriptor(obj, key) 
     }); 

     return Object.create(this, descs); 
    } 
}); 

/////////////// 
// Sample Usage 
/////////////// 

function PersonObj(nam) { 

    return { 
     name:new function() { 

      var name = nam; 

      this.set = function (value) { 
       name = value; 
      }; 

      this.get = function() { 
       return name; 
      } 
     }, 

     // A person can tell you its name. 
     talk:function() { 
      return "Hello, I'm " + this.name.get(); 
     } 
    } 
} 
; 

function WorkingPersonObj(occ) { 

    return { 

     occupation:new function() { 

      var occupation = occ; 

      this.set = function (value) { 
       occupation = value; 
      }; 

      this.get = function() { 
       return occupation; 
      } 
     }, 

     // A working person also tells you their occupation when they talk. 
     talk:function() { 
      return Person.talk.call(this) + " and I am a " + this.occupation.get(); 
     } 
    } 
} 
; 

var hush = { 

    hush:function() { 
     return "I am supposed to be quiet"; 
    } 
}; 

var Person = ExtendBase.extend(new PersonObj('Harry')); 
var WorkingPerson = Person.extend(new WorkingPersonObj('wizard')); 

var wp1 = WorkingPerson.extend(hush); 

console.log(wp1.talk()); // "Hello, I'm Harry and I am a wizard" 
console.log(wp1.hush()); // "I am supposed to be quiet" 
wp1.name.set("Elijah"); 
wp1.occupation.set("prophet"); 
console.log(wp1.talk()); // "Hello, I'm Elijah and I am a prophet" 
console.log(wp1.name.get()); 
console.log(wp1.occupation.get());