JSの継承メソッドまとめ（ケース付き）

プロトタイプチェーン継承

コア: 親クラスのインスタンスをサブクラスのプロトタイプとして使用します
特徴:
1: 非常に純粋な継承関係、インスタンスはサブクラスのインスタンスであり、親クラスのインスタンスでもあります
2: 新しい親クラス 拡張されたプロトタイプ メソッドはサブクラスからアクセスできます
欠点:
1: 新しい属性とメソッドをサブクラスに追加したい場合は、 new Animal() の後に追加する必要があります。多重継承は実現できません。
2: サブクラス インスタンスを作成するとき、親クラスのコンストラクターにパラメーターを渡すことはできません

function Animal(name){
    this.name=name;
    this.sleep=function(){
        console.log(this.name+"正在睡觉");
    }
}
Animal.prototype.eat=function() {
    console.log(this.name + "正在吃");
}
function Cat(){
}
Cat.prototype=new Animal();
Cat.prototype.name="猫";
var cat=new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat.eat());
console.log(cat instanceof Cat);//true
console.log(cat instanceof Animal);//true

構築の継承
コア: 親クラスのコンストラクターを使用してサブクラス インスタンスを拡張することは、親クラスのインスタンス属性をコピーすることと同じです。サブクラス (プロトタイプは使用されません)
特徴:
1: サブクラスのインスタンスを作成するときに、親クラスにパラメーターを渡すことができます
2: 多重継承を実現できます
欠点:
1: インスタンスは、親クラスですが、サブクラスのインスタンスです
2: 親クラスの属性とプロパティのみを継承できます。メソッドはプロトタイプの属性とメソッドを継承できません。
3: 各サブクラスは親クラスのコピーを持ちます。パフォーマンスに影響するインスタンス関数

    function Animal(name){
            this.name=name;
            this.sleep=function(){
                console.log(this.name+"正在睡觉");
            }
        }
        Animal.prototype.eat=function() {
            console.log(this.name + "正在吃");
        }
                function Cat(name){
                Animal.call(this);
                this.name=name;
        }
        var cat=new Cat("猫");
        console.log(cat.name);
        console.log(cat.sleep());
//        console.log(cat.eat());不能继承原型化方法
        console.log(cat instanceof Cat);//true
        console.log(cat instanceof Animal);//false

インスタンスの継承

function Animal(name){
    this.name=name;
    this.sleep=function(){
        console.log(this.name+"正在睡觉");
    }
}
Animal.prototype.eat=function() {
    console.log(this.name + "正在吃");
}
function Cat(name){
    var instance=new Animal();
    instance.name=name;
    return instance;
}
var cat=new Cat("猫");
console.log(cat.name);
console.log(cat.sleep());
console.log(cat.eat());
console.log(cat instanceof Cat);//false
console.log(cat instanceof Animal);//true

特徴:
呼び出しメソッドを制限しません。new subclass() であっても subclass() であっても、返されるオブジェクトは同じ効果があります
欠点:
インスタンスは親クラスのインスタンスであり、サブクラスのインスタンスではありません
多重継承をサポートしません
結合継承

function Animal(name){
    this.name=name;
    this.sleep=function(){
        console.log(this.name+"正在睡觉");
    }
}
Animal.prototype.eat=function() {
    console.log(this.name + "正在吃");
}
function Cat(name){
    Animal.call(this);
    this.name=name;
    }
Cat.prototype=new Animal();
var cat=new Cat("猫");
console.log(cat.name);
console.log(cat.sleep());
console.log(cat.eat());
console.log(cat instanceof Cat);//true
console.log(cat instanceof Animal);//true

その他:
1: フォーム検証
postは安全に送信され、情報は公開されません
getは公開します情報
2: ブラウザ オブジェクト
3: navigator にはブラウザに関する情報が含まれています navigator.appName はブラウザ名を返します
4: カプセル化されたクラスの属性はカスタマイズでき、名前はカスタマイズされます

この記事のケースについては、さらに興味深い情報については、php 中国語 Web サイトの他の関連記事にご注目ください。

推奨読書:

div の動きを制御するために方向キーをバインドする方法

タイトルテキストをクリックしたときのフォント切り替え効果を作成する方法

以上がJSの継承メソッドまとめ（ケース付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。