JavaScript の new 演算子を自分で実装する方法

コンストラクタ

new を導入する前に、コンストラクターとは何かを知っておく必要があります。

コンストラクタと通常の関数の書き方には違いはありません。関数が new Fun() を通じて呼び出される場合、それはコンストラクタと呼ばれ、コンストラクタの最初の文字は通常大文字になります。

関数 User(名前) {
    this.name = 名前;
}

u = new User('leo'); とします。

ここで、User はコンストラクタです。もちろん、User() を直接呼び出すこともできますが、これではインスタンスは作成されません。非厳密モードでは、name 属性がウィンドウにハングします。

新しいオペレーター

では、インスタンスを作成するために new 演算子は具体的に何を行うのでしょうか?

new 演算子は、ユーザー定義のオブジェクト タイプのインスタンス、またはコンストラクターを持つ組み込みオブジェクトのインスタンスを作成します。新しいキーワードは次の操作を実行します。

1. 空の単純な JavaScript オブジェクト (つまり **{}**) を作成します。

2. オブジェクトを別のオブジェクトにリンクします（つまり、オブジェクトのコンストラクターを設定します）。

3. 手順 1 で新しく作成したオブジェクトを **this** のコンテキストとして使用します。

4. 関数がオブジェクトを返さない場合は、**this** を返します。

上記は新しいオペレータ - MDN から引用したものです

おそらく手順 2 と 4 がよく理解されていないと思うので、ここでもう一度要約します。

1. 空のオブジェクトを作成する u = {}

2. プロトタイプをバインド、u.__proto__ = User.prototype

3. User() 関数を呼び出し、空のオブジェクト u を this として渡します。つまり、User.call(u) です。

4. User() 関数が実行後にオブジェクト型を返す場合はこの変数を返し、そうでない場合はこれを返します。注: コンストラクタが基本型の値を返す場合は影響を受けず、これを返します。

自分で新しいものを実装する

new 演算子の原理を理解した上で、FakeNew 関数を自分で実装してみましょう。

関数FakeNew() {
    obj = {} とします。
  
    // 配列のような引数を配列に変換し、コンストラクターである最初のパラメーターをシフトアウトします。letconstructor = [].shift.apply(arguments);  

    // プロトタイプをバインドします obj.__proto__ =constructor.prototype;    
  
    // コンストラクターを呼び出して、obj を次のように渡します。let res = Constructor.apply(obj, arguments);    

    // 戻り値 return typeof res === 'object' ? res : obj;   
}

関数 User(名前) {
    this.name = 名前;
}

User.prototype.getName = 関数() {
    this.name を返します。
}

u = FakeNew(User, 'leo') とします。
コンソールにログ出力します。
コンソールにログ出力します。

対応するキーステップのコメントがコードに添付されているので、新しい操作を実装しました。今後新しいものを見ると、より明確な感覚が得られると思います。

以上がJavaScriptのnew演算子を自分で実装する方法の詳細です。JavaScriptのnew演算子の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。