47

ES6 Arrow 関数が、prototype.object を使用してオブジェクトに関数を割り当てるために機能しないように見える場合。次の例を検討してください。

function Animal(name, type){
 this.name = name;
  this.type = type;
  this.toString = () => `${this.name} is a ${this.type}`;

}
var myDog = new Animal('Max', 'Dog');
console.log(myDog.toString()); //Max is a Dog

オブジェクト定義で矢印関数を明示的に使用すると機能しますが、 Object.prototype 構文で矢印関数を使用すると機能しません。

function Animal2(name, type){
  this.name = name;
  this.type = type;
}
Animal2.prototype.toString = () => `${this.name} is a ${this.type}`;

var myPet2 = new Animal2('Noah', 'cat');
console.log(myPet2.toString()); //is a undefined

概念実証として、Object.prototype 構文で Template 文字列構文を使用すると機能します。

function Animal3(name, type){
  this.name = name;
  this.type = type;
}
Animal3.prototype.toString = function(){ return `${this.name} is a ${this.type}`;}

var myPet3 = new Animal3('Joey', 'Kangaroo');
console.log(myPet3.toString()); //Joey is a Kangaroo

明らかな何かが欠けていますか？例 2 は論理的に機能すると思いますが、出力に困惑しています。私はそれがスコーピングの問題だと推測していますが、「未定義です」という出力にうんざりしています。

ES6フィドル

4

2 に答える 2

46

アロー関数はレキシカル を提供しますthis。this関数が評価される時点で使用可能な を使用します。

と論理的に同等です (次のコードは、 という名前の変数を持つことができないため、有効なコードではありませんthis)。

(function(this){
   // code that uses "this"
 })(this)

最初の例では、アロー関数はコンストラクター内にありthis、新しく生成されたインスタンスを指しています。

3番目の例では、矢印関数は使用されておらず、標準thisの動作は常に機能します(関数スコープ内の this )。

2番目の例では、アロー関数を使用していますが、評価されるスコープでthisはグローバル/未定義です。

于 2015-07-31T21:13:50.027 に答える