[解決済み] JavaScriptのプロトタイプ継承を理解する
質問
私はJavaScriptのOOPの初心者です。以下のコードブロックの違いを説明してもらえますか?テストしたところ、どちらのブロックも動作しました。ベストプラクティスは何ですか、そしてなぜですか?
最初のブロック
function Car(name){
this.Name = name;
}
Car.prototype.Drive = function(){
console.log("My name is " + this.Name + " and I'm driving.");
}
SuperCar.prototype = new Car();
SuperCar.prototype.constructor = SuperCar;
function SuperCar(name){
Car.call(this, name);
}
SuperCar.prototype.Fly = function(){
console.log("My name is " + this.Name + " and I'm flying!");
}
var myCar = new Car("Car");
myCar.Drive();
var mySuperCar = new SuperCar("SuperCar");
mySuperCar.Drive();
mySuperCar.Fly();
2つ目のブロック
function Car(name){
this.Name = name;
this.Drive = function(){
console.log("My name is " + this.Name + " and I'm driving.");
}
}
SuperCar.prototype = new Car();
function SuperCar(name){
Car.call(this, name);
this.Fly = function(){
console.log("My name is " + this.Name + " and I'm flying!");
}
}
var myCar = new Car("Car");
myCar.Drive();
var mySuperCar = new SuperCar("SuperCar");
mySuperCar.Drive();
mySuperCar.Fly();
なぜ、作者は
Drive
と
Fly
メソッドを使用しています。
prototype
として宣言しておらず
this.Drive
メソッドの内部で
Car
クラスと
this.Fly
の中で
SuperCar
クラスですか?
なぜ
SuperCar.prototype.constructor
に戻す必要があります。
SuperCar
? また
constructor
プロパティがオーバーライドされたとき
prototype
が設定されているのでしょうか?この行をコメントアウトしても何も変わりません。
なぜ
Car.call(this, name);
の中で
SuperCar
コンストラクタを使用しますか?のプロパティやメソッドは
Car
を実行すると、「継承」されます。
var myCar = new Car("Car");
解決方法は?
この2つのブロックは、最初の例では、次のように異なっています。
Drive()
は一度しか存在しないのに対し、2番目のアプローチでは
Drive()
はインスタンスごとに存在する(毎回
new Car()
関数
drive()
が再び作成されます)。あるいは、最初の関数はプロトタイプを使用し、2番目の関数はコンストラクタを使用すると言うこともできます。関数のルックアップはコンストラクタ、プロトタイプの順で行われます。ですから
Drive()
の場合、コンストラクタにあるのかプロトタイプにあるのかに関係なく見つかります。通常、関数は1つの型に1回しか必要ないので、プロトタイプを使用する方が効率的です。
その
new
を呼び出すと、自動的にプロトタイプにコンストラクタが設定されます。プロトタイプを上書きしている場合は、コンストラクタを手動で設定する必要があります。
javascriptの継承には、以下のようなものはありません。
super
. そのため、サブクラスがある場合、スーパーコンストラクタを呼び出すには、その名前を使うしかありません。
関連
-
vueはopenlayersを使用してスカイマップとガオードマップをロードする
-
[解決済み】"フォームが接続されていないため、フォームの送信がキャンセルされました "というエラーの取得について
-
[解決済み】ExpressJS : res.redirect()が期待通りに動かない?
-
[解決済み】ReactJSでエラー発生 Uncaught TypeError: Super expression は null か関数でなければならず、undefined ではありません。
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み】JavaScriptの比較では、どちらの等号演算子(== vs ===)を使うべきですか?
-
[解決済み】JavaScriptで文字列の出現箇所をすべて置換する方法
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
親子コンポーネント通信を解決する3つのVueスロット
-
VUEグローバルフィルターの概念と留意点、基本的な使い方
-
[解決済み] テスト
-
[解決済み】SyntaxError: JSONの位置1に予期しないトークンoがある。
-
[解決済み】リソースの読み込みに失敗した:Bind関数でサーバーが500(Internal Server Error)のステータスで応答した【非公開
-
[解決済み】「X-Frame-Options」を「SAMEORIGIN」に設定したため、フレームでの表示を拒否された。
-
[解決済み】<select>で現在選択されている<option>をJavaScriptで取得するにはどうすればよいですか?
-
JSクリックイベント - Uncaught TypeError: プロパティ 'onclick' に null を設定できません。
-
[解決済み】prototypeコンストラクタの設定が必要なのはなぜですか?
-
[解決済み】プロトタイプ継承の利点は古典的なものよりも?