Extending a function - javascript

Let's say I have a function like this:
function foo(){
var myValue = 5;
var myOtherValue = 1;
return {
getValue: function(){
return [myValue, myOtherValue];
}
}
}
Is there a way I can extend/overwrite this function somehow without touching the original function so that when I call getValue() I get [SOME OTHER VALUE I CHOOSE, myOtherValue]?
If not, can I do it at the instance level?
var myFoo = new foo();
myFoo.getValue = function(){
return [0, myOtherValue]; // how to I access myOtherValue?
}

If you don't want to modify foo, you can do this:
function foo(){
var myValue = 5;
var myOtherValue = 1;
return {
getValue: function(){
return [myValue, myOtherValue];
}
}
}
var myFoo = new foo();
//move getValue to _getValue
myFoo._getValue = myFoo.getValue;
//do custom getValue
myFoo.getValue = function(){
return [0, myFoo._getValue()[1]];
}

function foo(){
var myValue = 5;
var myOtherValue = 1;
return {
getValue: function(){
return [myValue, myOtherValue];
}
}
}
var myFoo = new foo();
var storeOriginal= myFoo.getValue;
myFoo.getValue = function(){
//your code
storeOriginal();
}

You can't.
myOtherValue is only defined in the scope of foo.
You could have to rewrite to something like this:
function foo(){
var myValue = 5;
return {
myOtherValue: 1,
getValue: function(){
return [myValue, this.myOtherValue];
}
}
}
Then you could do:
var myFoo = new foo();
myFoo.getValue = function(){
return [0, myFoo.myOtherValue];
}

function foo() {
.. original stuff ..
}
var hidden_foo = foo;
function decorator() {
var internal = hidden_foo();
// here is the proxy object
return {
getValue: function() {
return [SOME OTHER VALUE I CHOOSE, internal.getValue()[1]];
}
}
}
// overwrite the original function with our decorated version
foo = decorator;

You can't access a variable in a closure. However, you can define the new function to delegate to the original function to access it:
var myFoo = new foo();
myFoo.getValue = (function (original) {
return function(){
var val = original();
val[0] = 0;
return val;
};
}(myFoo.getValue));
Here is a fiddle of this solution so you can try it out yourself: http://jsfiddle.net/6Ux92/1/

You can do like this
function myFoo() {
var vals = foo().getValue();
return {
getValue : function(){
return [0, vals[1]]
}
}
}
vals[1] is obviously myOtherValue

you could wrap this function with a decorator function:
var decorator = function() {
var someNewValue = ...;
var myOtherValue = foo().getValue()[1];
return [someNewValue, myOtherValue];
}

Try this :
function foo(){
this.myValue = 5;
var myOtherValue = 1;
return {
getValue: function(){
return [this.myValue, myOtherValue];
}
}
}
var bar = new foo();
bar.myValue = "whatever";

Related

Javascript function does not return the right value

So i have this code:
function Class1() {
this.i = 1;
var that=this;
function nn() {
return 21;
}
this.aa = function() {
nn();
};
this.bb = function() {
this.aa();
};
this.cc = function() {
this.bb();
};
}
var o = new Class1();
var b=o.cc();
alert(b); //undefined
But when the alert is fired, I get an undefined error and not 21, Does the private method can not use a return? Thanks!
When using the function() {} syntax to define a function, you always explicitly need to return the value, i.e. not only from nn, but from all intermediate functions as well.
function Class1() {
this.i = 1;
var that = this;
function nn() {
return 21;
}
this.aa = function() {
return nn();
}
this.bb = function() {
return this.aa();
}
this.cc = function() {
return this.bb();
}
}
var o = new Class1();
var b = o.cc();
alert(b); // "21"
Apart from the answer above, the 'this' context seems weird in your functions. Maybe you are better of with arrow functions if you dont want to bind the this context to each function. I also think that it is better to actually separate private and public functions when using a 'class' like this.
function Class1() {
var _nn = function () {
return 21;
}
var _aa = function () {
return _nn();
}
var _bb = function () {
return _aa();
}
var cc = function () {
return _bb();
};
return {
cc
};
}
var o = new Class1();
var a = o.cc();
console.log(a);
Much easier to understand that it is only cc that is a public function.
So with arrow function it would instead look like this, and you can use the Class1 this context inside of your private functions without doing
var that = this; or using bind.
function Class1() {
this.privateThing = 'private';
var _nn = () => { return this.privateThing; };
var _aa = () => { return _nn(); };
var _bb = () => { return _aa(); };
var cc = () => { return _bb(); };
return {
cc
};
}

Can't have access to a variable using call in Javascript

I'm studying Javascript and learning how to use call. I created this script and I don't know why I can't have access to this variable Time.
var MyObject;
(function(MyObject) {
var Runner = (function() {
function Runner(time) {
this.time = time;
}
var myFunctionArray = [];
Runner.prototype.execute = function() {
myFunctionArray[0]();
}
Runner.prototype.newTest = function(index, execute) {
var test = function() {
return execute.call(this);
}
myFunctionArray.push(test);
}
return Runner;
})();
MyObject.Runner = Runner;
})(MyObject || (MyObject = {});
var myNewObj = new MyObject.Runner(1000); myNewObj.newTest('1', function() {
console.log(this.time) //output: undefined
});
So how can I get time value inside newTest function?
Issue is in newTest function
Runner.prototype.newTest = function(index, execute) {
var test = function() {
return execute.call(this);
}
myFunctionArray.push(test);
}
Here this is pointing to test and not Runner. You will have to save context in a variable and then set it in call.
Runner.prototype.newTest = function(index, execute) {
var self = this;
var test = function() {
return execute.call(self);
}
myFunctionArray.push(test);
}
.call + self
var MyObject;
(function(MyObject) {
var Runner = (function() {
function Runner(time) {
this.time = time;
}
var myFunctionArray = [];
Runner.prototype.execute = function() {
myFunctionArray[0]();
}
Runner.prototype.newTest = function(index, execute) {
var self = this;
var test = function() {
return execute.call(self);
}
myFunctionArray.push(test);
}
return Runner;
})();
MyObject.Runner = Runner;
})(MyObject || (MyObject = {}));
var myNewObj = new MyObject.Runner(1000);
myNewObj.newTest('1', function() {
console.log(this, this.time) //output: undefined
});
myNewObj.execute()
.bind
As commented, you can even use .bind
var MyObject;
(function(MyObject) {
var Runner = (function() {
function Runner(time) {
this.time = time;
}
var myFunctionArray = [];
Runner.prototype.execute = function() {
myFunctionArray[0]();
}
Runner.prototype.newTest = function(index, execute) {
myFunctionArray.push(execute.bind(this));
}
return Runner;
})();
MyObject.Runner = Runner;
})(MyObject || (MyObject = {}));
var myNewObj = new MyObject.Runner(1000);
myNewObj.newTest('1', function() {
console.log(this, this.time) //output: undefined
});
myNewObj.execute()
When you declare your Runner function, you've actually declared a function that takes no arguments that then itself declares a function called Runner that takes one argument.
Actually In this code snippet :
Runner.prototype.newTest = function(index, execute) {
var test = function() {
return execute.call(this);
}
myFunctionArray.push(test);
}
this will reference to test variable (as per constructor invocation pattern)
So, to pass right variable cache the value of this in another variable and then pass that to function.

Pure Javascript : Override functions

I would like to override some functions (for logging some informations)
I'm trying to do something like:
function universe() {
return 42;
}
universe = universe.override(function(){
console.log("Calling universe");
return this.$super();
});
Full sample:
Function.prototype.override = function (fn) {
var $super = this;
var f = function overrided() {
var context = this || $super || {};
context.$super = $super;
return fn.apply(context, arguments);
};
f.$super = $super;
return f;
};
Function.prototype.unoverride = function () {
if (this.$super) {
return this.$super;
}
return this;
};
function universe() {
return 42;
}
function mulBy10() {
console.warn("calling overrided function");
return this.$super() * 10;
}
console.log("---------");
console.log("original:", universe());
universe = universe.override(mulBy10);
console.log("new one:", universe());
universe = universe.unoverride();
console.log("reverted:", universe());
console.log("--With Object");
var MyObject = function() {
this.value = 42;
}
MyObject.prototype = {
constructor: MyObject,
getValue: function() {
return this.value;
}
};
var o1 = new MyObject();
console.log("MyObject original:", o1.getValue());
o1.getValue = o1.getValue.override(mulBy10);
console.log("MyObject new one:", o1.getValue());
o1.getValue = o1.getValue.unoverride();
console.log("MyObject reverted:", o1.getValue());
console.log("--With Object prototype");
o2 = new MyObject();
MyObject.prototype.getValue = MyObject.prototype.getValue.override(mulBy10);
console.log("MyObject.proto new one:", o2.getValue());
MyObject.prototype.getValue = MyObject.prototype.getValue.unoverride();
console.log("MyObject.proto reverted:", o2.getValue());
console.log("--With recursive");
function recur(it, max) {
console.log("it:", it, "max:", max);
if( it >= max ) {
console.log("finished");
return;
}
recur(it + 1, max);
}
recur = recur.override(function(it, max){
console.warn("Overrided recur");
return this.$super(it, max);
});
recur(0, 4);
This works fine with function, object functions.
But it doesn't work when i try to override CasperJs "require" function.
I did:
require = require.override(function(file){
console.log("require(" + file + ")");
return this.$super(file);
});
So i was wondering, in which case, override function will not work ?
Did i missed something in CasperJS require function ?

how to call function using name such as "function someName(){}"?

I have a name of a private function in JavaScript as a string, how do I call that function?
var test = function () {
this.callFunction = function(index) {
return this["func" + index]();
}
function func1() { }
function func2() { }
...
function funcN() { }
}
var obj = new test();
obj.callFunction(1);
func1 and friends are local variables, not members of the object. You can't call them like that (at least not in any sane way).
Define them with function expressions (instead of function declarations) and store them in an array.
var test = function () {
this.callFunction = function(index) {
return funcs[index]();
}
var funcs = [
function () {},
function () {},
function () {}
];
}
var obj = new test();
obj.callFunction(0);
As your code stands, the functions are not present as properties of the instance. What you need to do is create them as properties of the context.
var test = function () {
this.callFunction = function(index) {
return this["func" + index];
}
this.func1 = function() { }
this.func2 = function() { }
...
}
var obj = new test();
obj.callFunction(1)();
you can use eval
var test = function () {
this.callFunction = function(index) {
return eval("func" + index + '()');
}
function func1() {
return 1;
}
function func2() {
return 2;
}
function funcN() { }
};
var obj = new test();
obj.callFunction(2);
eval is evil
You can use a private array of functions:
var test = function() {
var func = [
function() { return "one" },
function() { return "two"; }
]
this.callFunction = function(index) {
return func[index]();
}
}
var obj = new test();
var ret = obj.callFunction(1);
console.log(ret);​
​
http://jsfiddle.net/V8FaJ/

what is wrong with this piece of code of javascript inheritance?

function condition(){
this.expression = "";
this.toString = function(){
return this.expression;
}
};
function and(first, second){
this.expression = first + " and " + second;
}
function nop(){};
nop.prototype = condition.prototype;
and.prototype = new nop();
var a =new and(1,2);
console.log(a.toString());
it is expected to see "1 and 2" as output but this is what happened:
"[object Object]"
You are transfering the prototype of condition to nop's prototype. The problem is that your condition.toString is not declared in the prototype... Here:
function condition(){
this.expression = "";
};
condition.prototype.toString = function(){
return this.expression;
}
function and(first, second){
this.expression = first + " and " + second;
}
function nop(){};
nop.prototype = condition.prototype;
and.prototype = new nop();
var a =new and(1,2);
console.log(a.toString());
OR
function condition(){
this.expression = "";
this.toString = function(){
return this.expression;
}
};
function and(first, second){
this.expression = first + " and " + second;
}
function nop(){};
nop = condition;
and.prototype = new nop();
var a =new and(1,2);
console.log(a.toString());
you aren't overriding the toString method, because the constructer of condition is never called! try doing this;
condition.prototype.toString=function(){
return this.expression;
}
try passing strings into your and function, as at the moment you are trying to concatenate integers to a string var a =new and("1","2");
it should be like this
function condition(){
this.expression = "";
};
condition.prototype.toString = function(){
return this.expression;
}
Ok, so the problem here is you are mixing two inheritance patterns (http://davidshariff.com/blog/javascript-inheritance-patterns/) the pseudo-classical with the functional patterns.
You can create an object by adding methods on the constructor function:
function MyClass() {
var privateProperty = 1;
this.publicProperty = 2;
function pivateMethod() {
// some code ...
}
this.publicMethod = function() {
// some code ...
};
}
// inheritance
function SubClass() {
MyClass.call(this);
this.newMethod = function() { };
}
Here when you create a instance of this class you are creating every method again.
Then you have the prototype pattern:
function MyClass() {
this._protectedProperty = 1;
this.publicProperty = 2;
}
MyClass.prototype._protectedMethod = function() {
// some code ...
};
MyClass.prototype.publicMethod = function() {
// some code ...
};
// inheritance
function SubClass() {
MyClass.call(this);
}
SubClass.prototype = new MyClass();
SubClass.prototype.newMethod = function() { };
// OR
function SubClass() {
MyClass.call(this);
}
function dummy() { }
dummy.prototype = MyClass.prototype;
SubClass.prototype = new dummy();
SubClass.prototype.newMethod = function() { };
Yhen you must choose one of those two patterns, not both·
I've fixed your code on this fiddle: http://jsfiddle.net/dz6Ch/

Categories

Resources