Is it possible to call the base method from a prototype method in JavaScript if it's been overridden?
MyClass = function(name){
this.name = name;
this.do = function() {
//do somthing
}
};
MyClass.prototype.do = function() {
if (this.name === 'something') {
//do something new
} else {
//CALL BASE METHOD
}
};
I did not understand what exactly you're trying to do, but normally implementing object-specific behaviour is done along these lines:
function MyClass(name) {
this.name = name;
}
MyClass.prototype.doStuff = function() {
// generic behaviour
}
var myObj = new MyClass('foo');
var myObjSpecial = new MyClass('bar');
myObjSpecial.doStuff = function() {
// do specialised stuff
// how to call the generic implementation:
MyClass.prototype.doStuff.call(this /*, args...*/);
}
Well one way to do it would be saving the base method and then calling it from the overriden method, like so
MyClass.prototype._do_base = MyClass.prototype.do;
MyClass.prototype.do = function(){
if (this.name === 'something'){
//do something new
}else{
return this._do_base();
}
};
I'm afraid your example does not work the way you think. This part:
this.do = function(){ /*do something*/ };
overwrites the definition of
MyClass.prototype.do = function(){ /*do something else*/ };
Since the newly created object already has a "do" property, it does not look up the prototypal chain.
The classical form of inheritance in Javascript is awkard, and hard to grasp. I would suggest using Douglas Crockfords simple inheritance pattern instead. Like this:
function my_class(name) {
return {
name: name,
do: function () { /* do something */ }
};
}
function my_child(name) {
var me = my_class(name);
var base_do = me.do;
me.do = function () {
if (this.name === 'something'){
//do something new
} else {
base_do.call(me);
}
}
return me;
}
var o = my_child("something");
o.do(); // does something new
var u = my_child("something else");
u.do(); // uses base function
In my opinion a much clearer way of handling objects, constructors and inheritance in javascript. You can read more in Crockfords Javascript: The good parts.
I know this post is from 4 years ago, but because of my C# background I was looking for a way to call the base class without having to specify the class name but rather obtain it by a property on the subclass. So my only change to Christoph's answer would be
From this:
MyClass.prototype.doStuff.call(this /*, args...*/);
To this:
this.constructor.prototype.doStuff.call(this /*, args...*/);
if you define a function like this (using OOP)
function Person(){};
Person.prototype.say = function(message){
console.log(message);
}
there is two ways to call a prototype function: 1) make an instance and call the object function:
var person = new Person();
person.say('hello!');
and the other way is... 2) is calling the function directly from the prototype:
Person.prototype.say('hello there!');
This solution uses Object.getPrototypeOf
TestA is super that has getName
TestB is a child that overrides getName but, also has
getBothNames that calls the super version of getName as well as the child version
function TestA() {
this.count = 1;
}
TestA.prototype.constructor = TestA;
TestA.prototype.getName = function ta_gn() {
this.count = 2;
return ' TestA.prototype.getName is called **';
};
function TestB() {
this.idx = 30;
this.count = 10;
}
TestB.prototype = new TestA();
TestB.prototype.constructor = TestB;
TestB.prototype.getName = function tb_gn() {
return ' TestB.prototype.getName is called ** ';
};
TestB.prototype.getBothNames = function tb_gbn() {
return Object.getPrototypeOf(TestB.prototype).getName.call(this) + this.getName() + ' this object is : ' + JSON.stringify(this);
};
var tb = new TestB();
console.log(tb.getBothNames());
function NewClass() {
var self = this;
BaseClass.call(self); // Set base class
var baseModify = self.modify; // Get base function
self.modify = function () {
// Override code here
baseModify();
};
}
An alternative :
// shape
var shape = function(type){
this.type = type;
}
shape.prototype.display = function(){
console.log(this.type);
}
// circle
var circle = new shape('circle');
// override
circle.display = function(a,b){
// call implementation of the super class
this.__proto__.display.apply(this,arguments);
}
If I understand correctly, you want Base functionality to always be performed, while a piece of it should be left to implementations.
You might get helped by the 'template method' design pattern.
Base = function() {}
Base.prototype.do = function() {
// .. prologue code
this.impldo();
// epilogue code
}
// note: no impldo implementation for Base!
derived = new Base();
derived.impldo = function() { /* do derived things here safely */ }
If you know your super class by name, you can do something like this:
function Base() {
}
Base.prototype.foo = function() {
console.log('called foo in Base');
}
function Sub() {
}
Sub.prototype = new Base();
Sub.prototype.foo = function() {
console.log('called foo in Sub');
Base.prototype.foo.call(this);
}
var base = new Base();
base.foo();
var sub = new Sub();
sub.foo();
This will print
called foo in Base
called foo in Sub
called foo in Base
as expected.
Another way with ES5 is to explicitely traverse the prototype chain using Object.getPrototypeOf(this)
const speaker = {
speak: () => console.log('the speaker has spoken')
}
const announcingSpeaker = Object.create(speaker, {
speak: {
value: function() {
console.log('Attention please!')
Object.getPrototypeOf(this).speak()
}
}
})
announcingSpeaker.speak()
No, you would need to give the do function in the constructor and the do function in the prototype different names.
In addition, if you want to override all instances and not just that one special instance, this one might help.
function MyClass() {}
MyClass.prototype.myMethod = function() {
alert( "doing original");
};
MyClass.prototype.myMethod_original = MyClass.prototype.myMethod;
MyClass.prototype.myMethod = function() {
MyClass.prototype.myMethod_original.call( this );
alert( "doing override");
};
myObj = new MyClass();
myObj.myMethod();
result:
doing original
doing override
function MyClass() {}
MyClass.prototype.myMethod = function() {
alert( "doing original");
};
MyClass.prototype.myMethod_original = MyClass.prototype.myMethod;
MyClass.prototype.myMethod = function() {
MyClass.prototype.myMethod_original.call( this );
alert( "doing override");
};
myObj = new MyClass();
myObj.myMethod();
Related
I'm writing an object hierarchy in JavaScript, I would like to call a method on an object's parent when I've shadowed that method in the object.
E.g.:
var Base = function Base(msg) {
this.msg = msg;
}
Base.prototype.log = function(){
console.log("base log: " + this.msg);
}
var Sub = function Sub(msg) {
Base.call(this, msg);
}
Sub.prototype = Object.create(Base.prototype);
Sub.prototype.log = function() {
console.log("sub log");
this.__proto__.__proto__.log.call(this); // This works but __proto__
Object.getPrototypeOf(Object.getPrototypeOf(this)).log.call(this); // This works but is verbose
super.log(); // This doesn't work
}
var sub = new Sub('hi');
sub.log();
See the three lines at the bottom of the Sub.prototype.log function - is there a better way to do what I'm trying to do there?
The second line is the best I've been able to come up with but is very verbose!
super is not defined, obviously it wouldn't work.
You might want to try:
Sub.prototype.log = function() {
console.log("sub log");
Base.prototype.log.call(this);
}
Another way is to use the following method to inherit classes:
function extend(Child, Parent) {
var F = function() { };
F.prototype = Parent.prototype;
Child.prototype = new F();
// better to make it static (better practice in OOP world)
// e.g. Child.super = ...,
// but in your case:
Child.prototype.super = Parent.prototype;
}
So here is an example:
// ..
extend(Sub, Base);
Sub.prototype.log = function() {
console.log("sub log");
this.super.log.call(this);
}
In case of ES6:
class Base {
constructor(msg) {
this.msg = msg;
}
log(){
console.log("base log: " + this.msg);
}
}
class Sub extends Base {
constructor(msg) {
super(msg);
}
log() {
console.log("sub log");
super.log();
}
}
var sub = new Sub('hi');
sub.log();
If you want to keep the original method without using the name Base you could capture it using a closure before you change it.
(function() {
var superLog = Sub.prototype.log;
Sub.prototype.log = function() {
console.log("sub log");
superLog();
};
})();
This way there is no dependancy on how you inherit from Base.
Side note: the terminology you are looking for is 'overriding' the base method.
Playing around with some JS tests and I'm trying to instantiate some nested objects in my v namespace. As you'll see below, ClassA and ClassB work as expected. When I try and nest some objects under another property (myCustomProperty) I start running into issues! Could someone explain?
Below is the original code:
var v = (v) ? v : {};
v.someClassA = (function() {
this.hello = function() {
console.log("Class A Hello!");
}
});
v.someClassB = (function() {
this.hello = function() {
console.log("Class B Hello!");
}
});
// this all works!
var myClassA = new v.someClassA();
var myClassB = new v.someClassB();
v.myCustomProperty = (function() {
function someClassC() {
this.hello = function() {
console.log('C');
}
}
function someClassD() {
this.hello = function() {
console.log('D');
}
}
return {
someClassC: someClassC,
someClassD: someClassD
}
});
// Uncaught TypeError: v.myCustomProperty.someClassC is not a function! Why?
var myClassC = new v.myCustomProperty.someClassC();
var myClassD = new v.myCustomProperty.someClassD();
myClassA.hello();
myClassB.hello();
myClassC.hello();
myClassD.hello();
If I change my declaration of v.myCustomProperty to use object literal notation, then it ALL WORKS! :
v.myCustomProperty = {
someClassC: function() {
this.hello = function() {
console.log('C');
}
},
someClassD: function() {
this.hello = function() {
console.log('D');
}
}
}
I guess my question really is how would I make this work using the notation in my original snippet? Possible? Horrible practice to do it that way?
Thanks!
v.myCustomProperty is a function that returns an object. You have to call the function first:
new (v.myCustomProperty().someClassC)();
// ^^
Otherwise, v.myCustomProperty.someClassC() tries to access the property someClassC of the function, and we all know (hopefully) that functions don't have such a property.
Or maybe you intended to execute the function immediately and assign the object to myCustomProperty?
v.myCustomProperty = (function() {
// ...
}()); // <- call function
I am generating a lot of "classes" (actually functions trying to simulate classes as in c# or other object oriented languages), and are looking for the best way to do this.
As you might notice, I also have jQuery available.
This is how all classes are generated at this point:
MyClass = (function() {
function innerClass() {
var self = this;
var myField;
// This function works as the constructor
this.init = function(opts) {
// Arguments to the constructor
var defaultOpts = {
myInitArgument: null
}
opts = $.extend(defaultOpts, opts);
self = this;
// Any custom constructor code is generated here...
}
// A function
this.myFunction = function() {
myField = "Hello World!";
}
// Returns an object with all selected fields and function that should work as "public". Those not mentioned here, will not be visible outside this class.
return {
init: this.init,
myFunction: this.myFunction,
myField: myField,
}
}
return innerClass;
})();
Then I create instances of the class like this:
var myObject = new MyClass();
myObject.init({myInitArgument: 'test'});
My main problem here is that inside the myFunction, "myField" will be set to "Hello World!" if I break in the debugger (i.e. Chrome Developer Tools), but using "myObject.myField" returns undefined.
I made a fiddle if you would like to play around with this sample.
What is the best way to accomplish this problem, and are there perhaps other things you feel of warning me about?
JavaScript is a bit weird when it comes to making classes and objects. IMO, this is the most reliable and readable method of doing it: start with a function that becomes your primitive object (Fruit).
Edit: thanks to #Bergi for pointing out that previous version had vestigial variables, needed to be moved to init().
function Fruit(opts) {
this.init(opts);
}
Now, expand the function, giving it more functions, like init, etc:
Fruit.prototype.init = function(opts) {
// init values go here
this.cost = 0;
this.count = 0;
var that = this; // in the iteration below, we want to refer to our parent
for( k in opts )(function(k, v) {
that[k] = v;
})(k, opts[k]);
}
// now, here's a specialized set of functions that sets properties (price/quant)
// note that they do "return this" - this is so you can conveniently chain
// commands. ex: apple.setPrice(10).setQuantity(5);
Fruit.prototype.setPrice = function(how_much) {
this.cost = how_much;
return(this);
}
Fruit.prototype.setQuantity = function(how_many) {
this.count = how_many;
return(this);
}
Simple function to return a computed value. At this point, once instantiated, the object becomes 'self aware'. Helper functions like this become more readable.
Fruit.prototype.getEarnings = function() {
return( this.cost * this.count );
}
So far we've only setup the abstract structure. To use this, create a new object:
var apple = new Fruit({ genus: 'Malus' });
var orange = new Fruit({ genus: 'Citrus' });
apple.setPrice(1.50).setQuantity(20);
orange.setPrice(1.25).setQuantity(40);
console.info( apple.genus + " will earn you $" + apple.getEarnings() ); // $30
console.info( orange.genus + " will earn you $" + orange.getEarnings() ); // $50
I don't understand what you do that much complicated things to have classes.
var myField and <returned object>.myField are two different variables, modifying one won't change the other.
You can try this (encapsulation):
return {
init: this.init,
myFunction: this.myFunction,
getMyField: function() {return myField;},
}
// ...
$('.console').append('<br />Outside myFunction: ' + myObject.getMyField());
or this (get operator):
return {
init: this.init,
myFunction: this.myFunction,
get myField() {return myField;},
}
// ...
$('.console').append('<br />Outside myFunction: ' + myObject.myField);
This worked fine for me
$('.console').append('Class simulation test:<br />');
// My class
function MyClass() {
var self = this, myField;
// This function works as the constructor
this.init = function(opts) {
// Arguments to the constructor
$('.console').append('<br />Inside myFunction: ' + JSON.stringify(opts));
var defaultOpts = {
myInitArgument: null
}
opts = $.extend(defaultOpts, opts);
//self = this; // no need of this
// Any custom constructor code is generated here...
this.myFunction('Hello from the constructor!');
}
// A function
this.myFunction = function(value) {
this.myField = value; //if you dont use var it will either refer to parent my field or window
$('.console').append('<br />Inside myFunction: ' + this.myField);
};
console.log(JSON.stringify(arguments[0]));
this.init(arguments[0]);
// Returns an object with all selected fields and function that should work as "public". Those not mentioned here, will not be visible outside this class.
return {
myFunction: this.myFunction,
myField: myField,
}
}
// instanciate
var myObject = new MyClass({myInitArgument: 'test'});
// test
myObject.myFunction('Hello from the outside!');
$('.console').append('<br />Outside myFunction: ' + myObject.myField);
I have recently been researching this. I have succeeded, here. The ticker object at that link is a real psuedo class.
var foo = function(args){
this.args = args;
this.whatever = "whatever";
}
foo.prototype.addBar = function(bar){
this.args += bar;
}
foo.prototype.getArgs = function(){
return this.args;
}
var baz = new foo("Hello");
baz.addBar(" Super Man");
var helloStr = baz.getArgs();
//helloStr holds "Hello Super Man"
var what = baz.whatever;
//what holds "whatever"
Simple, no need for inner function, new foo() is the constructor.
This is the first time I'm going to use OOP concept in Javascript. Previously I worked on JQuery. I've defined a class like
function myContent() {
this.toUserID = "1234";
this.loadMainLabel = function(url) {
alert("url:"+url);
}
this.loaddata(userid) {
alert("loading data");
}
}
var objMyContent = new myContent();
objMyContent.loadMainLabel("www.google.com");
objMyContent.loaddata("Here I want to access the userID 1234 which I got in the class ");
But, I'm not sure how to access it & whether I'm going in the right way or not. Any ideas would be greatly appreciated.
A more typical pattern for OO type JS programming is to declare classes via function prototypes:
function MyClass() {
this.instanceVariable = 10;
this.doSomething();
}
//Extend a "super class"
MyClass.prototype = Object.create(SuperClass.prototype);
MyClass.prototype.doSomething = function() {
...
};
You can then instantiate MyClass via new:
var myObject = new MyClass();
There's a very nice run down here:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript
Try this :
function myContent() {
this.toUserID = "1234";
this.loadMainLabel = function(url) {
alert("url:"+url);
}
this.loaddata = function(userid) {//here you can get toUserId just by this.toUserId
alert("loading data"+ userid);
}
}
var objMyContent = new myContent();
objMyContent.loadMainLabel("www.google.com");
objMyContent.loaddata(objMyContent.toUserID);
Douglas Crockford's way of writing OO classes is:
var MyClass(arg1, arg2) {
var that = {}, privateMember = arg1;
that.constructorArg2 = arg2;
var privateMethod() {
}
that.getPrivateMember() {
return privateMember; // Getters!
}
that.method1(methodArg) {
// do Something
}
that.method2() {
// do something more
privateMethod(); // Calling a private method
}
return that;
}
then you can do:
var myClass = MyClass(1, 2); // CALL WITHOUT NEW KEYWORD!
myClass.method1();
alert(that.constructorArg2);
alert(that.getPrivateMember());
Using this technique, you can define private methods, private members and their getter / setters!
Read this article for class definitions and this one for inheritance
I have an existing class I need to convert so I can append functions like my_class.prototype.my_funcs.afucntion = function(){ alert(private_var);} after the main object definition. What's the best/easiest method for converting an existing class to use this method? Currently I have a JavaScript object constructed like this:
var my_class = function (){
var private_var = '';
var private_int = 0
var private_var2 = '';
[...]
var private_func1 = function(id) {
return document.getElementById(id);
};
var private_func2 = function(id) {
alert(id);
};
return{
public_func1: function(){
},
my_funcs: {
do_this: function{
},
do_that: function(){
}
}
}
}();
Unfortunately, currently, I need to dynamically add functions and methods to this object with PHP based on user selected settings, there could be no functions added or 50. This is making adding features very complicated because to add a my_class.my_funcs.afunction(); function, I have to add a PHP call inside the JS file so it can access the private variables, and it just makes everything so messy.
I want to be able to use the prototype method so I can clean out all of the PHP calls inside the main JS file.
Try declaring your "Class" like this:
var MyClass = function () {
// Private variables and functions
var privateVar = '',
privateNum = 0,
privateVar2 = '',
privateFn = function (arg) {
return arg + privateNum;
};
// Public variables and functions
this.publicVar = '';
this.publicNum = 0;
this.publicVar2 = '';
this.publicFn = function () {
return 'foo';
};
this.publicObject = {
'property': 'value',
'fn': function () {
return 'bar';
}
};
};
You can augment this object by adding properties to its prototype (but they won't be accessible unless you create an instance of this class)
MyClass.prototype.aFunction = function (arg1, arg2) {
return arg1 + arg2 + this.publicNum;
// Has access to public members of the current instance
};
Helpful?
Edit: Make sure you create an instance of MyClass or nothing will work properly.
// Correct
var instance = new MyClass();
instance.publicFn(); //-> 'foo'
// Incorrect
MyClass.publicFn(); //-> TypeError
Okay, so the way you're constructing a class is different than what I usually do, but I was able to get the below working:
var my_class = function() {
var fn = function() {
this.do_this = function() { alert("do this"); }
this.do_that = function() { alert("do that"); }
}
return {
public_func1: function() { alert("public func1"); },
fn: fn,
my_funcs: new fn()
}
}
var instance = new my_class();
instance.fn.prototype.do_something_else = function() {
alert("doing something else");
}
instance.my_funcs.do_something_else();
As to what's happening [Edited]:
I changed your my_funcs object to a private method 'fn'
I passed a reference to it to a similar name 'fn' in the return object instance so that you can prototype it.
I made my_funcs an instance of the private member fn so that it will be able to execute all of the fn methods
Hope it helps, - Kevin
Maybe I'm missing what it is you're trying to do, but can't you just assign the prototype to the instance once you create it? So, first create your prototype object:
proto = function(){
var proto_func = function() {
return 'new proto func';
};
return {proto_func: proto_func};
}();
Then use it:
instance = new my_class();
instance.prototype = proto;
alert(instance.prototype.proto_func());