JavaScript での 4 つの継承方法 (コード例)

この記事では JavaScript 継承の 4 つのメソッド (コード例) を紹介します。参考価値はあります。困っている友人は参考にしてください。お役に立てれば幸いです。

1. プロトタイプ チェーンの継承

コア: 親クラスのインスタンスをサブクラスのプロトタイプとして使用する

欠点: 新しいプロトタイプ メソッド親クラス/プロトタイプ属性はサブクラスからアクセスできます。親クラスが変更されると、他のすべてが変更されます

        function Person (name) {
            this.name = name;
        };

        Person.prototype.getName = function () {    //对原型进行扩展
            return this.name;
        };

        function Parent (age) {
            this.age = age;
        };

        Parent.prototype = new Person('老明');   //这一句是关键 //通过构造器函数创建出一个新对象，把老对象的东西都拿过来。

        Parent.prototype.getAge = function () {
            return this.age;
        };

//        Parent.prototype.getName = function () {   //可以重写从父类继承来的方法,会优先调用自己的。
//            console.log(222);
//        };

        var result = new Parent(22);
        console.log(result.getName());  //老明　　//调用了从Person原型中继承来的方法(继承到了当前对象的原型中)　　
        console.log(result.getAge());   //22 　　//调用了从Parent原型中扩展来的方法

2. 構成的継承

基本的なアイデア
借用基本的な考え方は、call または apply を使用して、親クラスの this で指定されたプロパティとメソッドを、コンストラクターによって作成されたインスタンスにコピー (借用) することです。サブクラス。
this オブジェクトは、関数の実行環境に基づいて実行時にバインドされるためです。つまり、グローバルには、this は window と等しく、関数がオブジェクトのメソッドとして呼び出される場合、this はそのオブジェクトと等しくなります。
call、apply メソッドは、関数のオブジェクト コンテキストを初期コンテキストから thisObj で指定された新しいオブジェクトに変更できます。

つまり、この借用したコンストラクターは、

new がオブジェクト (新規作成時、this は作成されたインスタンスを指します) の場合、新しいインスタンスが作成されます。 オブジェクト、 そして
Parent 内のコードを実行します。そして、Parent は call を使用して person を呼び出します。つまり this は新しいインスタンスを指します。そのため、#に値を割り当てる代わりに、
Person の this 関連プロパティとメソッドが新しいインスタンスに割り当てられます。 ##Person, したがって、すべてのインスタンスには、親クラスによって定義されたこれらの this
属性とメソッドがあります。 プロパティは

this

にバインドされているため、呼び出されたときに対応するインスタンスに割り当てられ、各インスタンスの値は相互に影響しません。 核心: 親クラスのコンストラクターを使用してサブクラスのインスタンスを拡張することは、親クラスのインスタンス属性をサブクラスにコピーすることと同じです (プロトタイプは使用されません)

欠点:メソッドはすべてコンストラクター内にあります。 で定義されているように、継承できるのは親クラスのインスタンス プロパティとメソッドのみです。プロトタイプのプロパティ/メソッドは継承できません。また、関数の再利用はできません。各サブクラスには親クラスのインスタンス関数のコピーがあり、これはパフォーマンスに影響します

      function Person (name) {
            this.name = name;
            this.friends = ['小李','小红'];
            this.getName = function () {
                return this.name;
            }
        };

//        Person.prototype.geSex = function () {    //对原型进行扩展的方法就无法复用了
//            console.log("男");
//        };

        function Parent = (age) {
            Person.call(this,'老明');　　//这一句是核心关键
            //这样就会在新parent对象上执行Person构造函数中定义的所有对象初始化代码，
            // 结果parent的每个实例都会具有自己的friends属性的副本
            this.age = age;
        };

        var result = new Parent(23);
        console.log(result.name);　　　　//老明
        console.log(result.friends);　　//["小李", "小红"]
　　　　 console.log(result.getName());　　//老明
　　　　 console.log(result.age);　　　　//23
　　　　 console.log(result.getSex());　　//这个会报错，调用不到父原型上面扩展的方法

3. 結合継承

結合継承 (すべてのインスタンスは独自のプロパティを持つことができ、同じメソッドを使用できます。結合継承により、プロトタイプ チェーンと借用したコンストラクター、およびその 2 つの組み合わせです。それぞれの利点は、最も一般的に使用される継承メソッドです)

コア: 親クラスのコンストラクターを呼び出すことで、親クラスのプロパティを継承し、引き継ぎの利点を保持します。パラメータを設定し、親クラスのインスタンスをサブクラスのプロトタイプとして使用して関数の再利用を実現します。

欠点: 親クラスのコンストラクターが 2 回呼び出され、2 つのインスタンスが生成されます (サブクラスのインスタンスがサブクラスのプロトタイプのインスタンスをブロックします)。 )

        function Person  (name) {
             this.name = name;
             this.friends = ['小李','小红'];
         };

         Person.prototype.getName = function () {
             return this.name;
         };

        function Parent (age) {
            Person.call(this,'老明');　　//这一步很关键
            this.age = age;
        };

        Parent.prototype = new Person('老明');　　//这一步也很关键
        var result = new Parent(24);
        console.log(result.name);　　　　//老明
        result.friends.push("小智");　　//
        console.log(result.friends);　　//['小李','小红','小智']
        console.log(result.getName());　　//老明
        console.log(result.age);　　　　//24

        var result1 = new Parent(25);   //通过借用构造函数都有自己的属性，通过原型享用公共的方法
        console.log(result1.name);　　//老明
        console.log(result1.friends);　　//['小李','小红']

4. 寄生結合の継承

コア: 寄生により、親クラスのインスタンス属性が切り離されるため、親クラスのコンストラクターがが 2 回呼び出される場合、インスタンス メソッドは 2 回初期化されません/属性により結合継承の欠点が回避されます

欠点: 完璧ですが、実装がより複雑になります

        function Person(name) {
            this.name = name;
            this.friends = ['小李','小红'];
        }

        Person.prototype.getName = function () {
            return this.name;
        };

        function Parent(age) {
            Person.call(this,"老明");
            this.age = age;
        }

        (function () {
            var Super = function () {};     // 创建一个没有实例方法的类
            Super.prototype = Person.prototype;
            Parent.prototype = new Super();     //将实例作为子类的原型
        })();

        var result = new Parent(23);
        console.log(result.name);
        console.log(result.friends);
        console.log(result.getName());
        console.log(result.age);

[関連する推奨事項:

JavaScript ビデオ チュートリアル

#]

以上がJavaScript での 4 つの継承方法 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。