意味new 演算子は、ユーザー定義のオブジェクト タイプのインスタンス、またはコンストラクターを持つ組み込みオブジェクトのインスタンスを作成します。 オブジェクト インスタンスを作成するには、新しい [コンストラクター] メソッドを使用しますが、コンストラクターが異なると、異なるインスタンスが作成されます。 コンストラクタ本体は異なるコンストラクタも関数です。唯一の違いは呼び出し方法です。new 演算子で呼び出される関数はすべてコンストラクタであり、new 演算子で呼び出されない関数は通常の関数です。 したがって、コンストラクターにも戻り値がありますが、これにより new の結果が異なります。 戻り値なし関数 Person(名前) { this.name = 名前; } obj = new Person("Jalenl"); とします。 コンソールにログ出力します。 明らかに、印刷されているのは{name:'Jalenl'}です 戻りオブジェクト関数 Person(年齢) { this.age = 年齢; 戻り値: { name: "Jalenl" }; } obj = new Person(18); とする。 コンソールにログ出力します。 印刷されるのは {name:'Jalenl'} であり、これは return の前のすべての定義が上書きされることを意味します。ここで返されるのはオブジェクトですが、基本型の場合はどうなるでしょうか? 非オブジェクトを返す関数 Person(年齢) { this.age = 年齢; 1 を返します。 } obj = new Person(18); とする。 コンソールにログ出力します。 {age:21} を返します。これは戻り値が無効であることを意味し、戻り値がない場合と同じ結果になります。このバインドされた内部属性がなく、基本データ型が返された場合はどうなるでしょうか。 プロパティバインディングなし + 非オブジェクトを返す関数Person(){ 戻り値 1 } 新しい人() 返される値は、予想どおり、空のオブジェクト {} です。 要約すると、初期結果は、コンストラクターの戻り値がオブジェクト型を返す場合にのみ変更できます。 コンストラクタの型は異なりますコンストラクタは通常の関数であるECMA-262 第 3 版仕様では、オブジェクト インスタンスを作成するプロセスについて説明しています。
総括する:
5 番目のステップでは、異なるコンストラクターが異なる新しい結果につながる理由をすでに説明しました。 以下はMDNからの説明です。
コンストラクタは矢印関数である通常の関数が作成されると、エンジンは特定のルールに従って、この関数のプロトタイプ プロパティ (プロトタイプ オブジェクトを指す) を作成します。デフォルトでは、すべてのプロトタイプ オブジェクトは、関連付けられているコンストラクターを指すコンストラクターと呼ばれるプロパティを自動的に取得します。 関数Person(){ 18歳未満 } 人物プロトタイプ /** { コンストラクタ: ƒFoo() __proto__: オブジェクト } **/ 矢印関数を作成する場合、エンジンはそれのプロトタイプ プロパティを作成しません。矢印関数には new を呼び出すコンストラクターがないため、new を使用して矢印関数を呼び出すとエラーが発生します。 定数 Person = ()=>{} new Person() // TypeError: Foo はコンストラクタではありません 手書きの新着まとめると、new の動作原理を理解した後は、自分でロープロファイルバージョンの new を実装できます。実装の鍵は次のとおりです。
関数_new(コンストラクタ、...引数) { // コンストラクタ型の法的判断 if(typeof コンストラクタ !== 'function') { throw new Error('コンストラクタは関数である必要があります'); } // 新しい空のオブジェクトインスタンスを作成します。let obj = new Object(); // コンストラクターのプロトタイプを新しく作成されたオブジェクトインスタンスにバインドします。obj.__proto__ = Object.create(constructor.prototype); // コンストラクターを呼び出して戻り値を決定します。let res =constructor.apply(obj, args); isObject = typeof res === 'object' && res !== null とします。 isFunction = typeof res === 'function' とします。 // 戻り値があり、それがオブジェクト型である場合は、それを戻り値として使用し、それ以外の場合は以前に作成されたオブジェクトを返します。 return isObject || isFunction ? res : obj; }; この目立たない new 実装は、カスタム クラスのインスタンスを作成するために使用できますが、組み込みオブジェクトはサポートされません。結局のところ、new は演算子であり、基礎となる実装はより複雑です。 要約するJS における new の原理と実装に関するこの記事はこれで終わりです。JS における new の原理と実装に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: ウェブデザインにおけるポップアップウィンドウとフローティングレイヤーのデザイン
この記事では、VMware Workstation Pro で Win10 オペレーティング システ...
本日、MySQLの圧縮版をインストールする際に問題が発生しました。サービスが起動できず、2、3時間苦...
HTML メタビューポート属性の説明ビューポートとはモバイル ブラウザは、Web ページを仮想の「ウ...
1. 監視計画監視項目を作成する前に、何を監視するのか、どのように監視するのか、監視データをどのよう...
目次現状解決さらなる解決策やっと現状WeChat ミニプログラムには、ホームページ、個人ページ、いく...
問題: mybatis によって返される null 型のデータが消え、フロントエンドの表示にエラーが...
序文私たちの日常の開発プロセスでは、ソートが頻繁に使用され、そのような要求がある場合もあります。たと...
MySQL には、主に left()、right()、substring()、substring_i...
目次環境: 1. Dockerはリモート接続アクセスを可能にするidea dockerプラグインをイ...
Web ページの読み込み速度は、Web サイトの品質を評価するための重要な指標です。その理由は、ほと...
Vim は強力なフルスクリーン テキスト エディターであり、Linux/UNIX で最も一般的に使用...
この記事は主にMySQLデータ移行方法とツールの分析を紹介します。サンプルコードを通じて詳細に紹介さ...
問題の起源私がタイトルの番号付けの問題に初めて注目したのは、学部の論文を書いていた頃まで遡ります。当...
以前のブログでは、Tomcatのサーバーの各コンポーネントの使用について学びました。 Tomcatは...
まず、action はフォームの属性です。HTML5 では必須の属性値として定義されています。onS...