JS での new の手書き実装

JS での new の手書き実装

⚠ 前提条件:

  • プロトタイプとプロトタイプチェーンを理解する
  • このバインディングを理解する

1 新しいオペレータの紹介

MDN ドキュメント: new演算子は、ユーザー定義のオブジェクト タイプのインスタンス、またはコンストラクターを持つ組み込みオブジェクトのインスタンスを作成します。

クラス Person {
    コンストラクタ(名前) {
        this.name = 名前;
    }
}
// カスタムオブジェクトタイプのインスタンスを作成する const person = new Person('Xiao Ming')
// コンストラクタを使用して組み込みオブジェクトのインスタンスを作成する const date = new Date()


newの役割:オブジェクトのインスタンスを作成する

2 新しいものは何をしましたか?

上で、 newの機能はオブジェクトのインスタンスを作成することだと述べましたが、インスタンスはどのように作成され、内部では何が行われるのでしょうか。

new Person() を例に挙げてみましょう。これを実行すると、次のことが起こります。

空のシンプルなJSオブジェクトを作成する

定数オブジェクト = {}


このオブジェクトに属性__proto__,を追加し、その属性をコンストラクタのプロトタイプオブジェクトにリンクします。

obj.__proto__ = Person.プロトタイプ


コンストラクタPersonを呼び出し、 this新しく作成されたオブジェクトobjにバインドします。

Person.apply(オブジェクト)


コンストラクタが明示的にオブジェクトを返さない場合は、新しく作成されたオブジェクト、つまりobjが返されます。

3 新しい演算子の実装をシミュレートする

上で述べたように、 new演算子は 4 つのことを行います。関数を使用して、これらの 4 つの手順に従ってnewの実装をシミュレートしてみましょう (インタビュー用の手書きコード)

const _new = 関数(コンストラクタ、...引数) {
    定数オブジェクト = {}
    obj.__proto__ = コンストラクタ.prototype
    const res = コンストラクタ.apply(obj, args)
    // この手順については「補足」で詳しく説明します return res instanceof Object ? res : obj
}

コードは非常にシンプルで、上記の4つの手順に従って段階的に記述するだけです。

4 補足

ES5にはObject.createメソッドが用意されており、これを使用するとオブジェクトを作成し、新しいオブジェクトの__proto__プロパティが既存のオブジェクトを指すようにすることができます。

この方法を使ってステップ1と2を組み合わせることができます

const obj = Object.create(コンストラクタ.プロトタイプ)
// const obj = {} と同等
obj.__proto__ = コンストラクタ.prototype

ステップ4では、

  • コンストラクターが明示的にreturnない場合 (通常)、 personは新しく作成されたオブジェクトobj
  • コンストラクタが1や「abc」などのオブジェクトを返さない場合、 person新しく作成されたオブジェクトobjのままです。
関数Person() {
    ...
   戻り値 1
}

コンストラクタが明示的にオブジェクトを返す場合(例: {}function() {}

この場合、 person新しく作成されたオブジェクトobjではなく、明示的にreturnオブジェクトになります。

関数Person() {
  // 関数もオブジェクトです return function() {}
}

したがって、_new 関数の最後のコード行は次のようになります。

res インスタンスオブオブジェクトを返します? res : obj


注:シミュレートされた関数_newに渡されるパラメータは、クラスではなくコンストラクタのみです。

class Animal { ...}_new(Animal) // エラーを報告します: クラスコンストラクタ Animal は 'new' なしでは呼び出せません // クラスは new を使用してのみ作成できます

JS での new の手書き実装に関するこの記事はこれで終わりです。JS でのより関連性の高い new コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JSコンストラクタとインスタンス化およびプロトタイプ導入の関係
  • JavaScriptプロトタイプと例の詳細な説明
  • Js の継承とプロトタイプチェーンを理解するのに役立つ記事
  • JavaScriptプロトタイプチェーン図のまとめと実践
  • JS の new 関数の詳細な説明
  • JavaScript のコンストラクター、プロトタイプ、プロトタイプ チェーン、new についてどれくらい知っていますか?

<<:  Html、sHtml、XHtml の違いのまとめ

>>:  MySQL InnoDB ストレージエンジンのメモリ管理の詳細な説明

推薦する

ElementUI コンポーネント el-dropdown (落とし穴)

選択して変更: クリックすると現在の値が表示され、ページ UI が表示され、CSS スタイルが変更さ...

Vue 2つのフィールドの共同検証によりパスワード変更機能を実現

目次1. はじめに2. ソリューションの実装2.1 実装コード2.2 コードの説明2.3 検証結果1...

Vue で計算プロパティを使用する際の知識ポイントのまとめ

計算されたプロパティ場合によっては、テンプレートにロジックを詰め込みすぎると、テンプレートが重くなり...

Docker 大規模プロジェクトのコンテナ化変革

仮想化とコンテナ化は、クラウドベースのプロジェクトでは避けられない 2 つの問題です。仮想化は純粋な...

Reactプロジェクトで要素を使用する方法

React プロジェクトで要素フレームワークを使用するのは今回が初めてです。非常に単純な問題に遭遇し...

nginx 503 サービスが一時的に利用できない問題を解決する方法

最近、ウェブサイトを更新すると、503 Service Temporarily Unavailabl...

建国記念日が近づいています。JS を使用して、建国記念日風のアバターを生成する小さなツールを実装します。実装プロセスの詳細な説明

目次1. ページレイアウト2. 画像のアップロードと表示3. キャンバスを初期化する4. テンプレー...

MySQL 実行ステータスの表示と分析

MySQL のパフォーマンスに問題があると思われる場合は、通常、まずshow processlist...

PhpStormがVirtualBoxに接続できない問題を解決する

問題の説明: phpstorm の SFTP ホストを 192.168.122.1 に設定すると、接...

docker を使用して Kong クラスター操作を構築する

docker コンテナの下に kong クラスターを構築するのは非常に簡単です。公式サイトの紹介も非...

美しい FLASH ウェブサイト デザイン例 50 選

Flashにより、デザイナーや開発者はブラウザ上でリッチなコンテンツを提供し、動き、インタラクティブ...

自己終了XHTMLタグを書くときに注意すべきこと

XHTMLの img タグは、次のように記述する必要があります: <img alt="...

SSM VUE Axios の詳細な説明

目次SQL ログを表示するにはどうすればいいですか? ? SpringMVC でのパラメータ渡しの説...

Linux ハードウェア構成コマンドの例

ハードウェア ビュー コマンドシステム # uname -a # カーネル/オペレーティング システ...

dockerでrabbitmqをインストールすると管理ページに入れなくなる問題

1. 環境整備Tencent Cloud Server CENTOS 7 バージョンDockerコン...