こんにちは、

この記事ではthis、JavaScript で使用されるコンテキストに応じて、キーワードのさまざまな値を説明しようとします。

グローバル スコープ

グローバル スコープでthisは、グローバル オブジェクト ( windowWeb 上およびglobalNode.js 内) を参照します。

globalThisグローバルオブジェクトに到達するプラットフォームに依存しない方法としても使用できます。

// global scope (web)

console.log(this === window); // true
console.log(this === globalThis); // true

非アロー関数内では、 will の値は関数の呼び出し方法thisによって異なります。

スタンドアロン関数として呼び出される

• 非厳密モードでは、グローバル オブジェクトを参照します。 this

function getThis() {
  return this;
}

console.log(getThis() === globalThis); // true

"use strict"

function getThis() {
  return this;
}

console.log(getThis() === undefined); // true

const bar = {
  getThis: function() {
    return this;
  }
};

console.log(bar.getThis() === bar); // true

const baz = {};
baz.getThis = bar.getThis;

console.log(baz.getThis() === baz); // true

// Called as a standalone function
const getThis = bar.getThis;
console.log(getThis() === globalThis); // true (`false` in strict mode)

クラス メソッドは、オブジェクト リテラルのメソッドと同じように動作します。

アロー関数

アロー関数の内部では、 の値はthis それを囲んでいる字句コンテキストの値と等しくなります。

つまり、アロー関数を評価するとき、JS エンジンは新しいバインディングを作成せずthis、周囲のスコープで使用可能なバインディングを使用します。

// (1) `this` equals to `globalThis` here

const foo = {
  getThis: () => this
};

console.log(foo.getThis() === foo); // false
console.log(foo.getThis() === globalThis); // true (1)
// (1) `this` equals to `globalThis` here

const bar = {
  getArrowFn: function() {
    // (2) `this` equals to `bar` or `baz` here 
    // depending on how the function is called below
    
    return () => this;
  }
};

console.log(bar.getArrowFn()() === bar); // true (2)
console.log(bar.getArrowFn()() === globalThis); // false (1)

const baz = {};
baz.getArrowFn = bar.getArrowFn;

console.log(baz.getArrowFn()() === baz); // true (2)
console.log(baz.getArrowFn()() === globalThis); // false (1)

関数コンストラクター

コンストラクターとして (newキーワードを使用して)使用される関数内でthisは、関数がどのようにアクセスされるかに関係なく、構築される新しいオブジェクトにバインドされます。

function Bar() {
  this.baz = 42;
}

let a = new Bar();
console.log(a.baz); // 42
const bar = {
  baz: function() {
    this.foo = 42;
  }
};

let a = new bar.baz();
console.log(a.foo); // 42
console.log(bar.foo); // undefined

function Bar() {
  this.baz = 42;
  return { baz: 44 };
}

let a = new Bar();
console.log(a.baz); // 44 (not 42)

適用()、呼び出し()

call()およびメソッドを使用して、非アロー関数でapply()の値を明示的に設定できます。this

function getThis() {
  return this;
}

const bar = {
  getThis: function() {
    return this;
  }
};

console.log(getThis() === globalThis); // true
console.log(bar.getThis() === bar); // true

const myThis = {};

console.log(getThis.call(myThis) === myThis); // true
console.log(getThis.apply(myThis) === myThis); // true

console.log(bar.getThis.call(myThis) === myThis); // true
console.log(bar.getThis.apply(myThis) === myThis); // true

アロー関数で使用すると、thisパラメーターは無視されます (ただし、これらのメソッドを使用して関数の引数を渡すことはできます)。

// (1) `this` equals to `globalThis` here

const getThis = () => this;

console.log(getThis() === globalThis); // true

const myThis = {};

console.log(getThis.call(myThis) === globalThis); // true
console.log(getThis.apply(myThis) === globalThis); // true

このbind()関数は、特定のオブジェクトにバインドされる新しい関数を作成するために使用されます。

これは、新しい関数が呼び出されると、thisキーワードがバインド先のオブジェクトを参照することを意味します。

function getThis() {
  return this;
}

console.log(getThis() === globalThis); // true

const myThis = {};
const getMyThis = getThis.bind(myThis);

console.log(getMyThis() === myThis); // true
console.log(getMyThis.call(globalThis) === myThis); // true
console.log(getMyThis.apply(globalThis) === myThis); // true

アロー関数で使用すると、thisパラメーターは無視されます (ただし、これらのメソッドを使用して関数の引数を渡すことはできます)。

// (1) `this` equals to `globalThis` here

const getThis = () => this;

console.log(getThis() === globalThis); // true

const myThis = {};
const getMyThis = getThis.bind(myThis);

console.log(getMyThis() === globalThis); // true
console.log(getMyThis.call(myThis) === globalThis); // true
console.log(getMyThis.apply(myThis) === globalThis); // true