JavaScript の新機能とこれを深く掘り下げる: オブジェクト指向プログラミングの力を解き放つ

JavaScript は、関数型プログラミングにルーツがあり、オブジェクト指向プログラミング (OOP) の機能を備えた強力で柔軟な言語です。 JavaScript の OOP の中心にある 2 つの重要な概念は、新しいものとこれで​​す。これらのキーワードは簡単そうに見えますが、経験豊富な開発者であってもマスターするのが難しいニュアンスがあります。このブログ投稿では、JavaScript の new と this の仕組みを深く掘り下げ、例とベスト プラクティスを使用してそれらの動作を分析します。

---

目次

JavaScript でのこれについての紹介

本質的に、これは関数の呼び出し元のオブジェクトを参照するコンテキスト依存のキーワードです。 this が静的にバインドされている他の言語とは異なり、JavaScript では this の値は、関数が呼び出される方法と場所に応じて変化する可能性があります。

簡単に言うと:

• グローバル スコープ: グローバル コンテキスト (または非厳密モード) では、これはグローバル オブジェクト (ブラウザーのウィンドウ、Node.js のグローバル) を指します。
• メソッド内: オブジェクト メソッド内で、メソッドを所有するオブジェクトを指します。
• イベント ハンドラー: イベント リスナーでは、これは通常、イベントをトリガーした要素を指します。

これらのコンテキストについては、後ほどブログで例を示して説明します。

---

JavaScript の新機能を理解する

JavaScript の new キーワードは、ユーザー定義オブジェクトまたは日付、配列などの組み込みオブジェクトのインスタンスを作成するために使用されます。コンストラクター関数で new を使用すると、新しいオブジェクトが作成され、これがそのオブジェクトにバインドされます。 、基本的にプロトタイプにリンクします。

例:

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

const myCar = new Car("Tesla", "Model 3");
console.log(myCar); // { make: 'Tesla', model: 'Model 3' }

新品使用時:

1. 新しい空のオブジェクトが作成されます。
2. コンストラクター内の this キーワードは、この新しいオブジェクトを参照するように設定されます。
3. 関数はコードを実行し、これにプロパティを割り当てます。
4. オブジェクトはコンストラクターのプロトタイプにリンクされ、継承が可能になります。
5. オブジェクトが明示的に返されない限り、この関数はこれを返します。

---

新しい仕組みが内部でどのように機能するか

カスタム関数を使用して new の動作をシミュレートしてみましょう:

function simulateNew(constructor, ...args) {
  const obj = {}; // Step 1: Create a new empty object
  Object.setPrototypeOf(obj, constructor.prototype); // Step 2: Link the object to the constructor's prototype
  const result = constructor.apply(obj, args); // Step 3: Bind this and execute the constructor
  return result instanceof Object ? result : obj; // Step 4: Return the object
}

function Person(name) {
  this.name = name;
}

const john = simulateNew(Person, "John Doe");
console.log(john.name); // John Doe

この関数は新しいキーワードと同じ手順に従い、舞台裏の仕組みを示します。

---

さまざまな状況におけるこの例

1. グローバルコンテキスト

グローバル コンテキスト (非厳密モード) では、これはグローバル オブジェクト (ブラウザーのウィンドウ) を指します。

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

function showThis() {
  console.log(this); // window
}

showThis();

厳密モード ('use strict';) では、これはグローバル コンテキストで未定義です:

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

const myCar = new Car("Tesla", "Model 3");
console.log(myCar); // { make: 'Tesla', model: 'Model 3' }

1. オブジェクト メソッド コンテキスト

これがオブジェクト メソッド内で使用される場合、メソッドを所有するオブジェクトを参照します。

function simulateNew(constructor, ...args) {
  const obj = {}; // Step 1: Create a new empty object
  Object.setPrototypeOf(obj, constructor.prototype); // Step 2: Link the object to the constructor's prototype
  const result = constructor.apply(obj, args); // Step 3: Bind this and execute the constructor
  return result instanceof Object ? result : obj; // Step 4: Return the object
}

function Person(name) {
  this.name = name;
}

const john = simulateNew(Person, "John Doe");
console.log(john.name); // John Doe

ここでは、これは、greet メソッドが呼び出されるコンテキストであるため、person オブジェクトを指します。

1. コンストラクター関数コンテキスト

コンストラクター関数では、これは新しく作成されたオブジェクトを参照します。

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

function showThis() {
  console.log(this); // window
}

showThis();

1. イベントハンドラーコンテキスト イベント ハンドラーでは、これはイベントをトリガーした DOM 要素を指します。

"use strict";

function showThis() {
  console.log(this); // undefined
}

showThis();

イベント リスナーでアロー関数を使用する場合、これは字句的に制限され、要素を参照しません:

const person = {
  name: "Alice",
  greet() {
    console.log(this.name); // 'Alice'
  },
};

person.greet();

---

ベストプラクティスとよくある落とし穴

1. アロー関数と this: アロー関数は、それ自体の this をバインドしません。代わりに、周囲の語彙コンテキストからこれを継承します。これは、イベント ハンドラーやコールバックなど、親スコープへの参照を維持する必要がある状況で役立ちます。

function Animal(type) {
  this.type = type;
}

const dog = new Animal("Dog");
console.log(dog.type); // Dog

1. .call()、.apply()、.bind() による明示的なバインディング: これらのメソッドを使用して、this の値を手動で制御できます。例えば：

const button = document.querySelector("button");

button.addEventListener("click", function () {
  console.log(this); // the button element
});

1. グローバル関数ではこれを使用しないでください: 特に厳密モードでは、予期しない動作が発生する可能性があるため、一般にグローバル関数ではこれを使用しないことをお勧めします。

2. クラス構文: ES6 以降、クラス構文を使用すると、this および new でコンストラクター関数を定義するためのより直感的な方法が提供されます。
   

button.addEventListener("click", () => {
  console.log(this); // refers to the outer scope (e.g., window)
});

---

結論

new キーワードと this キーワードは、JavaScript のオブジェクト指向パラダイムにおいて極めて重要な役割を果たし、オブジェクトとその動作の作成と管理を可能にします。これがさまざまなコンテキストでどのように機能するか、およびオブジェクトのインスタンスを新規に構築する方法を理解することは、堅牢でスケーラブルな JavaScript コードを作成するために重要です。これらの概念をマスターすることで、よくある落とし穴を回避し、よりクリーンで保守しやすいコードを作成できます。

実験とサンプルの作成を続けて、JavaScript の核となる概念の理解を深めてください。

---

読んでいただけましたか?この記事が洞察力に富んだ、または役立つと思われた場合は、コーヒーをおごって私の仕事を支援することを検討してください。あなたの貢献は、このようなコンテンツをさらに増やすのに役立ちます。ここをクリックしてバーチャルコーヒーをごちそうしてください。乾杯！

以上がJavaScript の新機能とこれを深く掘り下げる: オブジェクト指向プログラミングの力を解き放つの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。