JS の継承を理解する

js のプロトタイプ継承

プロトタイプ チェーンは、js 継承を実装するための主な方法です。その原理は、プロトタイプを使用して、ある参照型のプロパティとメソッドを継承させることです。プロトタイプ オブジェクトをインスタンスと等しくすると、その時点でのプロトタイプ オブジェクトには別のプロトタイプへのポインターが含まれます。これがプロトタイプ チェーンの基本概念です。

以下は簡単な例です

    var Parent = function(){
        this.name = 'parent' ;
    } ;
    Parent.prototype.getName = function(){
        return this.name ;
    } ;
    Parent.prototype.obj = {a : 1} ;    var Child = function(){
        this.name = 'child' ;
    } ;
    Child.prototype = new Parent() ;    var parent = new Parent() ;    var child = new Child() ;
    console.log(parent.getName()) ; //parent
    console.log(child.getName()) ; //child

上記のコードは、親と子の 2 つの型を定義しています。各型にはプロパティとメソッドがあります。主な違いは、親のインスタンスを作成し、このインスタンスを child.prototype に割り当てることで継承が行われることです。彼は新しい例です。親クラスのオブジェクトをサブクラス コンストラクターのプロトタイプに直接割り当てることで、サブクラスのオブジェクトが親クラスのプロトタイプおよび親クラス コンストラクターのプロパティにアクセスできるようになります。
instanceof 演算子を使用して判断できます。この演算子を使用して、プロトタイプ チェーンに表示されるインスタンスとコンストラクターをテストすると、true が返されます

---

コンストラクターの借用

コンストラクターとは何ですか?

JavaScript はクラスではありません 通常の関数を使用してオブジェクトのクラスを作成する場合、特定のメソッドが存在し、それをコンストラクターまたはコンストラクターと呼びます。関数が真のコンストラクターとして機能するには、次の条件を満たす必要があります:

1. 関数内に新しいオブジェクト (this) のプロパティを設定します (通常はプロパティとメソッドを追加します)。

2. コンストラクターには return ステートメントを含めることができますが (推奨されません)、戻り値はこれまたは他の非オブジェクト型の値である必要があります。

JavaScript コンストラクターに関して混乱しやすい領域の 1 つは、プロトタイプのコンストラクター属性です。 JavaScript では、各関数にはデフォルトのプロトタイプ オブジェクト属性プロトタイプがあり、これにはデフォルトで 2 つのメンバー属性 (constructor と
proto) が含まれています。プロトタイプの詳細については、この記事では説明しません。ここで注目するのはコンストラクター属性です。

習慣的なオブジェクト指向の考え方によれば、コンストラクターは「クラス」の定義と同等であるため、新しい式がオブジェクトを作成するとき、コンストラクター属性がクラスの実際のコンストラクターであると考えるかもしれません。コンストラクターを直接呼び出してオブジェクトを初期化するのは大きな間違いです。新しい式を実行する実際のプロセス (4 つのステップ) は上で紹介されており、そのうち 3 番目のステップはオブジェクトの初期化に使用されます。呼び出される初期化関数は、借用したコンストラクターではなく、「クラス関数」そのものです

    function CO(){
    this.p = “I’m in constructed object”;    this.alertP = function(){
        alert(this.p);
        }
    }    var o2 = new CO();

。コンストラクターの継承は非常に簡単です。つまり、サブタイプ コンストラクター内でスーパータイプ コンストラクターを呼び出すだけです。関数は特定の環境でコードを実行するオブジェクトにすぎないため、apply() メソッドと call() メソッドを使用して、新しく作成されたオブジェクトに対してコンストラクターを実行することもできます。

   function superType(){
       this.colors = ["red","blue","green"];
   }   function subtype(){
       superType.call(this);
   }   var instance1 = new subtype();
   instance1.colors.push("black");
   alert(instance1.colors);//"red,blue,green,black"
   var instance2 = new subtype();
   alert(instance2.colors);//"red,blue,green"

call() を使用することにより、実際には新しく作成されたサブタイプ インスタンスのコンテキストで supertype() コンストラクターを呼び出していることになります。このようにして、スーパータイプ コンストラクターは新しいサブタイプ オブジェクト上で実行されます。サブタイプ supertype() 関数で定義されたすべてのオブジェクト初期化コードはオブジェクト上で実行されます

   function superType(name){
       this.name = name;
   }   function subtype(){
       superType.call(this,"Marry");       this.age = 29;
   }   var instance = new subtype();
   alert(instance.name);//"Marry"
   alert(instance2.age);//"29"

これはコンストラクターの大きな利点であり、サブタイプ コンストラクター内でパラメーターをスーパータイプ コンストラクターに渡すことができます。

この記事では、JS 継承について説明します。関連コンテンツの詳細については、php 中国語 Web サイトを参照してください。

関連する推奨事項:

JS 復号化、オンライン JS 復号化と復号化

JS コードを最適化する方法

JavaScript ローカル オブジェクト

以上がJS の継承を理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。