継承する 1. 継承とは何か継承: まず、継承とは関係、つまりクラス間の関係です。JS にはクラスはありませんが、クラスはコンストラクターを通じてシミュレートでき、継承はプロトタイプを通じて実現できます。
プロトタイプについて考えてみましょう。その 2 つの機能は次のとおりです。
継承は関係です。親クラスレベルとクラスレベル間の関係です。 例: 人物カテゴリ: 名前、性別、年齢、食事、睡眠 生徒のカテゴリー: 名前、性別、年齢、食事、睡眠、勉強の行動 教師カテゴリ: 氏名、性別、年齢、食事、睡眠、給与、指導行動 プログラマー: 名前、性別、年齢、食事、睡眠、給料、コードの書き方 ドライバーカテゴリー: 名前、性別、年齢、食事、睡眠、給与、運転 動物のカテゴリー: 体重、色、食事 犬のカテゴリー: 体重、色、食事、噛みつき エルハカテゴリー:体重、色、食べること、飼い主を喜ばせるために噛むこと、ワンワン、あなたはとてもハンサムです オブジェクト指向機能: カプセル化、継承、ポリモーフィズム
2. JavaScript継承の3つの方法コンストラクタプロパティの継承: コンストラクタの借用 継承する場合、プロトタイプのポインタを変更する必要はなく、親のコンストラクターを呼び出してプロパティに値を割り当てるだけです。 —— コンストラクタの借用:継承する親のコンストラクタを取得して使用します。 借用コンストラクタ:
利点: 属性の継承と重複しない値の問題を解決する 欠陥: 親クラスのメソッドを継承できない 関数 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQLデータベースの操作とメンテナンスのデータ復旧方法
>>: Linux のスケジュールされたタスクの crontab のインストールと使用の詳細な説明
JS でアニメーションを記述する場合、移動前に相対位置を絶対位置に変換してからアニメーション機能を実...
区切り文字なしの文字列抽出質問の要件データベース内のフィールド値:実装効果: 1行のデータを複数行に...
<br />ユーザーエクスペリエンスは中国のウェブサイトでますます重視されており、ユーザ...
1. 以前 QT5.13 バージョンをダウンロードしましたが、インストール後、Qtcreator を...
目次導入使用シナリオソースコード分析要約する導入Vue は、コンポーネントをステートレスかつインスタ...
いろいろ苦労した後、インターネットで検索したり、以前の会社のプロジェクトを探したり、他の人のプロジェ...
この記事では、参考までに、テキストループスクロールを実現するアプレットの具体的なコードを例を挙げて紹...
Docker イメージの最初の行は FROM alpine などのイメージで始まりますが、最初のベー...
ウェブフロントエンド最適化のベストプラクティス: コンテンツWebフロントエンド最適化のベストプラク...
ユーザー組織には、ドメインに参加している 2 台の Windows Server 2008 R2 フ...
概要この記事は、centos7.3 上で mysql5.3.6 を自動的にコンパイルしてインストール...
==================================================...
まず第一に、この効果は古い話題であるはずだということはわかっています。今日ファイルを整理していたら、...
目次起源現状リクエストをキャンセル cancelTokenリクエスト方法の変更重複したリクエストを避...
目次1. Promiseとは何か2. 基本的な使い方3. Promiseメソッド3.1 Promis...