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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • ネイティブ JavaScript 継承方法とその長所と短所の詳細な説明
  • JS 継承の詳細
  • jsの継承の6つの方法を詳しく解説
  • JavaScriptで継承を実装するいくつかの方法
  • js で継承を実装する 5 つの方法
  • JavaScript におけるいくつかの継承方法の例
  • JavaScript継承の詳細な説明
  • JavaScript オブジェクト指向クラス継承ケースの説明

<<:  MySQLデータベースの操作とメンテナンスのデータ復旧方法

>>:  Linux のスケジュールされたタスクの crontab のインストールと使用の詳細な説明

推薦する

JSはアニメーションのレイアウト変換を実装します

JS でアニメーションを記述する場合、移動前に相対位置を絶対位置に変換してからアニメーション機能を実...

MySQL 文字列分割操作 (区切り文字を含む文字列のインターセプション)

区切り文字なしの文字列抽出質問の要件データベース内のフィールド値:実装効果: 1行のデータを複数行に...

中国のウェブサイトユーザーエクスペリエンスランキング

<br />ユーザーエクスペリエンスは中国のウェブサイトでますます重視されており、ユーザ...

Ubuntu 14.04 で QT5 をインストール、設定、アンインストールするための詳細な手順

1. 以前 QT5.13 バージョンをダウンロードしましたが、インストール後、Qtcreator を...

Vue の高度なコンポーネント機能コンポーネントの使用シナリオとソースコード分析

目次導入使用シナリオソースコード分析要約する導入Vue は、コンポーネントをステートレスかつインスタ...

ウェブページに埋め込まれた Flash と IE、FF、Maxthon の互換性の問題

いろいろ苦労した後、インターネットで検索したり、以前の会社のプロジェクトを探したり、他の人のプロジェ...

テキストの円形スクロールアニメーションを実装するミニプログラム

この記事では、参考までに、テキストループスクロールを実現するアプレットの具体的なコードを例を挙げて紹...

Dockerはbusyboxを使用してベースイメージを作成します

Docker イメージの最初の行は FROM alpine などのイメージで始まりますが、最初のベー...

Webフロントエンドのパフォーマンス最適化

ウェブフロントエンド最適化のベストプラクティス: コンテンツWebフロントエンド最適化のベストプラク...

Windows Server 2008R2 ファイル サーバーを Windows Server 2016 にアップグレードする

ユーザー組織には、ドメインに参加している 2 台の Windows Server 2008 R2 フ...

Mysql5.6.36 スクリプトのコンパイル、インストール、初期化のチュートリアル

概要この記事は、centos7.3 上で mysql5.3.6 を自動的にコンパイルしてインストール...

MySQL 接続失敗の一般的な障害と原因

==================================================...

IE6はmin-widthを実装している

まず第一に、この効果は古い話題であるはずだということはわかっています。今日ファイルを整理していたら、...

Axios はリクエストをキャンセルし、重複リクエストを回避します

目次起源現状リクエストをキャンセル cancelTokenリクエスト方法の変更重複したリクエストを避...

フロントエンドJavaScriptの約束

目次1. Promiseとは何か2. 基本的な使い方3. Promiseメソッド3.1 Promis...