JavaScriptで抽象基本クラスを作成するにはどうすればよいですか?


109

JavaScriptで抽象基本クラスをシミュレートすることは可能ですか?それを行う最もエレガントな方法は何ですか?

たとえば、次のようなことをしたいとします。

var cat = new Animal('cat');
var dog = new Animal('dog');

cat.say();
dog.say();

次のように出力されます: 'bark'、 'meow'


回答:


127

抽象クラスを作成する簡単な方法の1つは次のとおりです。

/**
 @constructor
 @abstract
 */
var Animal = function() {
    if (this.constructor === Animal) {
      throw new Error("Can't instantiate abstract class!");
    }
    // Animal initialization...
};

/**
 @abstract
 */
Animal.prototype.say = function() {
    throw new Error("Abstract method!");
}

Animal「クラス」とsayメソッドが抽象的です。

インスタンスを作成するとエラーがスローされます。

new Animal(); // throws

これは、それを「継承」する方法です。

var Cat = function() {
    Animal.apply(this, arguments);
    // Cat initialization...
};
Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;

Cat.prototype.say = function() {
    console.log('meow');
}

Dog ちょうどそれのように見えます。

そして、これはあなたのシナリオがどのように展開されるかです:

var cat = new Cat();
var dog = new Dog();

cat.say();
dog.say();

ここをいじってください(コンソールの出力を見てください)。


私はOOPに慣れていないので、よろしければ1行ずつ説明してください。ありがとう!
React Developer

2
@undefined:それを理解するには、JavaScriptでプロトタイプの継承を調べることをお勧めします。これは良いガイドです。
ジョルダン2014年

返信ありがとう..リンクを通過します。
React Developer、

これの最も重要な部分は、最初のコードスニペットで、エラーがスローされていることです。アプリケーションの実行を続行するために、警告をスローするか、オブジェクトの代わりにnull値を返すこともできます。これは、実際の実装に依存します。私の意見では、これは抽象JS「クラス」を実装する正しい方法です。
dudewad

1
@ G1P:これはJavascriptで「スーパークラスコンストラクター」を実行する通常の方法であり、そのように手動で実行する必要があります。
ジョルダン

46

JavaScriptのクラスと継承(ES6)

ES6によると、JavaScriptクラスと継承を使用して、必要なことを実行できます。

ECMAScript 2015で導入されたJavaScriptクラスは、主にJavaScriptの既存のプロトタイプベースの継承に対する構文上の砂糖です。

リファレンス:https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

まず、抽象クラスを定義します。このクラスはインスタンス化できませんが、拡張することはできます。これを拡張するすべてのクラスに実装する必要がある関数を定義することもできます。

/**
 * Abstract Class Animal.
 *
 * @class Animal
 */
class Animal {

  constructor() {
    if (this.constructor == Animal) {
      throw new Error("Abstract classes can't be instantiated.");
    }
  }

  say() {
    throw new Error("Method 'say()' must be implemented.");
  }

  eat() {
    console.log("eating");
  }
}

その後、具体的なクラスを作成できます。これらのクラスは、抽象クラスからすべての機能と動作を継承します。

/**
 * Dog.
 *
 * @class Dog
 * @extends {Animal}
 */
class Dog extends Animal {
  say() {
    console.log("bark");
  }
}

/**
 * Cat.
 *
 * @class Cat
 * @extends {Animal}
 */
class Cat extends Animal {
  say() {
    console.log("meow");
  }
}

/**
 * Horse.
 *
 * @class Horse
 * @extends {Animal}
 */
class Horse extends Animal {}

そして結果...

// RESULTS

new Dog().eat(); // eating
new Cat().eat(); // eating
new Horse().eat(); // eating

new Dog().say(); // bark
new Cat().say(); // meow
new Horse().say(); // Error: Method say() must be implemented.

new Animal(); // Error: Abstract classes can't be instantiated.

27

次のような意味ですか?

function Animal() {
  //Initialization for all Animals
}

//Function and properties shared by all instances of Animal
Animal.prototype.init=function(name){
  this.name=name;
}
Animal.prototype.say=function(){
    alert(this.name + " who is a " + this.type + " says " + this.whattosay);
}
Animal.prototype.type="unknown";

function Cat(name) {
    this.init(name);

    //Make a cat somewhat unique
    var s="";
    for (var i=Math.ceil(Math.random()*7); i>=0; --i) s+="e";
    this.whattosay="Me" + s +"ow";
}
//Function and properties shared by all instances of Cat    
Cat.prototype=new Animal();
Cat.prototype.type="cat";
Cat.prototype.whattosay="meow";


function Dog() {
    //Call init with same arguments as Dog was called with
    this.init.apply(this,arguments);
}

Dog.prototype=new Animal();
Dog.prototype.type="Dog";
Dog.prototype.whattosay="bark";
//Override say.
Dog.prototype.say = function() {
        this.openMouth();
        //Call the original with the exact same arguments
        Animal.prototype.say.apply(this,arguments);
        //or with other arguments
        //Animal.prototype.say.call(this,"some","other","arguments");
        this.closeMouth();
}

Dog.prototype.openMouth=function() {
   //Code
}
Dog.prototype.closeMouth=function() {
   //Code
}

var dog = new Dog("Fido");
var cat1 = new Cat("Dash");
var cat2 = new Cat("Dot");


dog.say(); // Fido the Dog says bark
cat1.say(); //Dash the Cat says M[e]+ow
cat2.say(); //Dot the Cat says M[e]+ow


alert(cat instanceof Cat) // True
alert(cat instanceof Dog) // False
alert(cat instanceof Animal) // True

おそらく私はそれを逃した。基本クラス(動物)の抽象はどこにありますか?
HairOfTheDog

5
@HairOfTheDogはい、あなたはこれが約5年前に回答されたこと、その時点のjavascriptには抽象クラスがなかったこと、質問はそれをシミュレートする方法(動物でwhattosayは定義されていません)であること、そしてこの回答が明確に尋ねることを逃しました提案された答えが質問者が探していたものである場合。JavaScriptの抽象クラスのソリューションを提供するとは主張していません。質問者は私や他の人に返信する気にならなかったので、それが彼のために働いたかどうかはわかりません。誰か他の人の質問に対する5歳の提案された回答がうまくいかなかったとしたら、すみません。
いくつかの

15

Dean Edwardsの基本クラスを確認してください。http//dean.edwards.name/weblog/2006/03/base/

または、JavaScriptの従来の継承に関するDouglas Crockfordの例/記事があります。http//www.crockford.com/javascript/inheritance.html


13
Crockfordリンクに関しては、それは大量のごみです。彼はその記事の最後にメモを追加しました:「JavaScriptでクラシックモデルをサポートしようとする私の初期の試みは間違いだと思います。」
マットボール

11

JavaScriptで抽象基本クラスをシミュレートすることは可能ですか?

もちろん。JavaScriptでクラス/インスタンスシステムを実装するには、約1000通りの方法があります。ここに1つあります:

// Classes magic. Define a new class with var C= Object.subclass(isabstract),
// add class members to C.prototype,
// provide optional C.prototype._init() method to initialise from constructor args,
// call base class methods using Base.prototype.call(this, ...).
//
Function.prototype.subclass= function(isabstract) {
    if (isabstract) {
        var c= new Function(
            'if (arguments[0]!==Function.prototype.subclass.FLAG) throw(\'Abstract class may not be constructed\'); '
        );
    } else {
        var c= new Function(
            'if (!(this instanceof arguments.callee)) throw(\'Constructor called without "new"\'); '+
            'if (arguments[0]!==Function.prototype.subclass.FLAG && this._init) this._init.apply(this, arguments); '
        );
    }
    if (this!==Object)
        c.prototype= new this(Function.prototype.subclass.FLAG);
    return c;
}
Function.prototype.subclass.FLAG= new Object();

var cat = new Animal( 'cat');

もちろん、これは実際には抽象的な基本クラスではありません。次のような意味ですか?

var Animal= Object.subclass(true); // is abstract
Animal.prototype.say= function() {
    window.alert(this._noise);
};

// concrete classes
var Cat= Animal.subclass();
Cat.prototype._noise= 'meow';
var Dog= Animal.subclass();
Dog.prototype._noise= 'bark';

// usage
var mycat= new Cat();
mycat.say(); // meow!
var mygiraffe= new Animal(); // error!

なぜ邪悪なnew Function(...)構文を使用するのですか?var c = function(){...}; 良くなる?
fionbio 2009

2
「var c = function(){...}」は、subclass()または他の包含スコープ内の任意のものにクロージャーを作成します。おそらく重要ではありませんが、不要な可能性のある親スコープをクリーンな状態に保ちたいと思いました。ピュアテキストのFunction()コンストラクターはクロージャーを回避します。
ボビンス2009

10
Animal = function () { throw "abstract class!" }
Animal.prototype.name = "This animal";
Animal.prototype.sound = "...";
Animal.prototype.say = function() {
    console.log( this.name + " says: " + this.sound );
}

Cat = function () {
    this.name = "Cat";
    this.sound = "meow";
}

Dog = function() {
    this.name = "Dog";
    this.sound  = "woof";
}

Cat.prototype = Object.create(Animal.prototype);
Dog.prototype = Object.create(Animal.prototype);

new Cat().say();    //Cat says: meow
new Dog().say();    //Dog says: woof 
new Animal().say(); //Uncaught abstract class! 

サブクラスのコンストラクターがスーパークラスのコンストラクターを呼び出すことができますか?(ある言語でsuperを呼び出すように...そうであれば、無条件に例外を発生させます
非極性極性

5
function Animal(type) {
    if (type == "cat") {
        this.__proto__ = Cat.prototype;
    } else if (type == "dog") {
        this.__proto__ = Dog.prototype;
    } else if (type == "fish") {
        this.__proto__ = Fish.prototype;
    }
}
Animal.prototype.say = function() {
    alert("This animal can't speak!");
}

function Cat() {
    // init cat
}
Cat.prototype = new Animal();
Cat.prototype.say = function() {
    alert("Meow!");
}

function Dog() {
    // init dog
}
Dog.prototype = new Animal();
Dog.prototype.say = function() {
    alert("Bark!");
}

function Fish() {
    // init fish
}
Fish.prototype = new Animal();

var newAnimal = new Animal("dog");
newAnimal.say();

これは__proto__標準変数と同じように機能することは保証されていませんが、少なくともFirefoxとSafariでは機能します。

仕組みがわからない場合は、プロトタイプチェーンについてお読みください。


protoは、FFとChomeでのみAFAIKを動作させます(IEもOperaもサポートしていません。私はSafariでテストしていません)。ところで、あなたはそれを間違っています。基本クラス(動物)は、新しい種類の動物が必要になるたびに編集する必要があります。
いくつかの

SafariとChromeはどちらも同じJavaScriptエンジンを使用しています。彼が継承のしくみだけを知りたいと思っていたわけではなかったので、私は彼の例にできるだけ近づくようにしました。
GeorgSchölly、2009

4
SafariとChromeは同じJavaScriptエンジンを使用しません。SafariはJavaScriptCoreを使用し、ChromeはV8を使用します。両方のブラウザーが共有するのは、レイアウトエンジン、WebKitです。
CMS

@GeorgSchölly新しいObject.getPrototypeOf構成を使用するように回答を編集することを検討してください
Benjamin

@ベンジャミン:MozillaよるとsetPrototypeOf、コードに必要な方法はまだありません。
GeorgSchölly2013年

5

オブジェクトプロトタイプを使用して抽象クラスを作成できます。簡単な例は次のとおりです。

var SampleInterface = {
   addItem : function(item){}  
}

上記の方法を変更することもできますが、実装するかどうかはあなた次第です。詳細な観察については、こちらをご覧ください


5

質問はかなり古いですが、抽象「クラス」を作成し、そのタイプのオブジェクトの作成をブロックする方法をいくつかの可能な解決策を作成しました。

//our Abstract class
var Animal=function(){
  
    this.name="Animal";
    this.fullname=this.name;
    
    //check if we have abstract paramater in prototype
    if (Object.getPrototypeOf(this).hasOwnProperty("abstract")){
    
    throw new Error("Can't instantiate abstract class!");
    
    
    }
    

};

//very important - Animal prototype has property abstract
Animal.prototype.abstract=true;

Animal.prototype.hello=function(){

   console.log("Hello from "+this.name);
};

Animal.prototype.fullHello=function(){

   console.log("Hello from "+this.fullname);
};

//first inheritans
var Cat=function(){

	  Animal.call(this);//run constructor of animal
    
    this.name="Cat";
    
    this.fullname=this.fullname+" - "+this.name;

};

Cat.prototype=Object.create(Animal.prototype);

//second inheritans
var Tiger=function(){

    Cat.call(this);//run constructor of animal
    
    this.name="Tiger";
    
    this.fullname=this.fullname+" - "+this.name;
    
};

Tiger.prototype=Object.create(Cat.prototype);

//cat can be used
console.log("WE CREATE CAT:");
var cat=new Cat();
cat.hello();
cat.fullHello();

//tiger can be used

console.log("WE CREATE TIGER:");
var tiger=new Tiger();
tiger.hello();
tiger.fullHello();


console.log("WE CREATE ANIMAL ( IT IS ABSTRACT ):");
//animal is abstract, cannot be used - see error in console
var animal=new Animal();
animal=animal.fullHello();

最後のオブジェクトでエラーが発生していることがわかりますが、これはプロトタイプのアニマルにpropertyがあるためabstractです。確かにそれは動物ではなく動物ですAnimal.prototypeプロトタイプチェーンにある:

Object.getPrototypeOf(this).hasOwnProperty("abstract")

したがって、最も近いプロトタイプオブジェクトにabstractプロパティがあることを確認します。Animalします。プロトタイプがこの条件をtrueに設定します。関数hasOwnPropertyは、プロトタイプではなく現在のオブジェクトのプロパティのみをチェックするため、プロトタイプチェーンではなく、ここでプロパティが宣言されていることを100%確認できます。

Objectから派生したすべてのオブジェクトは、 hasOwnPropertyメソッドをます。このメソッドを使用して、オブジェクトがそのオブジェクトの直接プロパティとして指定されたプロパティを持っているかどうかを判断できます。in演算子とは異なり、このメソッドはオブジェクトのプロトタイプチェーンをチェックダウンしません。詳細:

私の命題では変更する必要はありません constructorObject.createでは、@Jordãoによる現在のベストアンサーのように、毎回。

ソリューションでは、階層に多くの抽象クラスを作成することもできますabstract。プロトタイプにプロパティを作成するだけで済みます。


4

強制したいもう1つのことは、抽象クラスがインスタンス化されないようにすることです。そのためには、抽象クラスのコンストラクターとして設定されたFLAG関数として機能する関数を定義します。これにより、スローされる例外を含むコンストラクターを呼び出すFLAGの構築が試行されます。以下の例:

(function(){

    var FLAG_ABSTRACT = function(__class){

        throw "Error: Trying to instantiate an abstract class:"+__class
    }

    var Class = function (){

        Class.prototype.constructor = new FLAG_ABSTRACT("Class");       
    }

    //will throw exception
    var  foo = new Class();

})()


2

Factoryこの場合、デザインパターンが使用できます。JavaScriptはprototype、親のメンバーを継承するために使用します。

親クラスのコンストラクタを定義します。

var Animal = function() {
  this.type = 'animal';
  return this;
}
Animal.prototype.tired = function() {
  console.log('sleeping: zzzZZZ ~');
}

そして、子クラスを作成します。

// These are the child classes
Animal.cat = function() {
  this.type = 'cat';
  this.says = function() {
    console.log('says: meow');
  }
}

次に、子クラスコンストラクターを定義します。

// Define the child class constructor -- Factory Design Pattern.
Animal.born = function(type) {
  // Inherit all members and methods from parent class,
  // and also keep its own members.
  Animal[type].prototype = new Animal();
  // Square bracket notation can deal with variable object.
  creature = new Animal[type]();
  return creature;
}

試して。

var timmy = Animal.born('cat');
console.log(timmy.type) // cat
timmy.says(); // meow
timmy.tired(); // zzzZZZ~

これが完全なコーディング例のCodepenリンクです。


1
//Your Abstract class Animal
function Animal(type) {
    this.say = type.say;
}

function catClass() {
    this.say = function () {
        console.log("I am a cat!")
    }
}
function dogClass() {
    this.say = function () {
        console.log("I am a dog!")
    }
}
var cat = new Animal(new catClass());
var dog = new Animal(new dogClass());

cat.say(); //I am a cat!
dog.say(); //I am a dog!

これはJavaScriptのポリモーフィズムです。オーバーライドを実装するためにいくつかのチェックを行うことができます。
Paul Orazulike 2017年

0

私はすべてのそれらの答えが特別に最初の2つ(いくつかjordãoによって )は、従来のプロトタイプベースのJSコンセプトで問題に明確に答えると思います。
ここで、構築に渡されたパラメーターに従って動物クラスコンストラクターを動作させたいので、これはCreational Patterns、たとえばFactory Patternの基本的な動作と非常によく似ていると思います 。

ここで私はそれをそのように機能させるために少しアプローチをしました。

var Animal = function(type) {
    this.type=type;
    if(type=='dog')
    {
        return new Dog();
    }
    else if(type=="cat")
    {
        return new Cat();
    }
};



Animal.prototype.whoAreYou=function()
{
    console.log("I am a "+this.type);
}

Animal.prototype.say = function(){
    console.log("Not implemented");
};




var Cat =function () {
    Animal.call(this);
    this.type="cat";
};

Cat.prototype=Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;

Cat.prototype.say=function()
{
    console.log("meow");
}



var Dog =function () {
    Animal.call(this);
    this.type="dog";
};

Dog.prototype=Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.say=function()
{
    console.log("bark");
}


var animal=new Animal();


var dog = new Animal('dog');
var cat=new Animal('cat');

animal.whoAreYou(); //I am a undefined
animal.say(); //Not implemented


dog.whoAreYou(); //I am a dog
dog.say(); //bark

cat.whoAreYou(); //I am a cat
cat.say(); //meow

これへのリンク:programmers.stackexchange.com/questions/219543/…このAnimalコンストラクターはアンチパターンと見なすことができ、スーパークラスはサブクラスに関する知識を持っていてはなりません。(リスコフおよび
開閉の

0
/****************************************/
/* version 1                            */
/****************************************/

var Animal = function(params) {
    this.say = function()
    {
        console.log(params);
    }
};
var Cat = function() {
    Animal.call(this, "moes");
};

var Dog = function() {
    Animal.call(this, "vewa");
};


var cat = new Cat();
var dog = new Dog();

cat.say();
dog.say();


/****************************************/
/* version 2                            */
/****************************************/

var Cat = function(params) {
    this.say = function()
    {
        console.log(params);
    }
};

var Dog = function(params) {
    this.say = function()
    {
        console.log(params);
    }
};

var Animal = function(type) {
    var obj;

    var factory = function()
    {
        switch(type)
        {
            case "cat":
                obj = new Cat("bark");
                break;
            case "dog":
                obj = new Dog("meow");
                break;
        }
    }

    var init = function()
    {
        factory();
        return obj;
    }

    return init();
};


var cat = new Animal('cat');
var dog = new Animal('dog');

cat.say();
dog.say();

私の見解では、これは少ないコードで良い結果を得るための最もエレガントな方法です。
Tamas Romeo

1
これが役立つ理由を説明してください。コードを配布することは、コードがなぜ有用であるかを説明することほど有用ではありません。それは誰かに魚を渡すこと、または彼らに釣り方を教えることの違いです。
ティンマン

多くは、JavaScriptプログラミング手法のプロトタイプやコンストラクターで使用していません。たとえそれらが多くの状況で役立つとしても。それらのために、私はコードが有用であると思います。コードが他のコードより優れているからではなく、理解しやすいためです
Tamas Romeo

0

基本クラスとそのメンバーが厳密に抽象的であることを確認したい場合は、これを行う基本クラスを次に示します。

class AbstractBase{
    constructor(){}
    checkConstructor(c){
        if(this.constructor!=c) return;
        throw new Error(`Abstract class ${this.constructor.name} cannot be instantiated`);
    }
    throwAbstract(){
        throw new Error(`${this.constructor.name} must implement abstract member`);}    
}

class FooBase extends AbstractBase{
    constructor(){
        super();
        this.checkConstructor(FooBase)}
    doStuff(){this.throwAbstract();}
    doOtherStuff(){this.throwAbstract();}
}

class FooBar extends FooBase{
    constructor(){
        super();}
    doOtherStuff(){/*some code here*/;}
}

var fooBase = new FooBase(); //<- Error: Abstract class FooBase cannot be instantiated
var fooBar = new FooBar(); //<- OK
fooBar.doStuff(); //<- Error: FooBar must implement abstract member
fooBar.doOtherStuff(); //<- OK

ストリクトモードでは、呼び出し元をthrowAbstractメソッドに記録できませんが、スタックトレースを表示するデバッグ環境でエラーが発生するはずです。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.