ホームページ > 記事 > ウェブフロントエンド > js は _new 関数と new キーワードの実装方法をカプセル化します (コード テストあり)
この記事では、_new 関数の js カプセル化と新しいキーワードの実装方法について説明します。必要な方は参考にしてください。
1. はじめに
誰もが知っているように、オブジェクトがない場合はどうすればよいでしょうか?それなら新しいのを買ってください!
それでは、JS でオブジェクトを新規作成するとき、new キーワードは内部で何をするのでしょうか?
ここで、ネイティブ JS の新しいキーワードの内部動作原理を分析してみましょう。
2. 元の新しい
まず、表示するオブジェクトを新規作成しましょう:
//创建Person构造函数,参数为name,age function Person(name,age){ this.name = name; this.age = age; } //实例化对象小明 xm = new Person('xiaoming',18); //打印实例化出来的对象小明 console.log(xm);
印刷結果から確認できます:
Use new When instant食事中キーワードを使用したオブジェクト、空のオブジェクト xm が最初に作成され、この空のオブジェクトには、コンストラクター内の 2 つの属性にそれぞれ対応する 2 つの属性が含まれています。次に、インスタンス化されたオブジェクト xm が Inherited であることもわかります。 Person.prototype から、オブジェクトをインスタンス化するときに new キーワードが内部的に何を行うかを要約できます。実際、new キーワードは次の 3 つのことを内部的に実行します (既知のコンストラクターは Func):
最初のパラメーター: コンストラクター関数名 Func;
2 番目以降のパラメーター: コンストラクターのパラメーターfunction _new(){ //1.拿到传入的参数中的第一个参数,即构造函数名Func var Func = [].shift.call(arguments); //2.创建一个空对象obj,并让其继承Func.prototype var obj = Object.create(Func.prototype); //3.执行构造函数,并将this指向创建的空对象obj Func.apply(obj,arguments) //4.返回创建的对象obj return obj }
4. Test_new 関数 の後に
はカプセル化されています。カプセル化された _new 関数をテストして、ネイティブの new キーワードと同じ機能を実現するかどうかを確認してみましょう。//创建Person构造函数,参数为name,age function Person(name,age){ this.name = name; this.age = age; } function _new(){ //1.拿到传入的参数中的第一个参数,即构造函数名Func var Func = [].shift.call(arguments); //2.创建一个空对象obj,并让其继承Func.prototype var obj = Object.create(Func.prototype); //3.执行构造函数,并将this指向创建的空对象obj Func.apply(obj,arguments) //4.返回创建的对象obj return obj } xm = _new(Person,'xiaoming',18); console.log(xm);
テスト結果から、_new 関数の機能が new キーワードと完全に一致していることがわかります。
関連する推奨事項:js の継承メソッドとは何ですか? jsで継承を実装するいくつかの方法を紹介します
小さな画像をクリックすると大きな画像が表示されるような効果を実現するjsの操作方法は? (コード例)
jsにおけるシャローコピーとディープコピーの簡単な紹介と実装方法
以上がjs は _new 関数と new キーワードの実装方法をカプセル化します (コード テストあり)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。