JavaScriptの基礎を詳しく解説

JavaScript の 関数 の this オブジェクト は、関数が実行されるスコープです (例: 関数が Web ページのグローバル スコープで呼び出される場合、 が参照する this オブジェクト は窓）。

JavaScript のこれは、Java などのオブジェクト指向言語のこれとは大きく異なります。bind()、call()、および apply() 関数は、この柔軟性をさらに拡張します。 読みやすさを確保するために、この記事では直訳ではなく意訳を使用しています。また、この記事の著作権は原著者に帰属し、翻訳は学習のみを目的としています。

JavaScript キーワードを十分に理解していないと、予期せぬ落とし穴に陥ることがあります。ここでは、これが実際に何を指すのかを判断するのに役立つ 5 つの一般的なルールをまとめました。すべての状況がカバーされているわけではありませんが、日常のほとんどの状況はこれらのルールを使用して正しく推測できます。

this の値は通常、関数の実行環境によって決まります。つまり、関数の呼び出し方法に依存します。

同じ関数が呼び出されるたびに、これは異なるオブジェクトを指す可能性があります。

グローバル オブジェクト。 (グローバル

オブジェクト)

Chr

ome ブラウザ開発者パネルを開き (Windows: Ctrl + Shift + J) (Mac: Cmd + Option + J)、次のように入力して確認します:

console.log(this);

出力は何ですか？

えー

ウィンドウオブジェクト

! グローバル スコープでは、これはグローバル オブジェクトを指すためです。ブラウザ内のグローバル オブジェクトはウィンドウ オブジェクトです。 これが window オブジェクトを指す理由をより明確に理解するために、別の例を見てみましょう:

// Window {}

var myName = 'Brandon';

実際、グローバルに定義されたすべての

変数

は window オブジェクトにバインドされています。次のテストを行ってみましょう:

myName
// 输出 'Brandon'

これを関数内に入れて、その効果を見てみましょう。

window.myName
// 输出 'Brandon'
window.myName === myName
// 输出 true

これがまだグローバル ウィンドウ オブジェクトを指していることがわかります。 this キーワードは宣言されたオブジェクト内にないため、デフォルトでグローバル ウィンドウ オブジェクトになります。これはほとんどの初心者にとっては理解するのが少し難しいかもしれません。この記事を読むと、突然理解できるようになります。

注: strcit モードの場合、上記の例ではこれは未定義です。

宣言されたオブジェクト (

Declared オブジェクト)
this キーワードが宣言されたオブジェクト内で使用される場合、その値は、this を呼び出す関数の最も近い親オブジェクトにバインドされます。この問題を説明するために例を使用してみましょう:

function test(){
 return this;
}
test();

これが宣言されたオブジェクト person の完全な関数で使用される場合、これを呼び出す完全な関数の最も近い親オブジェクトは person であるため、これは person を指します。

これが実際に person オブジェクトを指していることをよりわかりやすく説明するには、次のコードをブラウザのコンソールにコピーして、これを出力します。

var person = {
 first: 'John',
 last: 'Smith', 
 full: function() {
  console.log(this.first + ' ' + this.last);
 }
};
person.full();
// 输出 'John Smith'

次に、より複雑な例を見てみましょう:

var person = {
 first: 'John',
 last: 'Smith', 
 full: function() {
  console.log(this);
 }
};
person.full();
// 输出 Object {first: "John", last: "Smith", full: function}

ここにはネストされたオブジェクトがありますが、これは誰を指しているのでしょうか。 これを印刷して見てみましょう:

var person = {
 first: 'John',
 last: 'Smith',
 full: function() {
  console.log(this.first + ' ' + this.last);
 },
 personTwo: {
  first: 'Allison',
  last: 'Jones',
  full: function() {
   console.log(this.first + ' ' + this.last);
  }
 }
};

前に説明したルールが満たされていることがわかります。その値は、これを呼び出した関数の最も近い親オブジェクトにバインドされます。

newKeyword
new キーワードを使用して新しいオブジェクトを構築すると、これはこの新しいオブジェクトにバインドされます。例を見てみましょう:

person.full();
// 输出 'John Smith'
person.personTwo.full();
// 输出 'Allison Jones'

最初のルールに基づいて、これがグローバル オブジェクトを指していると推測できます。ただし、 new キーワードを使用して新しい変数を宣言すると、Car 関数の this は新しい空のオブジェクトにバインドされ、this.make と this.model の値が初期化されます。

function Car(make, model) {
 this.make = make;
 this.model = model;
};

call、bind、apply

call()、bind()、apply() で this のバインディング オブジェクトを明示的に設定できます。これら 3 つの機能は非常に似ていますが、微妙な違いに注意する必要があります。

例を見てみましょう: this.a と this.b が未定義であるため、

var myCar = new Car('Ford', 'Escape');
console.log(myCar);
// 输出 Car {make: "Ford", model: "Escape"}

add 関数は NaN を出力します。

ここでオブジェクトを導入し、call() と apply() を使用して呼び出します。

function add(c, d) {
 console.log(this.a + this.b + c + d);
}
add(3,4);
// 输出 NaN

add.call() を使用する場合、最初のパラメータはバインドする必要があるオブジェクトで、残りは関数自体のパラメータを追加します。

したがって、this.a は ten.a を指し、this.b は ten.b を指します。 add.apply() は、2 番目のパラメーターが add

関数のパラメーター
を格納するために使用される array である点を除いて似ています。

bind()函数和call()类似，但是bind()函数不会立即被调用。bind()函数会返回一个函数，并且将this绑定好。接下来我们来用例子来帮助理解bind()函数的应用场景：

var small = {
 a: 1,
 go: function(b,c,d){
  console.log(this.a+b+c+d);
 }
}
var large = {
 a: 100
}

执行:

small.go(2, 3, 4);
// 输出 10

如果我们想使用large.a的值，而不是small.a呢？ 我们可以使用call/apply:

small.go.call(large, 2, 3, 4);
// 输出 109

但是，如果我们现在还不知道这三个参数应该传入什么值，应该怎么办呢？ 我们可以使用bind:

var bindTest = small.go.bind(large, 2);

如果我们将bindTest在控制台下打印出来，我们会看到：

console.log(bindTest);
// 输出 function (b,c,d){console.log(this.a+b+c+d);}

注意：该函数已经将this绑定到large对象，并且传入了第一个参数b。所以，我们接下来是需要传入余下的参数即可：

bindTest(3, 4);
// 输出 109

箭头函数(=>)

因为需要很大的篇幅，我们会专门写一篇博客来介绍。

结论

当你读完这篇博客，你应该可以理解大多数情况下this指向的对象。
接下来我们来总结一下：

this的值通常是由当前函数的执行环境所决定；
在全局作用域，this指向全局对象 (window对象)；
当使用new关键字声明，this指向新建对象；
我们可以使用call(), bind(), apply()来设置this；
箭头函数不会绑定this。

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