ES6クラス内のスコープ

Question

次のスニペットで何が起こっているのか、バインディングを使用する方法（ウォーク・フレンズをコンストラクタの外にある方法で修正する方法）について理解していますが、なぜこのようなことが起こりますか？クラスのスコープを独自のメソッドにバインドしなければならないのは直感的ではないようです。

class Person { 
 
    constructor(name, friend) { 
 
     this._name = name; 
 
     if(friend) { 
 
      this.walkFriend = friend.walk; 
 
     } 
 
    } 
 
    
 
    get name() { 
 
     return this._name.toUpperCase(); 
 
    } 
 
    
 
    walk() { 
 
     console.log(this.name + ' is walking.'); 
 
    } 
 
} 
 
      
 
let bob = new Person('Bob'); 
 
let bill = new Person('Bill', bob); 
 

 
console.log(bob.name); // BOB 
 
console.log(bill.name); // BILL 
 
bill.walk() // Bill is walking. 
 
bill.walkFriend(); // expect 'BOB us walking', but get 'BILL us walking.'

Answer 1

何が起こっている古いスタイルで存在しないと同じように、ES2015（「ES6」）クラスとインスタンスの「方法」の間には本質的な接続がないことですコンストラクタ関数friend.walkはそのまま生のメソッド参照を返します。あなた自身でなければ、friendにバインドするものは何もありません。言い換えれば、friend.walk === Person.prototype.walkはtrueです。たとえば、直感に反したあなたの理解は正しいです（範囲についてではなく、むしろthisの値）。 :-)

新しいclassは、ほぼ完全に構文的な砂糖です（ただし、砂糖の良さは分かります）。いずれかが結合、

var Person = function Person(name, friend) { 
    this._name = name; 
    if(friend) { 
     this.walkFriend = friend.walk; 
    } 
}; 

Object.defineProperty(Person.prototype, "name", { 
    get: function() { 
     return this._name.toUpperCase(); 
    }, 
    configurable: true 
}); 

Object.defineProperty(Person.prototype, "walk", { 
    value: function() { 
     console.log(this.name + ' is walking.'); 
    }, 
    writable: true, 
    configurable: true 
}); 

あなたが言った、あなたがそれを解決する方法を知って、そして実際にあなたのソリューションの両方が動作します：：

constructor(name, friend) { 
    this._name = name; 
    if(friend) { 
     this.walkFriend = friend.walk.bind(frield); // ** 
    } 
} 

または作成あなたのPersonクラスは、ほぼ正確にこのES5コードに相当します矢印の関数として、コンストラクタ内walk、代わりのプロトタイプに：

constructor(name, friend) { 
    this._name = name; 
    this.walk =() => {       // ** 
     console.log(this.name + ' is walking.'); // ** 
    };           // ** 
    if(friend) { 
     this.walkFriend = friend.walk; 
    } 
} 

Answer 2

の唯一の4ユースケースがあります。 JSのあなたは良い読み取りのためにthisをチェックしたいかもしれません。この特定のケースでは、friend引数によって渡されたオブジェクトのwalk関数を参照する指示this.walkFriend = friend.walk;があります。 これは新しい関数定義でもなく、それが属するオブジェクトに属していませんです。これは、friendと呼ばれるオブジェクトに存在する関数へのリフェラルです。しかし、あなたがそれを呼び出すと、friend.walk関数内のthisが呼び出されたオブジェクトになります。したがってnameというオブジェクトのプロパティは、thisによって参照されます。

これを解決するにはいくつかの方法があります。 1つはあなたが推測するようバインドです。 this.walkFriend = friend.walk.bind(friend);のようにすることもできますし、this.walkFriend = _ => friend.walk();のように自分自身のスコープ内から呼び出すこともできます（クラスの矢印を使用すると、あなたもうまくいくはずです）