protoとこれとの違いは何ですか？

Question

私はおそらくここでポイントを完全に欠落しているので謝罪します。しかし、私は「これ」と「プロトタイプ」を使用することの違いがこの文脈の中にあるのだろうと思っています。そして、私は本当に再利用可能な豊富なクラスを構築するために使用されなければならない...

私はこれを持っている...

function MyClass() { 

} 

MyClass.prototype.name = null; 

MyClass.prototype.init = function() { 

    console.log('init'); 

    MyClass.prototype.name = 'Peter set by proto'; 

    this.name = 'Peter set by this'; 

}; 

MyClass.prototype.SayName = function() { 

    console.log(MyClass.prototype.name); 
    console.log(this.name); 
}; 

やページ..に

<script type="text/javascript"> 


     var myClass = new MyClass(); 
     myClass.init(); 
     myClass.SayName(); 

    </script> 

出力されます...

init 
Peter set by proto 
Peter set by this 

protoとこれの違いは何ですか？私は彼らが基本的にオブジェクト/クラスにアクセスしていると思いました...？

Answer 1

簡単に言えば、プロトタイプの属性はクラスのすべてのオブジェクトに表示され、オブジェクトの属性はこのオブジェクトにちょうど属します。

あなたが設定：

MyClass.prototype.name = 'Peter set by prototype'; 

、あなたがCONSOLE.LOG：

console.log(new MyClass().name); 
console.log(new MyClass().name); 
.... 

それらのすべてが 'プロトタイプによって設定されたピーター' を示すだろう。

、あなたが設定されている場合：

var myClass = new MyClass(); 
myClass.name = "Peter set by object"; 

、あなたがCONSOLE.LOG：

console.log(new MyClass().name); 
console.log(myClass.name); 
.... 

が表示されるでしょう：

ピーターは
ピーターはオブジェクト

によって設定された試作機で設定されました

Answer 2

thisを介してメソッドまたはプロパティをクラスにアタッチすると、のすべての継承子クラスのインスタンスもこれらのプロパティを持つことになります。一方、prototypeを使用して親クラスのみにメンバーを追加すると、子クラスが継承し、メモリを保存します。上記の場合

function Func(name){ 
    this.name = name; 

    this.display = function(){ 
    alert(this.name); 
    } 
} 

、Funcクラスを継承するクラスでは、それが他のクラス間で共有されるようにする場合冗長であり、あまりにも自分の署名でdisplayメソッドを持つことになります。ベストプラクティスとして、これらのメンバーを（thisを介して）親クラスに追加するのは、子クラスでは必ずしも必要ではありません。

あなたはメンバーが共有したいと子クラスのすべてのインスタンスに追加されていない場合、prototypeを使用します。

function Func(name){ 
    this.name = name; 
} 

Func.prototype.display = function(){ 
    alert(this.name); 
} 

// child class calling display 
function Child(name){ 
    Func.call(this, name); // this refers to Child class here 
} 

Child.prototype = new Func(); 
var cls2 = new Child('Johnson'); 
cls2.display(); // Johnson 

display方法を見ることができるように、子クラスの親Funcクラスと利用できるから来ています。