ホームページ > ウェブフロントエンド > jsチュートリアル > js は _new 関数と new キーワードの実装方法をカプセル化します (コード テストあり)

js は _new 関数と new キーワードの実装方法をカプセル化します (コード テストあり)

不言
リリース: 2018-08-13 10:30:09
オリジナル
2354 人が閲覧しました

この記事では、_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.prototype を継承させます。

コンストラクターを実行して、作成したばかりの新しいオブジェクトを指定します。
  1. 3 つ目は、_new 関数をカプセル化することです。 new キーワードの内部原理がわかっているので、_new 関数をカプセル化して、new キーワードと同じ関数に使用できるようにします。
  2. _new 関数は次のパラメーターを渡す必要があります:

    最初のパラメーター: コンストラクター関数名 Func;

    2 番目以降のパラメーター: コンストラクターのパラメーター
  3. 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 サイトの他の関連記事を参照してください。

関連ラベル:
new
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート