[解決済み] JavaScriptの継承。Object.createとnewの比較
質問
JavaScriptでは、これらの2つの例の違いは何ですか。
前提条件
function SomeBaseClass(){
}
SomeBaseClass.prototype = {
doThis : function(){
},
doThat : function(){
}
}
Object.createを使った継承例A。
function MyClass(){
}
MyClass.prototype = Object.create(SomeBaseClass.prototype);
newキーワードを用いた継承例B
function MyClass(){
}
MyClass.prototype = new SomeBaseClass();
どちらの例も同じことを行っているように見えます。どのような場合にどちらかを選ぶのでしょうか?
追加の質問です。 以下のリンクのコード(15行目)を考えてみましょう。ここでは、関数自身のコンストラクタへの参照がプロトタイプに格納されています。なぜこれが有用なのでしょうか?
https://github.com/mrdoob/three.js/blob/master/src/loaders/ImageLoader.js
抜粋(リンクを開きたくない場合)。
THREE.ImageLoader.prototype = {
constructor: THREE.ImageLoader
}
どのように解決するのですか?
ご質問の中で、以下のように述べられています。
Both examples seem to do the same thing
とあるが、それは全く違う。
あなたの最初の例
function SomeBaseClass(){...}
SomeBaseClass.prototype = {
doThis : function(){...},
doThat : function(){...}
}
function MyClass(){...}
MyClass.prototype = Object.create(SomeBaseClass.prototype);
この例では、単に
SomeBaseClass' prototype
を継承しているだけですが、もし
SomeBaseClass
のように
function SomeBaseClass(){
this.publicProperty='SomeValue';
}
のような使い方をすると
var obj=new MyClass();
console.log(obj.publicProperty); // undefined
console.log(obj);
は
obj
オブジェクトには
publicProperty
のようなプロパティはありません。
この例では
.
2つ目の例
MyClass.prototype = new SomeBaseClass();
を実行しているのです。
constructor
のインスタンスを生成しています。
SomeBaseClass
のインスタンスを作成し、全体の
SomeBaseClass
オブジェクトを継承します。ですから、もしあなたが
var obj=new MyClass();
console.log(obj.publicProperty); // SomeValue
console.log(obj);
この場合、その
publicProperty
プロパティも
obj
オブジェクトのように
この例では
.
というのは
Object.create
は一部の古いブラウザでは利用できないので、その場合は
if(!Object.create)
{
Object.create=function(o){
function F(){}
F.prototype=o;
return new F();
}
}
上記のコードに
Object.create
という関数がない場合、その関数を使って
Object.create
関数を使用することができます。
Object.create
が実際に行っていることを説明していると思います。それが何らかの形で助けになることを願っています。
関連
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] JavaScriptでメールアドレスを検証するのに最適な方法は何ですか?
-
[解決済み] JavaScriptでタイムスタンプを取得する方法は?
-
[解決済み】JavaScriptの比較では、どちらの等号演算子(== vs ===)を使うべきですか?
-
[解決済み】JavaScriptで文字列の出現箇所をすべて置換する方法
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
-
[解決済み] javascript の関数から `undefined` と `null` のどちらを返すのが良いのでしょうか?
-
[解決済み] JavaScriptでjson-objectのキーを取得する [重複].
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Object.create()とnew SomeFunction()の違いを理解する
-
[解決済み】JavaScriptでカスタムErrorを作成する方法は?
-
[解決済み] JSのDateからDay名
-
[解決済み] チェックボックスが選択されているかどうかを確認するjQuery
-
[解決済み] Chart.jsを使ってドーナツチャートの中にテキストを追加するには?
-
[解決済み] JavaScriptで、ある文字列が別の文字列の中に出現するすべてのインデックスを見つけるにはどうすればよいですか?
-
[解決済み] オブジェクトの配列からReactコンポーネントをレンダリングする
-
[解決済み] JavaScriptでの大文字小文字を区別しない正規表現
-
[解決済み] Javascript の parseInt() で先頭のゼロを削除する。
-
[解決済み] javascriptのキャンバスで画像をリサイズする (スムーズ)