ES6でメソッドを追加する方法JSオブジェクトに残り

Question

私はPersonコンストラクタを持っており、友達を追加するメソッドを追加したいと思います。私は、私はES6の新しい "休憩"機能について考えていたので、私はユーザーが可変数の友達を渡すことを許可したい。悲しいことに、私は道を見つけることができません。ここに私の最初の試みだ

// Persons creator 
function Person(name){ 
    this.name = name; 
    this.friends = []; 
    this.addFriends = function(...a){ 
     a.forEach(function(d){this.friends.push(d)}); 
    } 
} 

// Create three persons 
f = new Person("Fanny"); 
e = new Person("Eric"); 
j = new Person("John"); 

// add Eric & Fanny as friends of Fanny 
f.addFriends(e,j); 

私も次のコードを試してみた（エラーなし、ない友人が追加されません）：：（エラー：「キャッチされない例外TypeError：f.addFriends関数（...）ではありません」）

// Persons creator 
function Person(name){ 
    this.name = name; 
    this.friends = []; 
} 

Person.prototype.addFriends = function(...a){ 
    a.forEach(function(d){this.friends.push(d)}); 
} 


// Create three persons 
f = new Person("Fanny"); 
e = new Person("Eric"); 
j = new Person("John"); 

// add Eric & Fanny as friends of Fanny 
f.addFriends(e,j); 

私は間違っていますか？ ご協力いただきありがとうございます！

Answer 1

forEachの内部でコールバックを使用しているため、thisはオブジェクトを参照していません。 thisにコールバックをバインドします

Person.prototype.addFriends = function(...a){ 
    a.forEach(function(d){this.friends.push(d)}.bind(this)); 
} 

我々はES6を使用しているので、あなたの代わりにarrow functionを使用することができます。アロー関数は字句this値バインド：

Person.prototype.addFriends = function(...a){ 
    a.forEach((d) => this.friends.push(d)); 
} 

Answer 2

thisを、forEachに渡されるコールバックで、このコードでは人のインスタンスではありません。

Person.prototype.addFriends = function(...a){ 
    a.forEach(function(d){this.friends.push(d)}); 
} 

あなたは、新しい矢印の機能を使用することができます右のコンテキストがあります。

Person.prototype.addFriends = function(...a){ 
    a.forEach((d) => {this.friends.push(d)}); 
} 

のが、よりエレガントな解決策はここにあります：

Person.prototype.addFriends = function(...a){ 
    this.friends.push(...a); 
} 

Answer 3

forEachは、通常はグローバルコンテキスト（ブラウザのwindow）で呼び出されるコールバックを受け取ります。 2番目の引数として現在のthisをforEachに渡す必要があります。

か、完全に全体this問題だけconcat配列を避けることができます：

function Person(name){ 
    this.name = name; 
    this.friends = []; 
    this.addFriends = function(...a){ 
     this.friends = this.friends.concat(a); 
    } 
} 

Answer 4

あなたはECMAScriptの6からの新機能を使用することができます - >クラス

1. は、あなたのクラスを定義します。

   クラスPerson {

   constructor(name) { 
       this.name = name; 
       this.friends = []; 
   } 
   
   addFriends(friends) { 
       // do someting with friends 
       this.friends = friends 
   } 
   

   }

は、あなたは（

p.addFriends(....)