The following code works when I create my object with the constructor but when I do object.Create it doesn't get initialized properly. functionName is not a function. I have two questions. Why isn't the object.create working ?
How would I organize my code within the same Calculator Function so I could use both new and object.create ?
I know I can add the methods to Calculator.prototype and do Object.create but I was wondering if my code can be changed within the current structure to allow for both ?
//var calc = new Calculator();
var calc = Object.create(Calculator);
function Calculator(){
this.array = [];
this.results = 0;
this.calculate = function(){
try{
results = eval(this.array.join(''));
this.array = [results];
return results;
}
catch(error){
alert('Wrong arguments provided');
return this.array.join('');
}
},
this.isNumber = function(str){
return !isNaN(parseFloat(str)) && isFinite(str);
},
this.addToOperationsArray = function(str){
if (this.array.length <= 0 && !this.isNumber(str)){ // Don't add operand before any number.
return;
}
this.array.push(str);
},
this.clearEverything = function(){
this.array = [];
}
}
There is no constructor invocation with Object.create.
You can get similar results in a multitude of ways. See if something along these lines helps you:
function Calculator() {
this.array = [];
this.results = 0;
}
Calculator.prototype = {
calculate: function() {
try {
results = eval(this.array.join(''));
this.array = [results];
return results;
} catch (error) {
alert('Wrong arguments provided');
return this.array.join('');
}
},
isNumber: function(str) {
return !isNaN(parseFloat(str)) && isFinite(str);
},
addToOperationsArray: function(str) {
if (this.array.length <= 0 && !this.isNumber(str)) { // Don't add operand before any number.
return;
}
this.array.push(str);
},
clearEverything: function() {
this.array = [];
}
};
// create using 'new'
var calc1 = new Calculator();
// create using 'Object.create'
// the constructor function is not called
// but properties of returned object can be passed to the function, and
// you can control the enumerable, writable, configurable properties
var calc2 = Object.create(Calculator.prototype, {
'array': {
value: [],
enumerable: true
},
'results': {
value: 0,
enumerable: true
}
});
// create using 'Object.create'
// and invoke the constructor with 'call',
// explicitly setting 'this'
var calc3 = Object.create(Calculator.prototype);
Calculator.call(calc3);
console.log(calc1); // Calculator {array: Array[0], results: 0}
console.log(calc2); // Object {array: Array[0], results: 0}
console.log(calc3); // Object {array: Array[0], results: 0}
Object.create() //This for inherit the parent object
what you want is to instantiate the object, you can do it like this:
var calc = new Calculator() //This will inherit it's prototype and execute the constructor for you.
Object.create works with new side by side not against. Just to make it more clear about prototype inheritance and instantiate, let's take step back, I'll provide you with example:
// CREATE || Object.create for inheritence by prototyping
var Thing = function (name) {
this.type = "universal";
this.name = name;
}
Thing.prototype = {
say: function(something) {
console.log(this.name + " say something " + something);
},
check_soul: function (){
console.log(this.name + " soul is " + this.type);
}
}
// constructor for God
var God = function(name){
Thing.call(this, name); // Execute parent constructor also with current context
this.type = "pure"; // overwrite the type
}
God.prototype = Object.create(Thing.prototype); // inherit God from Thing
God.prototype.constructor = God; // implement the constructor
// constructor for Demon
var Demon = function(name){
Thing.call(this, name);
this.type = "corrupted";
}
Demon.prototype = Object.create(Thing.prototype, {
say: {
value: function(something){ // Overwrite Thing prototype for say
console.info(this.name + " say: Let's destory " + something + "!");
}}
}); // inherit Demon from Thing
Demon.prototype.constructor = Demon;
/////////////////////////////////////////////////////////////////////////////////////
// NEW || new for instantiation
var anonymous = new Thing("Anonymous");
anonymous.check_soul();
var god = new God("Zeus");
god.check_soul();
god.say("omni");
var demon = new Demon("Lucifer");
demon.check_soul();
demon.say("human");
Example above is too verbose? (ES2015 here to help) note that this can only apply on node v6 and above.
// CREATE || Object.create for inheritence by prototyping
'use strict';
class Thing {
constructor (name){
this.type = "universal";
this.name = name;
}
say(something) {
console.log(this.name + " say something " + something);
}
check_soul() {
console.log(this.name + " soul is " + this.type);
}
}
class God extends Thing { // inherit God from Thing and implement the constructor
constructor (name){
super(name); // Execute parent constructor also with current context
this.type = "pure"; // overwrite the type
}
}
class Demon extends Thing { // inherit Demon from Thing and implement the constructor
constructor (name){
super(name); // Execute parent constructor also with current context
this.type = "corrupted"; // overwrite the type
}
say(something) { // Overwrite Thing prototype for say
console.info(this.name + " say: Let's destory " + something + "!");
}
}
/////////////////////////////////////////////////////////////////////////////////////
// NEW || new for instantiation
var anonymous = new Thing("Anonymous");
anonymous.check_soul();
var god = new God("Zeus");
god.check_soul();
god.say("omni");
var demon = new Demon("Lucifer");
demon.check_soul();
demon.say("human");
a little bit late, may be you have noticed, but in your implementation theres is at least one side effect in the code Calculator.prototype.constructor this will point to Object.prototype.constructor instead of the Calculator constructor, what are you doing is overwriting every property of the prototype chain, it is best practice to use dot notation to add new properties Calculator.prototype.method = () => { // some code }
Related
I typically see examples of the revealing prototype pattern as shown in syntax #2 below, but i find syntax #1 more consistent. Is there anything different about them other than syntax? Functionally, performance wise, or other?
syntax #1:
function MyClass1(name){
this.name = name;
}
MyClass1.prototype = new function () {
var static = 0;
var getStatic = function () {
return static;
}
this.incStatic = function () {
static++;
return getStatic.call(this);
}
this.constructor = MyClass1
};
exactly the same as this #2:
function MyClass2(name){
this.name = name;
}
MyClass2.prototype = function () {
var static = 0;
function getStatic () {
return static;
}
function incStatic() {
static++;
return getStatic.call(this);
}
return {
incStatic:incStatic,
constructor:MyClass2
};
}();
Here is a fiddle demonstrating the exact same behaviors: http://jsfiddle.net/arctelix/FSk8z/
It appears that both syntax have exactly the same outcome. However, I have never seen an example as shown in #1, so i have to wonder why? For me # 1 is just a more constant syntax and i hate having to identify public members in a special return block.
Personally I consider it improper to reassign something.prototype. Instead, extend the prototype:
(function() {
var static = 0;
MyClass.prototype.getStatic() {return static;}
MyClass.prototype.incStatic() {return static++;}
})();
This whole thing came about because i am creating an MVC framework that utilizes a generic Class constructor. I ran these variations in the larger context of the Class constructor with two different implementation methods. Method 1 reassigns the prototype where method 2 extends it. Method 1 has a uniform prototype chain where method 2 adds a function prototype on top of the object prototype for syntax #1. The performance is about equal for both method 1 and 2.
Blue & Red = syntax #1.
Teal & Green = syntax #2.
Yellow & purple = a variation on syntax #2.
var Class = function (methods, options) {
//allow for Proper class name to show up in browser devtools
options = options || {}
var debug = options.debug || false
var protoTest = options.protoTest || 0
var pInternal = options.pInternal || true
var klassName = methods.constructor.name
console.log('------protoTest =', protoTest, '/ debugClass =', debug, '/ pInternal =', pInternal, '/ klassName = ',klassName)
//compile the constructor & internalMembers
var Class = function () {
//console.log('Class() is building:', !(init instanceof init))
//provide inernal object for constructor
if (pInternal) this.internal = {}
this.constructor.apply(this, arguments);
//remove internal from public scope
if (pInternal){
var int = this.internal
delete this.internal
}
//populate self with this and internal vars
if (pInternal){
var self = {pub:this, int:{}};
for (var v in int){
self.int[v] = int[v];
}
}else var self = this
// Instantiate internalMembers with self
var include = methods.include;
if (include) include.call(this, self);
};
//create constructor function with className (fixes class name in debugger)
if (debug == true && klassName) {
var klass = new Function("init", "return function " + klassName + "(){ init.apply(this,arguments) };")(Class);
}else var klass = Class
console.log('---type', typeof methods.prototype)
if (typeof methods.prototype == 'object'){
//must use traditional revealing prototype
var prototype = methods.prototype;
if (protoTest==0){
//overides prototype
if (prototype) klass.prototype = prototype;
}else{
//does not overide prototype
for (var p in prototype) klass.prototype[p] = prototype[p]
}
}
//create prototype from Class method
//----------------test 0
else if (protoTest==0){
//overides prototype (new has extra proto in chain)
var prototype = methods.prototype;
if (prototype) klass.prototype = new prototype();
}
//----------------test 1
else if (protoTest == 1){
//does not overide prototype and has uniform chain
var pms = new methods.prototype()
for (var p in pms) klass.prototype[p] = pms[p]
}
//----------------end test
//add other Class methods to prototype
var exclude = ['include', 'initialize', 'prototype'];
for (var property in methods) {
if (exclude.indexOf(property) == -1) {
klass.prototype[property] = methods[property];
}
}
return klass; //return the class
};
All the tests: http://jsperf.com/revealing-proto-test/4
The fiddle: http://jsfiddle.net/arctelix/Cp4nG/
There is a debug mode with tests as well: http://jsperf.com/revealing-proto-test/3
Here is a simple example of what I want :
var ConstBuilder = function() {
var constructor = function() {} ;
constructor.prototype = {} ;
return constructor ;
} ;
ConstBuilder.prototype = {
add : function(name, value) {
this.prototype[name] = value ;
}
} ;
var A = new ConstBuilder() ;
A.add('test', function() {
console.log('test') ;
}) ;
var a = new A() ;
a.test() ;
This code will fail as A is not an instance of ConstBuilder (because A comes from a returned var constructor = function() {} and won't have the methods defined in its prototype (add).
But this would be useful to modify the super constructor's prototype to have things like :
ConstBuilder.prototype.remove = function(name) {
delete this.prototype[name] ;
} ;
A.remove('test') ;
a.test ; // undefined
Is there a way to have a function as an instance of another ? So this function may implicitely "inherit" all the methods defined in its constructor's prototype.
Or if you have other suggestions, I aim to build modulable constructors - as instances with prototypes are.
Please make sure you have understood the difference between the .prototype property and the internal inheritance-prototype.
The code will fail as A is not an instance of ConstBuilder. Is there a way to have a function as an instance of another?
A is, as every constructor needs to be, a Function. So if you just define your add and remove methods on the Function.prototype, it will work:
Function.prototype.add = function(name, value) {
this.prototype[name] = value;
};
Function.prototype.remove = function(name) {
delete this.prototype[name];
};
function A() {}
A.add('test', function(){console.log('test');});
var a = new A();
a.test(); // test
A.remove('test');
a.test; // undefined
There is no possibility however to let a function inherit from something else than Function.prototype - see Can a JavaScript object have a prototype chain, but also be a function?. If you don't want to modify the native Function.prototype object, you still can use the mixin pattern:
var Constr = (function() {
function add(name, value) {
this.prototype[name] = value;
}
function remove(name) {
delete this.prototype[name];
}
return function mixin(c) {
c.add = add;
c.remove = remove;
return c;
};
})();
var A = Constr(function() {…});
A.add("test", …);
var a = new A();
a.test(); // test
I aim to build modulable constructors
You could use the builder pattern, as you just have seem to tried.
function ConstBuilder() {
this.prototype = {};
};
ConstBuilder.prototype = {
add: function(name, value) {
this.prototype[name] = value;
},
remove: function(name) {
delete this.prototype[name];
},
getConstructor: function() {
var constructor = function() {};
constructor.prototype = this.prototype;
this.prototype.constructor = constructor;
return constructor;
}
};
var A = new ConstBuilder().add('test', function() {
console.log('test');
}).getConstructor();
var a = new A();
a.test(); // test
To remove functions later, you would need to save a reference to the builder.
I think that you are looking for an example of how to do JavaScript's "prototypical inheritance". When JavaScript looks for a property on an object, it first checks the object itself. Next it checks the prototype. However, since everything in JavaScript is an object and the prototype is an object
function Root(){}
Root.prototype.fromRoot = function() { console.log("I'm on Root's prototype."); };
function Child(){}
Child.prototype = new Root();
Child.prototype.fromChild = function() { console.log("I'm on Child's prototype."); };
var r = new Root();
var c = new Child();
r.fromRoot(); // works
c.fromRoot(); // works
c.fromChild(); // works
r.fromChild(); // fails
function a (x,y,construct)
{
if (!construct) return;
this.x=x;
this.y=y;
}
a.prototype.methoda=function ()
{
return x+y;
}
function b (x,y,d,e)
{
a.call (this,x,y,true) //--- this would inherit all own Objects and Properties of a and become own properties of b
this.d=d;
this.e=e;
}
b.prototype=new a (); //--- this would only inherit the prototype, construct becomes false and isnt worked through, which if not would result in adding propertiy x and y to prototype instead of directly to instance of b,
b.prototype.constructor=b;
var test=new b (1,2,3,4);
b.methoda ();
second way
function a (x,y)
{
if (arguments.callee.doNotConstruct) return;
this.x=x;
this.y=y;
}
a.prototype.methoda=function ()
{
return x+y;
}
function b (x,y,d,e)
{
a.call (this,x,y) //--- this would inherit all own Objects and Properties of a and become own properties of b
this.d=d;
this.e=e;
}
a.doNotConstruct=true;
b.prototype=new a (); //--- this would only inherit the prototype, construct becomes false and isnt worked through, which if not would result in adding propertiy x and y to prototype instead of directly to instance of b,
a.doNotConstruct=false;
b.prototype.constructor=b;
var test=new b (1,2,3,4);
b.methoda ();
put this in a function
function prototypeInheritance (inheritor,parent)
{
parent.doNotConstruct=true;
inheritor=new parent ();
inheritor.prototype.constructor=inheritor;
inheritor.parent=parent;
parent.doNotConstruct=false;
}
you can call the parent property with (arguments.callee.parent) in the inheritor constructor and you can check doNotConstruct with arguments.callee.doNotConstruct in the parent constructor
I am new to JavaScript's (prototypal) inheritance and I'm trying to learn more about it.
I am using a simple observer pattern as example, in which I want observable objects to be derived from the 'subject' object. This is what I WANT to do:
function subject()
{
var callbacks = {}
this.register = function(name, callback)
{
callbacks[name] = callback;
}
this.unregister = function(name)
{
delete callbacks[name];
}
var trigger = function()
{
var a = arguments;
var t = this;
$.each(callbacks, function(name, callback)
{
callback.apply(t, a);
});
}
}
list.prototype = new subject()
function list()
{
var items = {}
this.add = function(name, item)
{
items[name] = item;
trigger('add', name);
}
this.remove = function(name)
{
delete items[name];
trigger('remove', name);
}
}
Now when using the code above like below, I run into my first problem:
var l = new list()
l.register('observer1', function() { console.log(this, arguments) });
l.add('item1', 'value1'); // <-- ReferenceError: trigger is not defined, trigger('add', name);
To continue testing I made the trigger function 'public' using this.trigger instead. Running my example again I run into the next problem:
var l = new list()
l.register('observer1', function() { console.log(this, arguments) });
l.add('item1', 'value1'); // <-- output: subject, ["add", "item1"]
The this object is subject, I want it to be list. My third problem occurs when creating another list:
var l2 = new list();
//Don;t register any observers
l2.add('item1', 'value1'); // <-- output: subject, ["add", "item1"]
The callbacks list is shared between the 2 lists.
I've tried similar things with Object.create(new subject()) as well and run into similar problems.
My 3 questions in this are:
Can I have private methods that can be used in derived objects (and
should I even care about having them private or public)?
How can I have the this object I want (without needing to use function.call in the derived object, if possible)?
How can I keep the callbacks list in the base object without it being shared?
An interesting question. As for #1 and #2: let's say you have a function foo:
function foo() {
var _private = 'private var!';
this.access = function () {
return _private;
}
}
access is a so-called privileged method, it's a closure that can access the private variable private.
you can inherit the whole thing by making use of call, like so:
function bar() {
foo.call(this);
}
var b = new bar();
console.log(b.output()); // prints 'private var!'
With the methods apply, call and bind you can establish the context of a function, effectively tamper with the this object. (your #2 question, read here )
Naturally you cannot make use of a totally private method in a derived object. You'd need an accessor method which would defeat the purpose of the original method being private. Having said that, that's the way it works in strongly typed languages too (in java if you mark a method as private not even subclases will be able to access it, it would have to be protected).
As for #3, I cannot think of how to keep callbacks shared and private.
But you can make it a static property for all instances of a function (much like a static property in a lanaguage like java) by simply declaring a function like:
function foo() {
}
add your prototypes which will be assigned to each instance
foo.prototype.bar = // ...
and a static property
foo.callbacks = [];
All instances of foo will share the callbacks property.
You can’t have private methods, and that’s that. It will never work both properly and nicely at the same time, so don’t bother trying to emulate them in JavaScript.
Then all you have to do is call the parent’s constructor in the derived constructor.
function subject()
{
var callbacks = {};
this.register = function(name, callback)
{
callbacks[name] = callback;
};
this.unregister = function(name)
{
delete callbacks[name];
};
this.trigger = function()
{
var a = arguments;
var t = this;
$.each(callbacks, function(name, callback)
{
callback.apply(t, a);
});
};
}
list.prototype = Object.create(subject);
list.prototype.constructor = list;
function list()
{
subject.call(this);
var items = {};
this.add = function(name, item)
{
items[name] = item;
this.trigger('add', name);
};
this.remove = function(name)
{
delete items[name];
this.trigger('remove', name);
};
}
Incorporating Joe's suggestion, this is what I eventually ended up with:
function subject()
{
var callbacks = {}
this.register = function(name, callback)
{
callbacks[name] = callback;
}
this.unregister = function(name)
{
delete callbacks[name];
}
trigger = function()
{
var a = arguments;
var t = this;
$.each(callbacks, function(name, callback)
{
callback.apply(t, a);
});
}
}
//without the following line, 'this' in firefox is 'subject' instead of 'list' (in chrome it is)
list.prototype = new subject()
//without these, 'list' is not an instanceof 'subject'
list.constructor = subject;
list.prototype.constructor = list;
function list(n)
{
this.name = n;
subject.call(this); //as suggested by Joe
var items = {}
this.add = function(name, item)
{
items[name] = item;
trigger.call(this, 'add', name); //no way to do this without using call/apply
}
this.remove = function(name)
{
delete items[name];
trigger.call(this, 'remove', name); //no way to do this without using call/apply
}
this.getitems = function() { return items }
}
//without the following line, 'this' in firefox is 'subject' instead of 'queue'
queue.prototype = new subject()
//without these, 'queue' is not an instanceof 'subject'
queue.constructor = subject;
queue.prototype.constructor = queue;
function queue(n)
{
this.name = n;
subject.call(this); //as suggested by Joe
var items = [];
this.enqueue = function(item)
{
items.push(item);
trigger.call(this, 'enqueue', item); //no way to do this without using call/apply
}
this.dequeue = function()
{
var d = items.shift();
trigger.call(this, 'dequeue', d); //no way to do this without using call/apply
return d;
}
this.getitems = function() { return items }
}
var l1 = new list('l1')
l1.register('observer1', function() { console.log('l1', this, arguments) });
l1.add('item1', 'value1');
// ^ 'l1', list { name = 'l1' ... }, ['add', 'item1']
var l2 = new list('l2')
l2.register('observer2', function() { console.log('l2', this, arguments) });
l2.add('item2', 'value2');
// ^ 'l2', list { name = 'l2' ... }, ['add', 'item2']
var q1 = new queue('q1')
q1.register('observer3', function() { console.log('q1', this, arguments) });
q1.enqueue('item3');
// ^ 'q1', queue { name = 'q1' ... }, ['enqueue', 'item3']
console.log(l1 instanceof list, l1 instanceof subject, l1 instanceof queue);
// ^ true, true, false
console.log(q1 instanceof list, q1 instanceof subject, q1 instanceof queue);
// ^ false, true, true
This ticks all of my boxes (except for the use of call, but I can live with that).
Thanks for all the help,
Mattie
EDIT: appearantly this does not work as expected. creating a new object overwrites the other objects callbacks
Is there a difference between the two codes below, I presume not.
function Agent(bIsSecret)
{
if(bIsSecret)
this.isSecret=true;
this.isActive = true;
this.isMale = false;
}
and
function Agent(bIsSecret)
{
if(bIsSecret)
this.isSecret=true;
}
Agent.prototype.isActive = true;
Agent.prototype.isMale = true;
There is a difference at least if you are assigning a non-primitive object to this.somevar or prototype.somevar.
Try running this:
function Agent(bIsSecret)
{
if(bIsSecret)
this.isSecret=true;
this.isActive = true;
this.isMale = false;
this.myArray = new Array(1,2,3);
}
function Agent2(bIsSecret)
{
if(bIsSecret)
this.isSecret = true;
}
Agent2.prototype.isActive = true;
Agent2.prototype.isMale = true;
Agent2.prototype.myArray = new Array(1,2,3);
var agent_a = new Agent();
var agent_b = new Agent();
var agent2_a = new Agent2();
var agent2_b = new Agent2();
if (agent_a.myArray == agent_b.myArray)
alert('agent_a.myArray == agent_b.myArray');
else
alert('agent_a.myArray != agent_b.myArray');
if (agent2_a.myArray == agent2_b.myArray)
alert('agent2_a.myArray == agent2_b.myArray');
else
alert('agent2_a.myArray != agent2_b.myArray');
No. 'prototype' used for implementing inheritance in Javascript. Such as that:
/** obsolete syntax **/
var Person = Class.create();
Person.prototype = {
initialize: function(name) {
this.name = name;
},
say: function(message) {
return this.name + ': ' + message;
}
};
var guy = new Person('Miro');
guy.say('hi');
// -> "Miro: hi"
var Pirate = Class.create();
// inherit from Person class:
Pirate.prototype = Object.extend(new Person(), {
// redefine the speak method
say: function(message) {
return this.name + ': ' + message + ', yarr!';
}
});
var john = new Pirate('Long John');
john.say('ahoy matey');
// -> "Long John: ahoy matey, yarr!"
code source and additional info you can find here: http://www.prototypejs.org/learn/class-inheritance
Functionally, this is the same. The latter, however, emphasizes similarities between Agent objects. You can see in a glimpse that these members have that value, while in a more complicated constructor function, with lots of conditionals, it's harder.
It also allows the javascript runtime to choose how it handles Agent member initializations. (do some precompilation, ...)
Assuming that this function is to be used as a constructor, the first with set properties on the new instance and the second on the prototype. If they are independent of the instance the two snippets are equivalent, but if they aren't (as their name suggest), then they are not.
Is it possible to simulate abstract base class in JavaScript? What is the most elegant way to do it?
Say, I want to do something like: -
var cat = new Animal('cat');
var dog = new Animal('dog');
cat.say();
dog.say();
It should output: 'bark', 'meow'
JavaScript Classes and Inheritance (ES6)
According to ES6, you can use JavaScript classes and inheritance to accomplish what you need.
JavaScript classes, introduced in ECMAScript 2015, are primarily syntactical sugar over JavaScript's existing prototype-based inheritance.
Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
First of all, we define our abstract class. This class can't be instantiated, but can be extended.
We can also define functions that must be implemented in all classes that extends this one.
/**
* 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");
}
}
After that, we can create our concrete Classes. These classes will inherit all functions and behaviour from abstract class.
/**
* 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 {}
And the results...
// 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.
One simple way to create an abstract class is this:
/**
#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!");
}
The Animal "class" and the say method are abstract.
Creating an instance would throw an error:
new Animal(); // throws
This is how you "inherit" from it:
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 looks just like it.
And this is how your scenario plays out:
var cat = new Cat();
var dog = new Dog();
cat.say();
dog.say();
Fiddle here (look at the console output).
Do you mean something like this:
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
You might want to check out Dean Edwards' Base Class: http://dean.edwards.name/weblog/2006/03/base/
Alternatively, there is this example / article by Douglas Crockford on classical inheritance in JavaScript: http://www.crockford.com/javascript/inheritance.html
Is it possible to simulate abstract base class in JavaScript?
Certainly. There are about a thousand ways to implement class/instance systems in JavaScript. Here is one:
// 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');
That's not really an abstract base class of course. Do you mean something like:
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!
Question is quite old, but I created some possible solution how to create abstract "class" and block creation of object that type.
//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();
As You can see last object give us error, it is because Animal in prototype has property abstract. To be sure it is Animal not something which has Animal.prototype in prototype chain I do:
Object.getPrototypeOf(this).hasOwnProperty("abstract")
So I check that my closest prototype object has abstract property, only object created directly from Animal prototype will have this condition on true. Function hasOwnProperty checks only properties of current object not his prototypes, so this gives us 100% sure that property is declared here not in prototype chain.
Every object descended from Object inherits the hasOwnProperty method. This method can be used to determine whether an object has the specified property as a direct property of that object; unlike the in operator, this method does not check down the object's prototype chain. More about it:
In my proposition we not have to change constructor every time after Object.create like it is in current best answer by #Jordão.
Solution also enables to create many abstract classes in hierarchy, we need only to create abstract property in prototype.
Another thing you might want to enforce is making sure your abstract class is not instantiated. You can do that by defining a function that acts as FLAG ones set as the Abstract class constructor. This will then try to construct the FLAG which will call its constructor containing exception to be thrown. Example below:
(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();
})()
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();
This isn't guaranteed to work as __proto__ isn't a standard variable, but it works at least in Firefox and Safari.
If you don't understand how it works, read about the prototype chain.
You can create abstract classes by using object prototypes, a simple example can be as follows :
var SampleInterface = {
addItem : function(item){}
}
You can change above method or not, it is up to you when you implement it. For a detailed observation, you may want to visit here.
Javascript can have inheritance, check out the URL below:
http://www.webreference.com/js/column79/
Andrew
We can use Factory design pattern in this case. Javascript use prototype to inherit the parent's members.
Define the parent class constructor.
var Animal = function() {
this.type = 'animal';
return this;
}
Animal.prototype.tired = function() {
console.log('sleeping: zzzZZZ ~');
}
And then create children class.
// These are the child classes
Animal.cat = function() {
this.type = 'cat';
this.says = function() {
console.log('says: meow');
}
}
Then define the children class constructor.
// 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;
}
Test it.
var timmy = Animal.born('cat');
console.log(timmy.type) // cat
timmy.says(); // meow
timmy.tired(); // zzzZZZ~
Here's the Codepen link for the full example coding.
//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!
I think All Those answers specially first two (by some and jordão) answer the question clearly with conventional prototype base JavaScript concept.
Now as you want the animal class constructor to behave according to the passed parameter to the construction, I think this is very much similar to basic behavior of Creational Patterns for example Factory Pattern.
Here i made a little approach to make it work that way.
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
/****************************************/
/* 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();
If you want to make sure that your base classes and their members are strictly abstract here is a base class that does this for you:
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
Strict mode makes it impossible to log the caller in the throwAbstract method but the error should occur in a debug environment that would show the stack trace.
"use strict";
function Abstract (...arg){
// create abstract constructor
if( this.constructor.name === 'Object' || this.constructor === Abstract ) throw { ErrorType : "can't call abstract class with new !" , }
// ceate abstract method
Object.defineProperty( this , 'config' , {
value : function(){
console.log('config parent')
}
});
// or other
return this ;
};
class Home extends Abstract{
name = '';
constructor(...arg){
super(...arg) ;
}
config(){
// this method not working
console.log('config child')
}
}
let y = new Home( "home" , 'dasd');
y.config();