ホームページ > ウェブフロントエンド > jsチュートリアル > jsの継承メソッドとは何ですか

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

亚连
リリース: 2018-05-17 10:30:11
オリジナル
1649 人が閲覧しました

正式にリリースされた ES6 は、 継承 フォーム、クラス をカプセル化して実装しました。ここでは主に js を記録しますプロトタイプの継承と借用 コンストラクター継承1.プロトタイプチェーン継承

プロトタイプチェーン継承の問題、1 つのインスタンスの参照属性が 1 回だけ変更される限り、他のインスタンスの参照型属性値もすぐに変更されます。 //その理由は、スーパークラスの属性がサブクラス関数 Super(){ this.name="Xiao Ming"; this.friends = ['Xiaohong','Xiaoqiang'];}

function Super(){
    this.name="小明";
}
Super.prototype.sayName = function(){
    alert(this.name)
};function Sub(){}
Sub.prototype = new Super();var instance = new Sub();
instance.sayName();//小明1234567891011
ログイン後にコピー

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


コンストラクターの借用の問題

, スーパークラス

のプロトタイプ

プロパティやメソッドを継承する方法はありません

3. 結合継承(プロトタイプ継承+借用コンストラクター継承)

実際に結合継承も開発されています 最もよく使われる継承方法です

Super.prototype.sayName = function(){
    alert(this.name)
};function Sub(){}
Sub.prototype = new Super();var instance1 = new Sub();var instance2 = new Sub();
instance1.friends.push('张三');
console.log(instance1.friends);//["小红", "小强", "张三"]console.log(instance2.friends);//["小红", "小强", "张三"]1234567891011121314151617
ログイン後にコピー

結合継承の問題

function Super(){this.name="小明";    this.friends = ['小红','小强'];
}
Super.prototype.sayName = function(){
    alert(this.name)
};function Sub(){
    Super.call(this);
}var instance1 = new Sub();var instance2 = new Sub();
instance1.friends.push('张三');
console.log(instance1.friends);//["小红", "小强", "张三"]console.log(instance2.friends);//["小红", "小强"]12345678910111213141516
ログイン後にコピー

4. 寄生継承

//自分で型やコンストラクターを定義するのではなく、オブジェクトを主に考慮する場合、寄生継承は便利なパターンですが、再利用できません。 Function

function Super(){this.name="小明";    this.friends = ['小红','小强'];
}
Super.prototype.sayName = function(){
    alert(this.name)
};function Sub(){
    Super.call(this);
}
Sub.prototype = new Super();var instance1 = new Sub();var instance2 = new Sub();
instance1.friends.push('张三');
console.log(instance1.friends);//["小红", "小强", "张三"]console.log(instance2.friends);//["小红", "小强"]instance1.sayName();//小明instance2.sayName();//小明12345678910111213141516171819
ログイン後にコピー

寄生結合継承

//组合式继承中,超类的构造函数将被调用两次function Super(){this.name="小明";    this.friends = ['小红','小强'];
}
Super.prototype.sayName = function(){
    alert(this.name)
};function Sub(){
    Super.call(this);//第二次调用}
Sub.prototype = new Super();//第一次调用var instance = new Sub();1234567891011121314
ログイン後にコピー

上記は、私がコンパイルした js のいくつかの継承メソッドです。

関連記事:

JS onclickでJSメソッドに2つのパラメータを渡す具体的な手順


jsの基本構文について詳しく解説


クラスの定義方法の解説JSで

以上がjsの継承メソッドとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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