Develop Reference

Overriding a function on a javascript object's property

How would you override a function on a javascript object when the function is on another object within the parent object.
Example:
function TestingABC() {
this.events = { finish: function() { console.log("FINISHED"); } };
}
function TestingXYZ() {
TestingABC.call(this);
}
TestingXYZ.prototype = Object.create(TestingABC.prototype);
How would I override the events.finish function on TestingXYZ to run the parent (TestingABC) code along with some new code that I need to write?

Because the events object is property of the instance, not on the prototype, you could employ a technique similar to monkey patching, where you store a reference to the current function, then override the current function with one that can call the old one in addition to doing other stuff.
e.g.
function TestingABC() {
this.events = { finish: function() { console.log("FINISHED"); } };
}
function TestingXYZ() {
TestingABC.call(this);
var superEvents = this.events;
this.events = {
finish: function () {
superEvents.finish();
doMyStuff();
}
};
}
TestingXYZ.prototype = Object.create(TestingABC.prototype);

.events is an instantiated property of the TestingABC() constructor - so you can amend the value once you have an instantiation of it.
Perhaps something like this is what you're after?...
function TestingABC() {
this.events = {
finish: function() {
console.log('ABC FINISHED');
},
other: function() {
console.log('ABC OTHER');
}
};
}
function TestingXYZ() {
TestingABC.call(this);
}
TestingXYZ.prototype = Object.create(TestingABC.prototype);
TestingXYZ.prototype.callEvents = function() {
this.events.finish();
this.events.other();
}
var test1 = new TestingABC();
var test2 = new TestingXYZ();
test2.events.finish = function() {
console.log('XYZ FINISHED');
};
test1.events.finish();
test1.events.other();
//-> ABC FINISHED
//-> ABC OTHER
test2.callEvents();
//-> XYZ FINISHED
//-> ABC OTHER

How to call internal javascript Class methods?

I'm new to OOP in JavaScript. Could someone please point out how I would go about calling an internal function from within a Class.
For example, from the below code how would I call the hello function from with the myFunction:
// app.js file
var Api = require('Api')
var api = new Api();
api.myFunction();
//server.js file
/**
* API client.
*/
function Api() {
this.my_var = 'my variable';
}
/**
* My Function
*/
Api.prototype.myFunction = function() {
// have tried this
this.hello();
// and this
Api.hello();
}
/**
* Hello
*/
Api.prototype.hello = function() {
console.log('Hello!');
}
// expose the Api class
module.exports = Api;

module.exports = function() {
this.my_var = 'my_variable';
this.myFunction = function() {
this.hello();
};
this.hello = function() {
console.log('hello');
};
return this;
}

JavaScript OOP: Implementation of Logging

I have written the following code to implement logging in a separate js file logger.js by using OOP.
var console;
function Logger() {
init();
}
var init = function() {
if(!window.console){
console = {
log: function(message){},
info: function(message){},
warn: function(message){},
error: function(message){}
};
} else {
console = window.console;
}
};
Logger.prototype.log = function(message) {
console.log(message);
}
Logger.prototype.logInfo = function(message) {
console.info(message);
}
Logger.prototype.logWarn = function(message) {
console.warn(message);
}
Logger.prototype.logError = function(message) {
console.error(message);
}
I am using it from another js file, site.js as:
var logger = new Logger(); //global variable
var getComponentById = function(id) {
var component = null;
if(id) {
try {
component = AdfPage.PAGE.findComponentByAbsoluteId(id);
}catch(e){
logger.logError(e);
}
}
return component;
}
I was wondering
If I have implemented the Logger class in proper way, by maintaining OOP of JavaScript.
Will it handle the scenario where the browser don't have any console?
How can I make init() method inaccessible from other js file or method? I mean how can I make it private?
Any pointer would be very helpful to me.
Update
From another SO thread I found information about private method and I changed my approach:
function Logger() {
init();
}
Logger.prototype = (function() {
var console;
var init = function() {
if(!window.console){
this.console = {
log: function(message){},
info: function(message){},
warn: function(message){},
error: function(message){}
};
} else {
this.console = window.console;
}
};
return {
constructor: Logger,
log: function(message) {
this.console.log(message);
},
logInfo: function(message) {
this.console.info(message);
},
logWarn: function(message) {
this.console.warn(message);
},
logError: function(message) {
this.console.error(message);
}
};
})();
But in this case I am getting error that init is not defined.

To answer your questions:
your implementation of the class is a bit odd. You're accessing the console variable with a closure, having it as a property on the Logger makes more sense.
if the browser has no console, you wont get an error (but the logger wont do anything)
To make you init function private you could wrap it in an IIFE (immediately invoked function expression)
I took your code and changed it slightly to come up with this:
// Create the Logger function with an IIFE, this keeps all of the private
// variables out of the global scope, the only thing in the global scope
// is the function returned by the IIFE.
var Logger = (function (w) {
var Logger,
DummyConsole;
DummyConsole = function () {
this.log = function (message) {
alert(message);
};
this.info = function (message) {
// Implement however you want.
};
this.warn = function (message) {
// ...
};
this.error= function (message) {
// ...
};
};
Logger = function () {
if (!w.console) {
this.console = new DummyConsole();
} else {
this.console = w.console;
}
};
Logger.prototype.log = function(message) {
this.console.log(message);
};
Logger.prototype.logInfo = function(message) {
this.console.info(message);
};
Logger.prototype.logWarn = function(message) {
this.console.warn(message);
};
Logger.prototype.logError = function(message) {
this.console.error(message);
};
return Logger;
}(window));
// create a logger instance to check that the Logger class logs to the console.
var a = new Logger();
a.log("hello");
// Remove the console.
window.console = null;
// Create a new logger checking that it falls back to the dummy console implementation.
var b = new Logger();
// An (annoying) alert is shown.
b.log("Hi");
Code is available as a JSFiddle here: http://jsfiddle.net/mtufW/

Accessing a containing object from with in its method?

In the snippet below, an object literal holds properties, one of which is a method that needs access to the the object literal.
However, b.c. it is only used as an event handler callback, this always points to the element that triggered the event.
I need to access the containing object.
Otherwise, I'm forced to put a function in a function which seems odd.
/***************************************************************************************************
**MSimMenu - simple drop down menu
*/
NS.parsel({
Name: 'MSimMenu',
E: {
hold_name: '#hold_name',
wrap_bottom: '#wrap_bottom'
},
A: {
time_out_id: null,
TIME_DELAY: 1000
},
// in mouseout this points to the element that triggered the event
// need access to containing object
mouse_out: function () {
this.A.time_out_id = NS.setTimeout(this.hideBottom, this.A.TIME_DELAY);
},
init: function () {
var self = this;
// tempoaray fix - function in function seems odd
function mouse_out() {
self.A.time_out_id = NS.setTimeout(self.hideBottom, self.A.TIME_DELAY);
}
self.E.hold_name.addEventListener("mouseover", function () {
NS.clearTimeout(self.A.time_out_id);
self.showBottom();
}, false);
self.E.wrap_bottom.addEventListener("mouseover", function () {
NS.clearTimeout(self.A.time_out_id);
}, false);
self.E.wrap_bottom.addEventListener("mouseout", mouse_out, false);
self.E.hold_name.addEventListener("mouseout", mouse_out, false);
},
showBottom: function () {
this.E.wrap_bottom.style.visibility = 'visible';
},
hideBottom: function () {
this.E.wrap_bottom.style.visibility = 'hidden';
}
});
Final Code Using Bind
NS.parsel({
Name: 'MSimMenu',
E: {
hold_name: '#hold_name',
wrap_bottom: '#wrap_bottom'
},
A: {
time_out_id: null,
TIME_DELAY: 1000
},
init: function () {
var self = this;
self.E.hold_name.addEventListener("mouseover", function () {
NS.clearTimeout(self.A.time_out_id);
self.showBottom();
}, false);
self.E.wrap_bottom.addEventListener("mouseover", function () {
NS.clearTimeout(self.A.time_out_id);
}, false);
self.E.wrap_bottom.addEventListener("mouseout", self.mouse_out.bind(self), false);
self.E.hold_name.addEventListener("mouseout", self.mouse_out.bind(self), false);
},
mouse_out: function () {
this.A.time_out_id = NS.setTimeout(this.hideBottom, this.A.TIME_DELAY);
},
showBottom: function () {
this.E.wrap_bottom.style.visibility = 'visible';
},
hideBottom: function () {
this.E.wrap_bottom.style.visibility = 'hidden';
}
});

I have seen alot of people create a variable to assign the object to and then use the variable.
var that = {
myfunc:function(){
console.log(that)
}
};
NS.parsel(that);

I actually like moving most of the logic into the init method. Provides nice encapsulation with an easy way to declare public and private methods/variables. For example:
NS.parsel({
init: function() {
var self = this;
//public instance variable
self.Name = 'MSimMenu';
//private instance variables
var A = {
time_out_id: null,
TIME_DELAY: 1000
};
var E = {
hold_name: '#hold_name',
wrap_bottom: '#wrap_bottom'
};
//public instance method
self.showBottom = function () {
E.wrap_bottom.style.visibility = 'visible';
};
//private instance method
E.wrap_bottom.addEventListener("mouseout", mouse_out, false);
function mouse_out() {
A.time_out_id = NS.setTimeout(self.hideBottom, A.TIME_DELAY);
}
}
});

There's a lot of ways you can get what you want.
One trick you can do is to not use the mouse_out function directly, but provide a helper function like get_mouse_out() that returns a bound version of the function.
var myobject = {
data:"Some data",
_mouse_out: function() { console.log(this.data); }
get_mouse_out: function() {
var self = this;
return function(){ return Function.apply(self._mouse_out,self,arguments); }
}
}
//Example call back using function.
function do_callback(fn) { fn(); }
//This doesn't work.
do_callback( myobject._mouse_out);
//But this does
do_callback( myobject.get_mouse_out() );
EDIT: Improved version inlining _mouse_out and using bind.
var myobject = {
data:"Some data",
get_mouse_out: function() {
function _mouse_out() { console.log(this.data); }
return _mouse_out.bind(this);
}
}
//Example call back using function.
function do_callback(fn) { fn(); }
//But this does
do_callback( myobject.get_mouse_out() );
If you're willing to have init be called as setup before mouse_out is used then you can do this.
var myobject = {
data:"Some data",
init: function() {
function _mouse_out() { console.log(this.data); }
this.mouse_out = _mouse_out.bind(this);
}
}
myobject.init();
fn( myobject.mouse_out );
Finally there's a nice variant on Shanimals that works a similar way, but provides encapsulation.
NS.parcel( (function(){
var myobj = {};
myobj.data = "Some data";
myobj.mouse_out = function(){ console.log(myobj.data); }
return myobj;
})()
);

In javascript, how do I call a class method from another method in the same class?

I have this:
var Test = new function() {
this.init = new function() {
alert("hello");
}
this.run = new function() {
// call init here
}
}
I want to call init within run. How do I do this?

Use this.init(), but that is not the only problem. Don't call new on your internal functions.
var Test = new function() {
this.init = function() {
alert("hello");
};
this.run = function() {
// call init here
this.init();
};
}
Test.init();
Test.run();
// etc etc

Instead, try writing it this way:
function test() {
var self = this;
this.run = function() {
console.log(self.message);
console.log("Don't worry about init()... just do stuff");
};
// Initialize the object here
(function(){
self.message = "Yay, initialized!"
}());
}
var t = new test();
// Already initialized object, ready for your use.
t.run()

Try this,
var Test = function() {
this.init = function() {
alert("hello");
}
this.run = function() {
// call init here
this.init();
}
}
//creating a new instance of Test
var jj= new Test();
jj.run(); //will give an alert in your screen
Thanks.

var Test = function() {
this.init = function() {
alert("hello");
}
this.run = function() {
this.init();
}
}
Unless I'm missing something here, you can drop the "new" from your code.