JavaScript における継承の 3 つの方法

継承する

1. 継承とは何か

継承: まず、継承とは関係、つまりクラス間の関係です。JS にはクラスはありませんが、クラスはコンストラクターを通じてシミュレートでき、継承はプロトタイプを通じて実現できます。

継承はデータ共有のためでもあり、jsの継承もデータ共有のためです

プロトタイプについて考えてみましょう。その 2 つの機能は次のとおりです。

プロトタイプ機能1: データ共有、メモリスペースの節約
プロトタイプの2番目の役割：継承を実現する

継承は関係です。親クラスレベルとクラスレベル間の関係です。

例：

人物カテゴリ: 名前、性別、年齢、食事、睡眠

生徒のカテゴリー: 名前、性別、年齢、食事、睡眠、勉強の行動

教師カテゴリ: 氏名、性別、年齢、食事、睡眠、給与、指導行動

プログラマー: 名前、性別、年齢、食事、睡眠、給料、コードの書き方

ドライバーカテゴリー: 名前、性別、年齢、食事、睡眠、給与、運転

動物のカテゴリー: 体重、色、食事

犬のカテゴリー: 体重、色、食事、噛みつき

エルハカテゴリー：体重、色、食べること、飼い主を喜ばせるために噛むこと、ワンワン、あなたはとてもハンサムです

オブジェクト指向機能: カプセル化、継承、ポリモーフィズム

カプセル化: 値をラップして変数に格納する - 関数で一連の繰り返しコードをラップする - オブジェクトで一連の属性をラップする - 類似の機能を持ついくつかの関数 (メソッド) をオブジェクトでラップする - js ファイルで多くの類似オブジェクトをラップする - カプセル化

ポリモーフィズム: オブジェクトの動作が異なるか、同じ動作でもオブジェクトによって結果が異なります。ポリモーフィズムを実現するには、まず継承が必要です。ポリモーフィズムは JS でシミュレートできますが、使用もシミュレートもされません。

2. JavaScript継承の3つの方法

コンストラクタプロパティの継承: コンストラクタの借用

継承する場合、プロトタイプのポインタを変更する必要はなく、親のコンストラクターを呼び出してプロパティに値を割り当てるだけです。

—— コンストラクタの借用：継承する親のコンストラクタを取得して使用します。

借用コンストラクタ:

コンストラクター名.call(現在のオブジェクト、属性、属性、属性...);

利点: 属性の継承と重複しない値の問題を解決する

欠陥: 親クラスのメソッドを継承できない

関数 Person (名前, 年齢) {
  this.type = '人間'
  this.name = 名前
  this.age = 年齢
}

関数 学生 (名前, 年齢) {
  // コンストラクタを借用して属性メンバーを継承します Person.call(this, name, age)
}

var s1 = Student('张三', 18)
console.log(s1.type, s1.name, s1.age) // => 人間の張三 18

例:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>タイトル</title>
  <スクリプト>
    関数 Person(名前、年齢、性別、体重) {
      this.name = 名前;
      this.age = 年齢;
      this.sex = セックス;
      this.weight = 重量;
    }
    Person.prototype.sayHi = 関数 () {
      console.log("こんにちは");
    };
    関数 Student(名前、年齢、性別、体重、スコア) {
      //コンストラクタを借用します Person.call(this,name,age,sex,weight);
      this.score = スコア;
    }
    var stu1 = new Student("Xiaoming",10,"男性","10kg","100");
    console.log(stu1.name、stu1.age、stu1.sex、stu1.weight、stu1.score);

    var stu2 = new Student("Xiaohong",20,"女性","20kg","120");
    console.log(stu2.name、stu2.age、stu2.sex、stu2.weight、stu2.score);

    var stu3 = new Student("Xiao Li",30,"Yao","30kg","130");
    console.log(stu3.name、stu3.age、stu3.sex、stu3.weight、stu3.score);


  </スクリプト>
</head>
<本文>


</本文>
</html>

コンストラクタのプロトタイプメソッド継承: コピー継承 (for-in)

コピー継承。あるオブジェクトのプロパティまたはメソッドを別のオブジェクトに直接コピーします。

関数 Person (名前, 年齢) {
  this.type = '人間'
  this.name = 名前
  this.age = 年齢
}

Person.prototype.sayName = 関数 () {
  console.log('hello' + this.name) を実行します。
}

関数 学生 (名前, 年齢) {
  Person.call(これ、名前、年齢)
}

// プロトタイプオブジェクトはプロトタイプオブジェクトのメンバーをコピーして継承します for(var key in Person.prototype) {
  Student.prototype[キー] = Person.prototype[キー]
}

var s1 = Student('张三', 18)

s1.sayName() // => こんにちは、張さん

例:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>タイトル</title>
  <スクリプト>

    //継承のコピー。オブジェクトのプロパティまたはメソッドを別のオブジェクトに直接コピーします。function Person() {
    }
    Person.prototype.age=10;
    Person.prototype.sex="男性";
    Person.prototype.height=100;
    Person.prototype.play = 関数 () {
      console.log("楽しんでいます");
    };
    var obj2 = {};
    //Person はプロトタイプを使用して構築されています。プロトタイプはオブジェクトです。その中で、年齢、性別、身長、プレイはすべてオブジェクトのプロパティまたはメソッドです。for(var key in Person.prototype){
      obj2[キー]=Person.prototype[キー];
    }
    コンソールのdir(obj2);
    obj2.play();



  </スクリプト>
</head>
<本文>


</本文>
</html>

継承のもう一つの方法: プロトタイプ継承

プロトタイプの継承: プロトタイプの方向を変える

関数 Person (名前, 年齢) {
  this.type = '人間'
  this.name = 名前
  this.age = 年齢
}

Person.prototype.sayName = 関数 () {
  console.log('hello' + this.name) を実行します。
}

関数 学生 (名前, 年齢) {
  Person.call(これ、名前、年齢)
}

//プロトタイプの特性を利用して継承を実現する Student.prototype = new Person()

var s1 = Student('张三', 18)

console.log(s1.type) // => 人間

s1.sayName() // => こんにちは、張さん

組み合わせ継承: プロトタイプ + 借用コンストラクタ継承

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>タイトル</title>
  <スクリプト>


    //プロトタイプ継承 //継承を実装するための借用コンストラクタ //複合継承:プロトタイプ継承 + 借用コンストラクタ継承 function Person(name, age, sex) {
      this.name=名前;
      this.age=年齢;
      this.sex=セックス;
    }
    Person.prototype.sayHi = 関数 () {
      console.log("サワディー・カ");
    };
    関数 Student(名前,年齢,性別,スコア) {
      //借用コンストラクタ: 重複する属性値の問題 Person.call(this,name,age,sex);
      this.score=スコア;
    }
    //プロトタイプが指している継承を変更します Student.prototype = new Person(); //値を渡さないでください Student.prototype.eat = function () {
      console.log("食べる");
    };
    var stu=new Student("小黒",20,"男","100分");
    console.log(stu.name,stu.age,stu.sex,stu.score);
    stu.sayHi();
    食べる
    var stu2=new Student("小黑黑",200,"男人","1010分");
    console.log(stu2.name、stu2.age、stu2.sex、stu2.score);
    stu2.sayHi();
    食べる

    // プロパティとメソッドの両方が継承されます</script>
</head>
<本文>


</本文>
</html>

継承の概要

プロトタイプの継承: プロトタイプの方向を変える

コンストラクタ継承の借用: 主に属性の問題を解決します

複合継承: プロトタイプ継承 + 借用コンストラクタ継承

属性問題と方法問題の両方を解決できる

コピー継承: オブジェクト内で共有する必要がある属性またはメソッドを、直接走査して別のオブジェクトにコピーすることです。

要約する

これで、JavaScript 継承の 3 つの方法についての記事は終了です。JavaScript 継承の方法についてさらに詳しく知りたい場合は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: