JavaScriptの継承メソッドとは何ですか-jsチュートリアル-php.cn

JavaScriptの継承メソッドとは何ですか

王林

リリース： 2023-01-07 11:42:55

オリジナル

1650 人が閲覧しました

JavaScript の継承メソッドには、プロトタイプチェーン継承、借用コンストラクター継承、結合継承、プロトタイプ継承、寄生継承、寄生結合継承が含まれます。その中で、結合継承は最もよく使用される継承方法です。

JavaScriptの継承メソッドとは何ですか

#この記事の動作環境: Windows10 システム、JavaScript 1.8.5、thinkpad t480 コンピューター。

JavaScript で継承したい場合は、まず親クラスを用意する必要がありますが、ここでは親クラスとして Person を使用します。

Coder、Rocker など、以下のすべてのコンストラクター名には実際の意味はなく、例としてのみ使用されます

		 function Person(name){//给构造函数添加了参数
		            this.name=name;
		            this.sex="male";
		            this.say=function(){
		                console.log(this.name);
		            }
		        }
		Person.prototype.age=21;//给构造函数添加了原型属性

ログイン後にコピー

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

		function Programmer(){
            this.name="Jayee";
        }

        Programmer.prototype=new Person();//子类构造函数.prototype=父类实例

        var per1=new Programmer();
        console.log(per1);//Programmer {name: "Jayee"}
        console.log(per1.sex);//male
        console.log(per1.age);//21
        console.log(per1 instanceof Person);//true

ログイン後にコピー

キーポイント: 新しいインスタンスのプロトタイプを親クラスのインスタンスと等しくします。 Programmer.prototype=new Person();

特徴: インスタンスが継承できる属性には、インスタンスのコンストラクターの属性、親クラスのコンストラクターの属性、および親クラスのプロトタイプの属性が含まれます。 (新しいインスタンスは、親クラスのインスタンスの属性を継承しません。)

欠点: 1. 新しいインスタンスは、親クラスのコンストラクターにパラメーターを渡すことができません。

2. 単一継承。

3. すべての新しいインスタンスは、親クラスのインスタンスの属性を共有します。 (プロトタイプの属性は共有されます。1 つのインスタンスの変更

がプロトタイプの属性を変更すると (per1.__proto__.sex="女性"、per2.sex も女性になります)、もう一方のインスタンス

インスタンスのプロトタイププロパティも変更されます!)

2. コンストラクターの継承を借用する

        //借用构造函数继承
        function Coder(){
            Person.call(this,"Jayee");//重点：借用了Person
            this.age=18;
        }
        var cod1=new Coder();
        console.log(cod1);
        //Coder {name: "Jayee", sex: "male", hobby: "", age: 18, say: ƒ}
        console.log(cod1.name);//Jayee
        console.log(cod1.age);//18
        console.log(cod1 instanceof Person);//false

ログイン後にコピー

重要なポイント: .call() と .apply() を使用して導入します親クラスのコンストラクタサブクラス関数（親クラスの関数をサブクラス関数内で自己実行（コピー））

特徴: 1. 親クラスのコンストラクタの属性のみを継承し、親クラスのコンストラクタの属性は継承しません。親クラスのプロトタイプ。 (

を見ると、cod1.age が 21 ではなく 18 であることがわかります)

2. プロトタイプチェーン継承の欠点 1、2、3 を解決しました。

3. 複数のコンストラクター属性を継承（複数呼び出し）できます。

4. 子インスタンスで親インスタンスにパラメータを渡すことができます。

欠点: 1. 親クラスのコンストラクターの属性のみを継承できます。

2. コンストラクターの再利用は実現できません。 (使用するたびに再度呼び出す必要があります)

3. 各新しいインスタンスには親クラスのコンストラクターのコピーがあり、肥大化しています。

3. 結合継承 (プロトタイプチェーン継承と借用コンストラクター継承の結合) (一般的に使用されます)

        //组合继承
        function Typer(name){
            Person.call(this,name);
        }
        Typer.prototype=new Person();
        var typ=new Typer("Jayee");
        console.log(typ);
        //Typer {name: "Jayee", sex: "male", hobby: "", say: ƒ}
        console.log(typ.name);//Jayee，继承了构造函数
        console.log(typ.age);//21，继承了父类的原型的属性

ログイン後にコピー

キーポイント: パラメーターの受け渡しと再利用という 2 つのモードの利点を組み合わせます

特徴: 1. 親クラスのプロトタイプの属性を継承し、パラメータを渡して再利用できます。
2. それぞれの新しいインスタンスによって導入されるコンストラクター属性はプライベートです。

欠点: 親クラスのコンストラクターが 2 回呼び出され (メモリ消費)、サブクラスのコンストラクターがプロトタイプの
親クラスコンストラクターを置き換えます

4. プロトタイプの継承

        //原型式继承
        function Rocker(obj) {
        //先封装一个函数容器，用来输出对象和承载继承的原型
            function F(){}
            F.prototype=obj;//继承了传入的函数
            return new F();//返回函数对象
        }
        var per=new Person();//拿到父类实例
        var roc =Rocker(per);//F {}
        console.log(per.__proto__);//{age: 21, constructor: ƒ}
        console.log(roc.age);//21，继承了父类函数的属性

ログイン後にコピー

重要なポイント: オブジェクトを関数でラップし、この関数の呼び出しを返します。この関数は、任意に属性を追加できる

インスタンスまたはオブジェクトになります。 object.create() がこの原則です。

特徴: オブジェクトをコピーして関数でラップするのと似ています。

欠点: 1. すべてのインスタンスはプロトタイプの属性を継承します。

2. 再利用が実現できない。 (新しいインスタンス属性は後で追加します)

5. 寄生継承

        //寄生式继承
        function Rocker(obj){
            function F(){}
            F.prototype=obj;//继承了传入的函数
            return new F();//返回函数对象
        }
        var per4=new Person();
        //以上是原型式继承,给原型式继承再套个壳子传递参数
        function Artist(obj){
            var roc=Rocker(obj);
            roc.name="Jayee";
            return roc;
        }
        var art = Artist(per4)
        //这个函数经过声明之后就成了可增添属性的对象
        console.log(typeof Artist);//function
        console.log(typeof art);//object
        console.log(art.name);//Jayee，返回了个roc对象，继承了roc的属性

ログイン後にコピー

重要なポイント: プロトタイプの継承にシェルを置くことです。

利点: これはオブジェクト (this) を返す単なるシェルであるため、カスタムタイプは作成されず、この関数は自然に作成された新しいオブジェクトになります。

欠点: プロトタイプが使用されないため、再利用できません。

6. 寄生結合継承 (一般的に使用されます)

Parasite: 関数内のオブジェクトを返し、その後、

Composition を呼び出します: 1. 関数のプロトタイプは次と同等です。別のインスタンス。 2. apply または call を使用して関数に別のコンストラクターを導入し、パラメーターを渡すことができます。

         //寄生式组合式继承

         //寄生
         function Rocker(obj){
            function F(){}
            F.prototype=obj;//继承了传入的函数
            return new F();//返回函数对象
        }
        //Rocker就是F实例的另一种表示法
        var roc=new Rocker(Person.prototype);
        //roc实例（F实例）的原型继承了父类函数的原型
        //上述更像是原型链继承，只不过继承了原型属性

        //组合
        function Sub(){
            Person.call(this);
            //这个继承了父类构造函数的属性
            //解决了组合式两次调用构造函数属性的缺点
        }
        //重点
        Sub.prototype=roc;//继承了roc实例
        roc.constructor=Sub;//一定要修复实例
        var sub1=new Sub();
        //Sub的实例就继承了构造函数属性，父类实例，roc的函数属性
        console.log(sub1.age);//21

ログイン後にコピー

キーポイント: 結合継承の問題を修正しました

7. ES6 のクラスと拡張