すでに述べたように、は使用しないでください__proto__
。これは非標準のプロパティです。 (現在、ブラウザーではJavaScript用に標準化されています。それでも使用しないでください。)しかし、
Subclass.prototype = new Superclass(); // Don't do this
あまり良い方法でもありません。Superclass
パラメータを期待する場合はどうなりますか?
より良い選択肢があります。
ES2015以降
class
このすべての配管を処理します。完全な例:
class Superclass {
constructor(superProperty) {
this.superProperty = superProperty;
}
method() {
console.log("Superclass's method says: " + this.superProperty);
}
}
class Subclass extends Superclass {
constructor(superProperty, subProperty) {
super(superProperty);
this.subProperty = subProperty;
}
method() {
super.method(); // Optional, do it if you want super's logic done
console.log("Subclass's method says: " + this.subProperty);
}
}
let o = new Subclass("foo", "bar");
console.log("superProperty", o.superProperty);
console.log("subProperty", o.subProperty);
console.log("method():");
o.method();
ES5以前
からのみSubclass.prototype
継承しましょう。Superclass.prototype
これは、たとえばES5を使用して実行できますObject.create
。
Subclass.prototype = Object.create(Superclass.prototype);
Subclass.prototype.constructor = Subclass;
次に、では、オブジェクトを参照してSubclass
呼び出し、初期化する機会があります。Superclass
this
function Subclass() {
Superclass.call(this); // Pass along any args needed
}
完全な例:
function Superclass(superProperty) {
this.superProperty = superProperty;
}
Superclass.prototype.method = function() {
console.log("Superclass's method says: " + this.superProperty);
};
function Subclass(superProperty, subProperty) {
Superclass.call(this, superProperty);
this.subProperty = subProperty;
}
Subclass.prototype = Object.create(Superclass.prototype);
Subclass.prototype.constructor = Subclass;
Subclass.prototype.method = function() {
Superclass.prototype.method.call(this); // Optional, do it if you want super's logic done
console.log("Subclass's method says: " + this.subProperty);
};
var o = new Subclass("foo", "bar");
console.log("superProperty", o.superProperty);
console.log("subProperty", o.subProperty);
console.log("method():");
o.method();
ES3以前
ES3以前にはがありませんがObject.create
、ほぼ同じ方法でプロトタイプを設定する関数を簡単に作成できます。
function objectCreate(proto) {
var ctor = function() { };
ctor.prototype = proto;
return new ctor;
}
(注:Object.create
引数を1つだけ取るものを作成することでハーフシムを作成できますが、の複数引数バージョンをシムすることはObject.create
できないため、ページ上の他のコードも使用すると、間違ったアイデアが表示されますObject.create
。)
次に、ES5の例と同じことを行います。
完全な例:
function objectCreate(proto) {
var ctor = function() { };
ctor.prototype = proto;
return new ctor;
}
function Superclass(superProperty) {
this.superProperty = superProperty;
}
Superclass.prototype.method = function() {
console.log("Superclass's method says: " + this.superProperty);
};
function Subclass(superProperty, subProperty) {
Superclass.call(this, superProperty);
this.subProperty = subProperty;
}
Subclass.prototype = objectCreate(Superclass.prototype);
Subclass.prototype.constructor = Subclass;
Subclass.prototype.method = function() {
Superclass.prototype.method.call(this); // Optional, do it if you want super's logic done
console.log("Subclass's method says: " + this.subProperty);
};
var o = new Subclass("foo", "bar");
console.log("superProperty", o.superProperty);
console.log("subProperty", o.subProperty);
console.log("method():");
o.method();