I want to print the function calls which are made to the web browser from the webpage i.e the active functions of a javascript. But my approach is not correct i guess because with the help of the below code I m getting all the javascript functions.
function tracecalls(par) {
var f, fname;
for (fname in window) {
f = window[fname];
if (typeof fun === 'function') {
window[fname] = (function(fname, fun) {
var arg = arguments;
return function() {
return par.apply(this, arg);
f.apply(this, arg);
}
})(fname, f);
}
}
}
tracecalls(function(fname, f) {
console.log("Function Name : " + fname);
});
After going through some articles I came to know that, we can get the active function i.e the names of the functions which are invoked dynamically with the help of Ecmascript 6 Proxy. As I am completely new to this can anyone guide me on how to proceed with the proxies..
Your approach is actually correct, you've just made some mistakes in the implementation.
Do not try to use a proxy here, which is much more complicated - and you cannot swap out the global object for a proxified version of itself anyway.
function tracecalls(par) {
for (var name in window) {
if (typeof window[name] === 'function') {
// ^^^^^^^^^^^^ there is no variable `fun` anywhere
window[name] = (function(fname, f) {
// ^ don't use `fun` here
// you don't need `var arg = arguments;` here
return function() {
par(fname);
// ^ ^^^^^ you don't need apply, just pass the name
// ^ no return here
return f.apply(this, arguments);
// ^^^^^^ yield result ^^^^^^^^^ pass through current arguments, not `arg`
}
}(name, window[name]));
}
}
}
tracecalls(function(fname) {
console.log("Function Name : " + fname);
});
Given the following piece of code:
function Foo() {};
Foo.prototype.one = fluent(function(a , b) {
return a + b;
});
Foo.prototype.two = fluent(function(c) {
var d = c + 0.15; //0.15 cause I just couldnt thougth anything else at this moment...
return d;
});
ok that's all good for the moment, now let's say fluent is a decorator function that allows me to implement it like this:
var test = new Foo();
test.one(10, 5).two(); //here is the problem...
Thinking as it was a promise, how can I modify this code in order to make the returned valued of one available on two??? meaning, c should be the returned valued of one(), while keeping the sample implementation.
Here is the fiddle;
I would propose the following definition of fluent. Note that if needed, the final return value is in this.$lastReturn:
function fluent(impl) {
return function() {
// Convert arguments to a real array
var args = Array.prototype.slice.call(arguments);
// Prepend the last return value for this object
if(typeof this.$lastReturn != 'undefined')
args.unshift(this.$lastReturn);
// Invoke the function and save the return value
this.$lastReturn = impl.apply(this, args);
// Return this to allow chaining of the next fluent call
return this;
}
}
This solution utilised the answer of Dark Falcon and makes a little extent to the feature of returning a value or the chain.
Javascript offers the possibillity to request a primitive value of the object, Object.prototype.valueOf()
. In this case it may be used to get a value in case we need a value and on other cases, there is the object returned.
For more information have a look to this article Object-to-Primitive Conversions in JavaScript.
Another addition is argument control at fluent and the call of the methods. If arguments are given, then the arguments are taken, if not given, then the this.$lastreturn is used.
function fluent(impl) {
return function () {
var args = Array.prototype.slice.call(arguments);
// Prepend the last return value for this object only if arg length is 0
if (!args.length && typeof this.$lastReturn !== 'undefined') {
args.unshift(this.$lastReturn);
}
this.$lastReturn = impl.apply(this, args);
return this;
}
}
function Foo() { };
Foo.prototype.one = fluent(function (a, b) {
return a + b;
});
Foo.prototype.two = fluent( function (c) {
return c + 0.77;
});
// this returns the primitive value
Foo.prototype.valueOf = function (c) {
return this.$lastReturn;
};
var test = new Foo();
var x = test.one(10, 5);
document.write(x + '<br>'); // 15
document.write(typeof x + '<br>'); // object
var y = x.two();
document.write(y + '<br>'); // 15.77
document.write(typeof y + '<br>'); // object
var z = y.two(35);
document.write(z + '<br>'); // 35.77
document.write(typeof z + '<br>'); // object
function asArray(quasiArray, start) {
var result = [];
for (var i = (start || 0); i < quasiArray.length; i++)
result.push(quasiArray[i]);
return result;
}
function partial(func) {
var fixedArgs = asArray(arguments, 1);
return function(){
return func.apply(null, fixedArgs.concat(asArray(arguments)));
};
}
function compose(func1, func2) {
return function() {
return func1(func2.apply(null, arguments));
};
}
var isUndefined = partial(op["==="], undefined);
var isDefined = compose(op["!"], isUndefined);
show(isDefined(Math.PI));
show(isDefined(Math.PIE));
Why can't the function compose simply return:
func1(func2);
and give the proper output. I thought the partial function which is stored in the variable isUndefined already returns func.apply(null, [fixed, arguments])
var op = {
"+": function(a, b){return a + b;},
"==": function(a, b){return a == b;},
"===": function(a, b){return a === b;},
"!": function(a){return !a;}
/* and so on */
};
Both partial and compose are higher-order functions.
isUndefined will return a function that, when invoked, will invoke the originally passed function with the original arguments plus any new arguments passed at invocation.
To answer your question, you'd be calling apply on the function returned from partial which will in turn, call apply on the function originally passed to partial.
You want compose to return a function that when called, will return the result of calling the first function passed the second function as an argument (with the second function passed the arguments passed to the compose invocation). If compose returned func1(func2), then you'd assign the result of the invocation to the variable isDefined.
EDIT:
Now that we have op, let's try to decompose this:
var isUndefined = partial(op["==="], undefined);
this is equivalent to
var isUndefined = partial(function(a, b){return a === b;}, undefined);
isUndefined is assigned a function that, when called, will call the function passed as the first argument to partial, passing in undefined as the first argument to that function call, followed by the arguments passed to the function isUndefined i.e.
partial(function(a, b){return a === b;}, undefined /* this will become 'a' when isUndefined is invoked */)(argumentForisUndefined /* this will become 'b' when isUndefined is invoked */);
isDefined composes isUndefined with another function that negates the result of isUndefined.
var isDefined = compose(op["!"], isUndefined);
is equivalent to
var isDefined = compose(function(a){return !a;}, isUndefined);
which is equivalent to (renamed variables for clarity)
var isDefined = compose(
function(a){return !a;},
partial( /* partial function becomes 'a' passed to first function */
function(b, c) {
return b === c;
},
undefined /* undefined becomes 'b' passed to partial */
)
)(argumentForisDefined /* argumentForisDefined becomes 'c' passed to partial */);
If we look at what we have so far and substituting for readability, boils down to a function that takes an argument and compares it to undefined, negates the result and returns a boolean
var isDefined = function (b) { return !undefined === b; }
So lets simply dissect it. Assuming we have this compose function:
function compose(func1, func2) {
return func1(func2.apply(null, arguments));
}
What will happen when you use it like this?
a = compose(function(){console.log(1)}, function(){console.log(2)});
The second function would be call immediately outputting 2, and straight afterwards the first function will be called outputting 1. a will be undefined, because the first function does not return anything.
What you want combine to do, is to return a new function, that combines the two other functions and that you can call at will.
Doing the above all on the original compose, will return a new function, that, when you call it with a() will output 2 and then 1.
I understand calling function(1) but not function(1)(2), how does it work?
also possible for function(1)(2)(3)(4) too?
In this case you are supposing that function(1) returns a function, than you are calling this new, anonymous function with an argument of 2.
See this example:
function sum(a) {
return function(b) {
return a+b;
}
}
// Usage:
window.alert(sum(5)(3)); // shows 8
var add2 = sum(2);
window.alert(add2(5)); // shows 7
window.alert(typeof(add2)); // shows 'function'
Here we create a function sum that takes one argument. Inside the function sum, we create an anonymous function that takes another argument. This anonymous function is returned as the result of executing sum.
Note that this anonymous function is a great example of what we call closure. A closure is a function that keeps the context in which it was created. In this case, it will keep the value of the variable a inside it, as did the example function add2. If we create many closures, they are independent as you can see:
var add3 = sum(3);
var add4 = sum(4);
window.alert(add3(3)); // shows 6
window.alert(add4(3)); // shows 7
Furthermore, they won't get "confused" if you have similarly named local variables:
var a = "Hello, world";
function multiply(a) {
return function(b) {
return a * b;
}
}
window.alert(multiply(6)(7)); // shows 42
var twoTimes = multiply(2);
window.alert(typeof(twoTimes));
window.alert(twoTimes(5));
So, after a call to sum(2) or multiply(2) the result is not a number, nor a string, but is a function. This is a characteristic of functional languages -- languages in which functions can be passed as parameters and returned as results of other functions.
You have a function that returns a function:
function f(n) {
return function(x) {
return n + x;
};
}
When you call f(1) you get a reference to a function back. You can either store the reference in a variable and call it:
var fx = f(1);
var result = fx(2);
Or you can call it directly:
var result = f(1)(2);
To get a function that returns a function that returns a function that returns a function, you just have to repeat the process:
function f(n) {
return function(x) {
return function(y) {
return function(z) {
return n + x + y + z;
}
}
};
}
If your function returns a function, you can call that too.
x = f(1)(2)
is equivalent to:
f2 = f(1)
x = f2(2)
The parenthesis indicate invocation of a function (you "call" it). If you have
<anything>()
It means that the value of anything is a callable value. Imagine the following function:
function add(n1) {
return function add_second(n2) {
return n1+n2
}
}
You can then invoke it as add(1)(2) which would equal 3. You can naturally extend this as much as you want.
If you want to use global functions and variable dynamically you can use:
window[functionName](window[varName]);
Is it possible to do the same thing for variables in the local scope?
This code works correctly but currently uses eval and I'm trying to think of how else to do it.
var test = function(){
//this = window
var a, b, c; //private variables
var prop = function(name, def){
//this = window
eval(name+ ' = ' + (def.toSource() || undefined) + ';');
return function(value){
//this = test object
if ( !value) {
return eval('(' + name + ')');
}
eval(name + ' = value;')
return this;
};
};
return {
a:prop('a', 1),
b:prop('b', 2),
c:prop('c', 3),
d:function(){
//to show that they are accessible via to methods
return [a,b,c];
}
};
}();
>>>test
Object
>>>test.prop
undefined
>>>test.a
function()
>>>test.a()
1 //returns the default
>>>test.a(123)
Object //returns the object
>>>test.a()
123 //returns the changed private variable
>>>test.d()
[123,2,3]
To answer your question, no, there is no way to do dynamic variable lookup in a local scope without using eval().
The best alternative is to make your "scope" just a regular object [literal] (ie, "{}"), and stick your data in there.
No, like crescentfresh said. Below you find an example of how to implement without eval, but with an internal private object.
var test = function () {
var prv={ };
function prop(name, def) {
prv[name] = def;
return function(value) {
// if (!value) is true for 'undefined', 'null', '0', NaN, '' (empty string) and false.
// I assume you wanted undefined. If you also want null add: || value===null
// Another way is to check arguments.length to get how many parameters was
// given to this function when it was called.
if (typeof value === "undefined"){
//check if hasOwnProperty so you don't unexpected results from
//the objects prototype.
return Object.prototype.hasOwnProperty.call(prv,name) ? prv[name] : undefined;
}
prv[name]=value;
return this;
}
};
return pub = {
a:prop('a', 1),
b:prop('b', 2),
c:prop('c', 3),
d:function(){
//to show that they are accessible via two methods
//This is a case where 'with' could be used since it only reads from the object.
return [prv.a,prv.b,prv.c];
}
};
}();
I think you actually sort of can, even without using eval!
I might be wrong so please correct me if I am, but I found that if the private variables are declared inside the local scope as arguments, instead of using var, i.e:
function (a, b, c) { ...
instead of
function () { var a, b, c; ...
it means that those variables/arguments, will be bound together with the function's arguments object if any values are given to them in the function's invocation, i.e:
function foo (bar) {
arguments[0] = 'changed...';
console.log(bar); // prints 'changed...'
bar = '...yet again!';
console.log(arguments[0]); // prints '..yet again!'
}
foo('unchanged'); // it works (the bound is created)
// logs 'changed...'
// logs '...yet again!'
foo(undefined); // it works (the bound is created)
// logs 'changed...'
// logs '...yet again!'
foo(); // it doesn't work if you invoke the function without the 'bar' argument
// logs undefined
// logs 'changed...'
In those situations (where it works), if you somehow store/save the invoked function's arguments object, you can then change any argument related slot from arguments object and the changes will automatically be reflected in the variables themselves, i.e:
// using your code as an example, but changing it so it applies this principle
var test = function (a, b, c) {
//this = window
var args = arguments, // preserving arguments as args, so we can access it inside prop
prop = function (i, def) {
//this = window
// I've removed .toSource because I couldn't apply it on my tests
//eval(name+ ' = ' + (def.toSource() || undefined) + ';');
args[i] = def || undefined;
return function (value) {
//this = test object
if (!value) {
//return eval('(' + name + ')');
return args[i];
}
//eval(name + ' = value;');
args[i] = value;
return this;
};
};
return {
a: prop(0, 1),
b: prop(1, 2),
c: prop(2, 3),
d: function () {
// to show that they are accessible via to methods
return [a, b, c];
}
};
}(0, 0, 0);
If the fact that you can pass the values as arguments into the function annoys you, you can always wrap it with another anonymous function, that way you really don't have any access to the first defined values passed as arguments, i.e:
var test = (function () {
// wrapping the function with another anomymous one
return (function (a, b, c) {
var args = arguments,
prop = function (i, def) {
args[i] = def || undefined;
return function (value) {
if (!value) {
return args[i];
}
args[i] = value;
return this;
};
};
return {
a: prop(0, 1),
b: prop(1, 2),
c: prop(2, 3),
d: function () {
return [a, b, c];
}
};
})(0, 0, 0);
})();
Full Dynamic Access Example
We can map all argument variable names into an array by getting the function itself (arguments.callee) as a string, and filtering its parameters using a regex:
var argsIdx = (arguments.callee + '').replace(/function(\s|\t)*?\((.*?)\)(.|\n)*/, '$2').replace(/(\s|\t)+/g, '').split(',')
Now with all the variables in an array, we can now know the corresponding variable name for each function's arguments slot index, and with that, declare a function (in our case it's prop) to read/write into the variable:
function prop (name, value) {
var i = argsIdx.indexOf(name);
if (i === -1) throw name + ' is not a local.';
if (arguments.hasOwnProperty(1)) args[i] = value;
return args[i];
}
We can also dynamically add each variable as a property, like in the question's example:
argsIdx.forEach(function (name, i) {
result[name] = prop.bind(null, name);
});
Finally we can add a method to retrieve variables by name (all by default), and if true is passed as the first argument, it returns the hard-coded array with all the variables by their identifiers, to prove that they are being changed:
function props (flgIdent) {
var names = [].slice.call(arguments.length > 0 ? arguments : argsIdx);
return flgIdent === true ? [a, b, c, d, e, f] : names.map(function (name) {
return args[argsIdx.indexOf(name)];
});
}
The prop and props functions can be made available as methods inside the returned object, in the end it could look something like this:
var test = (function () {
return (function (a, b, c, d, e, f) {
var argsIdx = (arguments.callee + '').replace(/function(\s|\t)*?\((.*?)\)(.|\n)*/, '$2').replace(/(\s|\t)+/g, '').split(','),
args = arguments,
result = {
prop: function (name, value) {
var i = argsIdx.indexOf(name);
if (i === -1) throw name + ' is not a local.';
if (arguments.hasOwnProperty(1)) args[i] = value;
return args[i];
},
props: function (flgIdent) {
var names = [].slice.call(arguments.length > 0 ? arguments : argsIdx);
return flgIdent === true ? [a, b, c, d, e, f] : names.map(function (name) {
return args[argsIdx.indexOf(name)];
});
}
};
args.length = argsIdx.length;
argsIdx.forEach(function (name, i) {
result[name] = result.prop.bind(null, name);
});
return result;
})(0, 0, 0, 0, 0, 0);
})();
Conclusions
It's impossible to read/write a function's local scope variable without eval, but if those variables are function's arguments and if they're given values, you can bound those variable identifiers to the function's arguments object and indirectly read/write into them from the arguments object itself.
Hopefully I'm not over-simplifying, but what about something as simple as using an object?
var test = {
getValue : function(localName){
return this[localName];
},
setValue : function(localName, value){
return this[localName] = value;
}
};
>>> test.a = 123
>>> test.getValue('a')
123
>>> test.a
123
>>> test.setValue('b', 999)
999
>>> test.b
999