JavaScriptの'this'キーワードを理解する

'これ' JavaScript

で JavaScript というのは、より複雑だからである。 これ を参照するかどうかは、関数の定義だけでなく、その関数を呼び出す形式にも依存する。

どのように これ は、呼び出しの場所と形式に応じて機能する。

グローバル・コンテキスト

のように、グローバルオブジェクトにバインドされたグローバルコンテキストで使用される。 ウィンドウ をウェブブラウザで表示する。

this; // ウィンドウ

オブジェクト・メソッド内部

最も近いオブジェクトにバインドされたオブジェクト・メソッドの内部で使われる。オブジェクトは これ キーワードを使用します。を変更してはならないことに注意してください。 関数 ES6構文へ fun: () => this.context 文脈が変わってしまうからだ。

const obj = {
  コンテキスト："object"、
  fun: function() {
    return this.context；
  }
};

obj.fun(); // オブジェクト

この例では、ネストされたオブジェクトを使っている、 これ それでも、最も近い文脈を指している。

const nestedObj = {.
  コンテキスト："parent"、
  子：{
    コンテキスト"child"、
    fun: function() {
      return this.context；
    }
  }
};

nestedObj.child.fun(); // 子

コンテキストレス機能

その関数がオブジェクトの内部で定義されていても、グローバルコンテキストにバインドされたコンテキストを持たない（親となるオブジェクトを持たない）関数の内部で使用される。

を使用していることに留意されたい。 コンテキスト の代わりに let/const コンテキスト なぜなら レット そして コンスト 変数に囲まれたコンテキストを変更する。 ヴァール は常にグローバルな実行コンテキストに最も近い。 レット そして コンスト ローカル・ブロック・スコープでのみ変数を宣言する。

var context = "global"；

コンストラスト obj = {
  コンテキスト："object"、
  funA: function() {
    funB() {
      const context = "function"；
      return this.context；
    }
    return funB(); // コンテキストなしで呼び出される。
  }
};

obj.funA(); // グローバル

コンストラクタ関数内部

コンストラクタにバインドされた新しいオブジェクトのコンストラクタである関数の内部で使用される。

var context = "global"；

関数 Obj() {
  this.context = "Obj context"；
}

const obj = new Obj()；
obj.context; // Objコンテキスト

プロトタイプ・チェインで定義された関数内部

プロトタイプ・チェインで定義された関数の内部で使用され、その関数にバインドされたオブジェクトを生成する。

const ProtoObj = { { { ProtoObj = { { ProtoObj = {
  fun: function() {
    return this.name；
  }
};

const obj = Object.create(ProtoObj)；
obj.name = "foo"；
obj.fun(); // foo

内部 call() および apply() 関数

call() そして apply() は JavaScript 関数である。これを使えば、オブジェクトは他のオブジェクトのメソッドを使うことができる。 call() は別々に引数を取る。 apply() を配列として受け取る。

これ で変更された新しいコンテキストにバインドされる。 call() そして apply() のメソッドがある。

const objA = {
  コンテキスト："objA"、
  fun: function() {
    console.log(this.context, arguments)；
  }
};

コンストラスト objB = {
  コンテキスト："objB"
};

objA.fun(1, 2); // objA, [1, 2].
objA.fun.call(objB, 1, 2, 3); // objB, [1, 2, 3].
objA.fun.apply(objB, [1, 2, 3, 4]); // objB, [1, 2, 3, 4].

bind()関数の内部

バインド もJavaScriptメソッドである。このメソッドは これ に渡される最初のパラメータに設定される。 bind()**.**

const objA = {
  コンテキスト："objA"、
  fun: function() {
    console.log(this.context, arguments)；
  }
};

コンストラスト objB = {
  コンテキスト："objB"
};

const fun = objA.fun.bind(objB, 1, 2)；
fun(3, 4); // objB, [1, 2, 3, 4].

イベントハンドラ内部

任意のイベント・ハンドラで使用される（例えば、 addeventListener、onclick、attachEvent。)、イベントがアタッチされたDOM要素にバインドされる。

document.querySelector(".foo").addEventListener("click", function() {)
  this; // `foo` div要素を参照する。
});

ES6 矢印関数

アロー関数の内部で使用すると、常にレキシカルスコープにバインドされます。アロー関数の中では これ どんな形であれ。

const globalArrowFunction = () => this；

globalArrowFunction(); // ウィンドウ

const obj = {
  コンテキスト："object"、
  funA: () => this、
  funB: function() {
    return () => {
      return this.context；
    };
  }
};

obj.funA(); // ウィンドウ
obj.funB()(); // オブジェクト

続きを読む

• カスタム・ソフトウェア開発における最大の課題
• ソフトウェアハウスとIT人材派遣会社の違いは何ですか？