JavaScript에서 추상 기본 클래스를 시뮬레이션 할 수 있습니까? 가장 우아한 방법은 무엇입니까?
다음과 같이하고 싶습니다.-
var cat = new Animal('cat');
var dog = new Animal('dog');
cat.say();
dog.say();
출력되어야합니다 : ‘bark’, ‘meow’
답변
추상 클래스를 만드는 간단한 방법은 다음과 같습니다.
/**
@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();
여기 에서 바이올린을 켜 십시오 (콘솔 출력을보십시오).
답변
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.
답변
다음과 같은 것을 의미합니까?
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
답변
Dean Edwards의 기본 클래스를 확인하십시오 : http://dean.edwards.name/weblog/2006/03/base/
또는 JavaScript의 고전적 상속에 대한 Douglas Crockford의 예제 / 기사 : http://www.crockford.com/javascript/inheritance.html
답변
JavaScript에서 추상 기본 클래스를 시뮬레이션 할 수 있습니까?
확실히. JavaScript에서 클래스 / 인스턴스 시스템을 구현하는 방법은 약 천 가지가 있습니다. 다음은 하나입니다.
// 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!
답변
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!
답변
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에서 작동합니다.
작동 방식을 이해하지 못한다면 프로토 타입 체인에 대해 읽어보십시오.