JavaScriptでの使い方を詳しく解説

これにどのようなルールがあるかを確認したい場合、このメソッドは実際には非常に簡単です。関数が呼び出されるときにその呼び出し位置を確認することで、これを決定します。この記事で Script House のエディターに従って学習してみましょう

。関数内でこれが何であるかを決定するためのルール。

これが何であるかを判断するのは実際には非常に簡単です。一般的なルールは、関数が呼び出されたときに、その関数が呼び出された場所を確認することによってこれを判断することです。次に優先順位に従って説明するルールに従います。

ルール

1. 関数を呼び出すときに new キーワードを使用すると、関数内の this はまったく新しいオブジェクトになります。

function ConstructorExample() {
  console.log(this);
  this.value = 10;
  console.log(this);
}
new ConstructorExample();
// -> {}
// -> { value: 10 }

2. apply、call、bind を使用して関数を呼び出す場合、関数内の this はパラメーターとして渡されるオブジェクトです。

function fn() {
  console.log(this);
}
var obj = {
  value: 5
};
var boundFn = fn.bind(obj);
boundFn();   // -> { value: 5 }
fn.call(obj); // -> { value: 5 }
fn.apply(obj); // -> { value: 5 }

3. 関数がメソッドとして呼び出された場合、つまり、関数がドット表記を使用して呼び出された場合、これはこの関数を属性として持つオブジェクトです。つまり、ポイントが関数呼び出しの左側にある場合、これはポイントの左側にあるオブジェクトになります。

var obj = {
  value: 5,
  printThis: function() {
    console.log(this);
  }
};
obj.printThis(); // -> { value: 5, printThis: ƒ }

4. 関数が純粋関数として呼び出された場合、つまり上記の条件を何も指定せずに呼び出された場合、これはグローバル オブジェクトです。ブラウザでは、これはウィンドウ オブジェクトです。

function fn() {
  console.log(this);
}
// 如果在浏览器里调用：
fn(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}

このルールは実際には 3 番目のルールと同じです。違いは、メソッドとして宣言されていない関数が自動的にグローバル オブジェクト ウィンドウの属性になることです。したがって、これは実際には暗黙的なメソッド呼び出しです。 fn() を呼び出すと、実際にはブラウザによって window.fn() として認識されるため、これは window です。

console.log(fn === window.fn); // -> true

5. 上記のルールが複数適用される場合、優先度の高いルールがこの値を設定します。

6. ES2015 のアロー関数の場合、上記のルールをすべて無視し、作成時にそれを含むスコープを this の値として受け取ります。これが何であるかを判断するには、アロー関数を作成した場所から 1 行上に移動し、アロー関数内の this の値が同じであることを確認します。

const obj = {
  value: 'abc',
  createArrowFn: function() {
    return () => console.log(this);
  }
};
const arrowFn = obj.createArrowFn();
arrowFn(); // -> { value: 'abc', createArrowFn: ƒ }

3 番目のルールを振り返ると、obj.createArrowFn() を呼び出すと、これはメソッド呼び出しであるため、createArrowFn のこれは obj になります。したがって、obj は arrowFn でこれにバインドされます。グローバル スコープでアロー関数を作成すると、この値は window になります。

ルールの適用

コード例を見て、これらのルールを適用してみましょう。試してみて、さまざまな関数呼び出しでこれが何であるかを理解できるかどうかを確認してください。

どのルールが適用されるかを決定する

var obj = {
  value: 'hi',
  printThis: function() {
    console.log(this);
  }
};
var print = obj.printThis;
obj.printThis(); // -> {value: "hi", printThis: ƒ}
print(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}

obj.printThis() は 3 番目のルールであるメソッド呼び出しに属します。一方、print() はルール 4、純粋な関数呼び出しに該当します。 print() の場合、呼び出し時に new、bind/call/apply、またはドット表記を使用しなかったので、これはルール 4 に相当し、これはグローバル オブジェクト ウィンドウです。

複数のルールが適用される場合

複数のルールが適用される場合は、リスト内で優先度の高いルールを使用します。

var obj1 = {
  value: 'hi',
  print: function() {
    console.log(this);
  },
};
var obj2 = { value: 17 };

ルール 2 とルール 3 が同時に適用される場合、ルール 2 が優先されます。

obj1.print.call(obj2); // -> { value: 17 }

ルール 1 とルール 3 の両方が適用される場合は、ルール 1 が優先されます。

new obj1.print(); // -> {}

Library

一部のライブラリは、この値を意図的に特定の関数にバインドすることがあります。通常、最も有用な値は関数内でこれにバインドされます。たとえば、jQuery はこれを DOM 要素にバインドし、コールバックでイベントをトリガーします。ライブラリの this 値が上記の規則に準拠していない場合は、bind を使用してバインドされている可能性がありますので、ライブラリのドキュメントをよく読んでください。

以上がJavaScriptでの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。