javascript継承を実現するいくつかの方法

2905 ワード

JAVSCRIPT 実現する引き継ぐ

オブジェクト詐称(マルチ相続):a.コード:

function ClassA(sColor) {
this.color = sColor;
this.sayColor = function () {
    console.log(this.color);
};
}
function ClassB(sName) {
this.name = sName;
this.sayName = function () {
    console.log(this.name);
};
}
function ClassC(sColor, sName) {
this.newMethod = ClassA;
this.newMethod(sColor);
delete this.newMethod;

this.newMethod = ClassB;
this.newMethod(sName);
delete this.newMethod;
}
var objA = new ClassA("blue");
var objC = new ClassC("red", "John");
objA.sayColor();
objC.sayColor();
objC.sayName();

b.出力:

blue
red
John

call()方法(推奨):a.コード:

function ClassA(sColor) {
this.color = sColor;
this.sayColor = function () {
    console.log(this.color);
};
}
function ClassB(sName) {
this.name = sName;
this.sayName = function () {
    console.log(this.name);
};
}
function ClassC(sColor, sName) {
ClassA.call(this,sColor)
ClassB.call(this,sName)
}
var objA = new ClassA("blue");
var objC = new ClassC("red", "John");
objA.sayColor();
objC.sayColor();
objC.sayName();

b.出力:

blue
red
John

appy()メソッド(推奨):a.コード:

function ClassA(sColor) {
this.color = sColor;
this.sayColor = function () {
    console.log(this.color);
};
}
function ClassB(sName) {
this.name = sName;
this.sayName = function () {
    console.log(this.name);
};
}
function ClassC(sColor, sName) {
ClassA.apply(this,new Array(sColor))
ClassB.apply(this,new Array(sName))
}
var objA = new ClassA("blue");
var objC = new ClassC("red", "John");
objA.sayColor();
objC.sayColor();
objC.sayName();

b.出力:

blue
red
John

プロトタイプチェーン(シングル継承):a.コード:

function ClassA(color) {
this.color = color
this.sayColor = function () {
    console.log(this.color);
};
}
function ClassB(name) {
this.name = name
this.sayName = function () {
    console.log(this.name);
};
}
ClassB.prototype = new ClassA("red");
var objA = new ClassA("blue");
var objB = new ClassB("John");
objA.sayColor();
objB.sayColor();
objB.sayName();

b.出力:

blue
red
John

ミキシングオブジェクトとプロトタイプチェーン(複数継承):a.コード:

function ClassA(sColor) {
this.color = sColor;
this.sayColor = function(){
    console.log(this.color)
}
}
function ClassB(sName) {
this.name = sName;
this.sayName = function(){
    console.log(this.name)
}
}
function ClassC(sColor, sName) {
ClassA.call(this, sColor);
ClassB.call(this, sName);
}
ClassC.prototype = new ClassA();
ClassC.prototype = new ClassB();
var objA = new ClassA("blue");
var objC = new ClassC("red", "John");
objA.sayColor();
objC.sayColor();
objC.sayName();

b.出力:

blue
red
John

説明:

    call()   apply()

javascriptカウントダウンタイマ