web-dev-qa-db-ja.com

オブジェクトリテラルの矢印関数

オブジェクトリテラルのアロー関数がwindowをthisとして呼び出している理由を理解しようとしています。誰かが私にいくつかの洞察を与えることはできますか？

_var arrowObject = {
  name: 'arrowObject',
  printName: () => {
    console.log(this);
  }
};

// Prints: Window {external: Object, chrome: Object ...}
arrowObject.printName();
_

そして、期待どおりに機能するオブジェクト：

_var functionObject = {
  name: 'functionObject',
  printName: function() {
    console.log(this);
  }
};

// Prints: Object {name: "functionObject"}
functionObject.printName();
_

Babel REPL によると、彼らは

_var arrowObject = {
  name: 'arrowObject',
  printName: function printName() {
    console.log(undefined);
  }
};
_

そして

_var functionObject = {
  name: 'functionObject',
  printName: function printName() {
    console.log(this);
  }
};
_

arrowObjectをthisとしてarrowObject.printName();を呼び出さないのはなぜですか？

コンソールログは Fiddle からのものです（_use strict;_は使用されません）。

javascriptecmascript-6babeljsobject-literalarrow-functions
22
Dennis S

Babel変換はストリクトモードを想定していますが、windowを使用した結果は、コードをルーズモードで実行していることを示しています。ルベルモードを想定するようにBabelに指示すると、そのトランスパイレーション （異なる ：

_var _this = this;                    // **

var arrowObject = {
  name: 'arrowObject',
  printName: function printName() {
    console.log(_this);              // **
  }
};
_

厳密モードトランスパイレーションのconsole.log(_this);ではなく、__this_グローバルとconsole.log(undefined);に注意してください。

オブジェクトリテラルのアロー関数がwindowをthisとして呼び出している理由を理解しようとしています。

アロー関数は、作成されたコンテキストからthisを継承するためです。どうやら、これをやっているところ：

_var arrowObject = {
  name: 'arrowObject',
  printName: () => {
    console.log(this);
  }
};
_

...thisはwindowです。 （厳密モードを使用していないことを示唆しています。明確な理由がない場合に使用することをお勧めします。）厳密モードグローバルコードのundefinedなど、それ以外の場合は、thisは、代わりに他の値になります。

イニシャライザを論理的に等価に分解すると、アロー関数が作成されるコンテキストが少し明確になる場合があります。

_var arrowObject = {};
arrowObject.name = 'arrowObject';
arrowObject.printName = () => {
  console.log(this);
};
_
34
T.J. Crowder