this 🤔

JavaScript：これはどういう意味ですか？

JavaScriptでは thisの値を理解するのに困る場合がありますが、次のとおりにやってみましょう

Available in: English, Español, Português, Русский, 中文, and 한국어
Jake Archibald
Jake Archibald
Twitter Homepage
このページ内

JavaScriptのthisは笑いネタであり、それはまあ、それはかなり複雑からです。しかし、開発者がthis対処を避けるために、もっと複雑かつドメイン固有のものをしたことを見られました 。thisに困れば、この記事が役に立つかもしれません。これが私のthisについてのガイドです。

最も具体的な状況から始めて、最も具体的でない状況で終わります。この記事は、if (…) … else if () … else if (…) …ように大きいものなので、探しているコードに一致する最初のセクションに直接進むことができます。

  1. 関数が矢印関数として定義されている場合
  2. それ以外、関数/クラスがnewで呼び出された場合
  3. それ以外、関数に「バインドされた」 this値がある場合
  4. それ以外、thisがcall-timeに設定されている場合
  5. それ以外、関数が親オブジェクト（ parent.func() ）を介して呼び出された場合
  6. それ以外、関数または親スコープが厳密モードにある場合
  7. それ以外の場合

関数が矢印関数として定義されている場合： #

const arrowFunction = () => {
  console.log(this);
};

この場合には、thisの値は常に親スコープ内にあるthisと同じです：

const outerThis = this;

const arrowFunction = () => {
  // Always logs `true`:
  console.log(this === outerThis);
};

矢印関数ではthisの内側の値が変更されなくて、優れるものです。 常に外側のthisと同じです。

その他の例 #

矢印関数の使用により、thisの値がbindに変更されません ：

// Logs `true` - bound `this` value is ignored:
arrowFunction.bind({foo: 'bar'})();

矢印関数の使用により、thisの値がcallまたはapplyに変更されません ：

// Logs `true` - called `this` value is ignored:
arrowFunction.call({foo: 'bar'});
// Logs `true` - applied `this` value is ignored:
arrowFunction.apply({foo: 'bar'});

矢印関数では、別のオブジェクトのメンバーとして関数を呼び出しても、thisの値が変更されません。

const obj = {arrowFunction};
// Logs `true` - parent object is ignored:
obj.arrowFunction();

矢印関数では、コンストラクターとして関数を呼び出しても、this値が変更されません。

// TypeError: arrowFunction is not a constructor
new arrowFunction();

「バインドされた」インスタンスメソッド #

インスタンスメソッドでは、thisが常にクラスインスタンスを参照することを確保したい場合は、最善の方法として矢印関数とclass fieldsを使用することを勧めます。

class Whatever {
  someMethod = () => {
    // Always the instance of Whatever:
    console.log(this);
  };
}

このパターンは、コンポーネント（ReactコンポーネントやWebコンポーネントなど）でイベントリスナーとしてインスタンスメソッドを使用する上で非常に役立ちます。

上記は、「thisは親スコープの thisと同じになる」というルールに違反しているように感じるかもしれませんが、クラスフィールドをコンストラクターで設定するための糖衣構文のようなものと考えると意味が分かります。

class Whatever {
  someMethod = (() => {
    const outerThis = this;
    return () => {
      // Always logs `true`:
      console.log(this === outerThis);
    };
  })();
}

// …is roughly equivalent to:

class Whatever {
  constructor() {
    const outerThis = this;
    this.someMethod = () => {
      // Always logs `true`:
      console.log(this === outerThis);
    };
  }
}

代替パッテンには、コンストラクターで既存関数をバインドするか、コンストラクター内で関数を割り当てることが含まれます。何らかの理由でクラスフィールドを使用できない場合は、代替手段としてコンストラクター内で関数を割り当てることをお勧めします。

class Whatever {
  constructor() {
    this.someMethod = () => {
      // …
    };
  }
}

それ以外、関数/クラスがnew: で呼び出された場合 #

new Whatever();

下記のようにthisで Whatever（またはクラスの場合はそのconstructor関数）を呼び出し、Object.create(Whatever.prototype)の結果に設定します。

class MyClass {
  constructor() {
    console.log(
      this.constructor === Object.create(MyClass.prototype).constructor,
    );
  }
}

// Logs `true`:
new MyClass();

同様なやり方は古いスタイルのconstructorにも当てはまります。

function MyClass() {
  console.log(
    this.constructor === Object.create(MyClass.prototype).constructor,
  );
}

// Logs `true`:
new MyClass();

その他の例 #

newで呼び出された場合、 this はbindで変更されません：

const BoundMyClass = MyClass.bind({foo: 'bar'});
// Logs `true` - bound `this` value is ignored:
new BoundMyClass();

newで呼び出された場合、別のオブジェクトのメンバーとして関数を呼び出しても、thisの値が変更されません。

const obj = {MyClass};
// Logs `true` - parent object is ignored:
new obj.MyClass();

それ以外、関数に「バウンドされた」this の値がある場合 : #

function someFunction() {
  return this;
}

const boundObject = {hello: 'world'};
const boundFunction = someFunction.bind(boundObject);

boundFunction呼ばれるたびに、そのthis値はbind (boundObject)に渡されたオブジェクトになります。

// Logs `false`:
console.log(someFunction() === boundObject);
// Logs `true`:
console.log(boundFunction() === boundObject);

その他の例 #

バインドされた関数を呼び出す場合、thisの値がcallまたはapplyに変更されません ：

// Logs `true` - called `this` value is ignored:
console.log(boundFunction.call({foo: 'bar'}) === boundObject);
// Logs `true` - applied `this` value is ignored:
console.log(boundFunction.apply({foo: 'bar'}) === boundObject);

バインドされた関数を呼び出す場合、別のオブジェクトのメンバーとして関数を呼び出してもthis値が変更されません。

const obj = {boundFunction};
// Logs `true` - parent object is ignored:
console.log(obj.boundFunction() === boundObject);

それ以外、 thisがcall-timeに設定されている場合： #

function someFunction() {
  return this;
}

const someObject = {hello: 'world'};

// Logs `true`:
console.log(someFunction.call(someObject) === someObject);
// Logs `true`:
console.log(someFunction.apply(someObject) === someObject);

thisの値にcall/applyに渡されたオブジェクトです 。

残念ながら、 thisはDOMイベントリスナーなどによって他の値に設定されており、これを使用すると、コードが理解しにくくなる可能性があります。

してはいけないこと

element.addEventListener('click', function (event) {
  // Logs `element`, since the DOM spec sets `this` to
  // the element the handler is attached to.
  console.log(this);
});

上記の場合などにはthisを使用せず、代わりに次のようにします。

すべきこと

element.addEventListener('click', (event) => {
  // Ideally, grab it from a parent scope:
  console.log(element);
  // But if you can't do that, get it from the event object:
  console.log(event.currentTarget);
});

それ以外、関数が親オブジェクト (parent.func())を介して呼び出された場合： #

const obj = {
  someMethod() {
    return this;
  },
};

// Logs `true`:
console.log(obj.someMethod() === obj);

この場合、関数はobjのメンバーとして呼び出されるため、 thisはobjになります。これはcall-timeに発生するため、関数が親オブジェクトなしで、または別の親オブジェクトを使用して呼び出された場合、リンクは切断されます。

const {someMethod} = obj;
// Logs `false`:
console.log(someMethod() === obj);

const anotherObj = {someMethod};
// Logs `false`:
console.log(anotherObj.someMethod() === obj);
// Logs `true`:
console.log(anotherObj.someMethod() === anotherObj);

someMethodはobjメンバーとして呼び出されないため、someMethod() === objはfalseになります。次のようなことを試みたときに、この落とし穴に遭遇するかもしれません。

const $ = document.querySelector;
// TypeError: Illegal invocation
const el = $('.some-element');

これは、 querySelectorの実装がそれ自体のthis値を調べて、それが一種のDOMノードであると想定するために壊れ、そしてその接続を壊します。上記を正しく機能するには：

const $ = document.querySelector.bind(document);
// Or:
const $ = (...args) => document.querySelector(...args);

面白い事実：すべてのAPIがthis内部で使用しているわけではありません。console.logなどのコンソールメソッドはthis参考を回避するように変更されたため、logはconsoleにバインドされる必要はありません。

それ以外、関数または親スコープが厳密モードにある場合： #

function someFunction() {
  'use strict';
  return this;
}

// Logs `true`:
console.log(someFunction() === undefined);

この場合には、thisの値は未定義です。親スコープが厳密モードにある場合（およびすべてのモジュールが厳密モードにある場合）、'use strict'は必要ありません。

それ以外： #

function someFunction() {
  return this;
}

// Logs `true`:
console.log(someFunction() === globalThis);

この場合には、thisの値はglobalThisと同じです 。

ふぅ！ #

以上です！それがthisについて把握しているのです。何かご質問はありませんか？見逃したものはありますか？お気軽にツイートしてください。

Mathias Bynens 、Ingvar Stepanyan 、とThomas Steinerに見直していただき、誠にありがとうございます。

最終更新

— 記事を改善する
Return to all articles
共有する
By Chrome DevRel