Is it possible to listen to any function invocation or state change
I have a object that wrap another
function wrapper(origiObj){
this.origObj = origObj;
}
var obj = wrapper(document);//this is an example
var obj = wrapper(db);//this is an example
now everytime someone tries to invoke obj.innerHTML or obj.query(..)
I would like to listen to that..
Yes, it's possible:
functions are easy, and properties has to be watched
function FlyingObject(obj){
this.obj = obj;
for(var p in obj){
if(typeof obj[p] == 'function'){
console.log(p);
this[p] = function(){
console.log("orig func");
};
}else{
this.watch(p,function(){
console.log("orig property");
});
}
}
}
var obj = {
f:function(a,b){ return a+b},
m:1
};
var fo = new FlyingObject(obj);
fo.m = 5;
fo.f(1,4);
If your browser/node.js doesn't support Object.watch, check this out:
Object.watch() for all browsers?
Yes you can, define a getter/setter for properties and a shadow function for the function like this: http://jsfiddle.net/fHRyU/1/.
function wrapper(origObj){
var type = origObj.innerHTML ? 'doc' : 'db';
if(type === "doc") {
var orig = origObj.innerHTML;
origObj.__defineGetter__('innerHTML',
function() {
// someone got innerHTML
alert('getting innerHTML');
return orig;
});
origObj.__defineSetter__('innerHTML',
function(a) {
// someone set innerHTML
alert('setting innerHTML');
orig = a;
});
} else if(type === "db") {
var orig = origObj.query;
origObj.query = function() {
//someone called query;
alert('calling query');
orig.apply(this, arguments);
};
}
return origObj;
}
var obj = wrapper(document.body);
obj.innerHTML = 'p';
alert(obj.innerHTML);
var db = function() {}
db.query = function() {alert('foo');}
obj = wrapper(db);
obj.query();
edit: "Deleting" answer since it's tagged node.js, leaving it in case it happens to be useful to anyone else:
The general answer is no, it isn't. At least not in every browser, so any solution anyone gives isn't going to work in many cases.
There are a few things that can work, but again there is horrible support for them:
dom modified events (FF only, I believe)
DOMAttrModified
DOMNodeInserted
DOMNodeRemoved
etc
object.watch (FF only)
Related
I'm looking into a way to change a native JS function body, while making it not possible to see that it has been changed. Let's take an example with document.hasFocus():
document.hasFocus = ()=>true;
This method works well to spoof focus, but it can be easily detected that it was modified:
document.hasFocus.toString() // -> "()=>true"
Is there any way, in which I can modify such a function while making it impossible to see it has been tampered with?
You can overwrite toString method in Function prototype, and do something like that:
// https://stackoverflow.com/questions/1833588/javascript-clone-a-function
Function.prototype.clone = function() {
var that = this;
var temp = function temporary() {
return that.apply(this, arguments);
};
for (var key in this) {
if (this.hasOwnProperty(key)) {
temp[key] = this[key];
}
}
return temp;
};
Function.prototype.__oldToString = Function.prototype.toString.clone();
function __toStringHooked() {
if ((this.name == "")||(this.name == "hasFocus")) // on Firefox, hasFocus doesn't have any name
{
return eval+"" // this matches regexp
} else {
return this.__oldToString(); // we're returning default value
}
}
Function.prototype.toString = __toStringHooked
document.hasFocus = () => true
The code above is from Th3B0r3dD3v3l0p3r's GitHub repo, you can check it if you want: https://github.com/Th3B0r3dD3v3l0p3r/focus-spoofer/
The title is pretty self-explanatory..
Is there a way to read whatever's been output to the console.log up until the moment you decide to read it, using Javascript?
You can make a proxy around it, such as :
(function(win){
var ncon = win.console;
var con = win.console = {
backlog: []
};
for(var k in ncon) {
if(typeof ncon[k] === 'function') {
con[k] = (function(fn) {
return function() {
con.backlog.push([new Date(), fn, arguments]);
ncon[fn].apply(ncon, arguments);
};
})(k);
}
}
})(window);
I have a question. We all know the power of closures in Javascript and I want to use this power. Lets say I have a an object named "BRB". WHat I wanted to is whenever user calls the method getBrowser() for the very first time it will find out browser version/name whatever and return it and also store it inside itself as static when getBrowser() called second time it should return the same value without calculation since it is already statically stored somewhere. This can be done in many different ways, we can just store a property in the object and in the first call we can set some values for it and use it later, we can run getBrowser method directly when object is created in the syntax as
(function()(
...
))()
However, this is not what I want. All I want is getBrowser() method to calculate the value only once and use it all the time, I dont want to store the value inside the object somewhere else and I dont want to run this method right away when object is created, I'm allowed to use only and only this method and all action must take place in this one method. I put here an example, as you see it will always print out "0" but what I want is it prints 0,1,2,3 for each console.log request. I hope I made myself clear. Thanks.
(
function(window){
if(window.BRB) return;
var BRB = function(){}
BRB.prototype.getBrowser = function(){
var browser = null;
return function(){
if(browser === null){
browser = 0;
}
return browser++;
}
}
window.BRB = new BRB();
})(window);
console.log(BRB.getBrowser()());
console.log(BRB.getBrowser()());
console.log(BRB.getBrowser()());
console.log(BRB.getBrowser()());
Your requirements are kinda strange. Is this what you're looking for? It works by creating a property on the getBrowser function itself:
(function(window){
if(window.BRB) return;
var BRB = function(){}
BRB.prototype.getBrowser = function(){
if(typeof this.getBrowser.browser == "undefined"){
return this.getBrowser.browser = 0;
} else {
return ++this.getBrowser.browser;
}
}
window.BRB = new BRB();
})(window);
console.log(BRB.getBrowser());
console.log(BRB.getBrowser());
console.log(BRB.getBrowser());
console.log(BRB.getBrowser());
http://jsfiddle.net/5DheZ/
You should define the browser variable in another place:
(
function(window){
if(window.BRB) return;
var browser = null;
var BRB = function(){}
BRB.prototype.getBrowser = function(){
if(browser === null){
browser = 0;
}
return browser++;
}
window.BRB = new BRB();
})(window);
console.log(BRB.getBrowser());
console.log(BRB.getBrowser());
console.log(BRB.getBrowser());
console.log(BRB.getBrowser());
jsfiddle http://jsfiddle.net/5ByYR/1/
And if you are able to assign an object instead of function to getBrowser:
(
function(window){
if(window.BRB) return;
var BRB = function(){}
BRB.prototype.getBrowser = {
browser: null,
get: function() {
if(this.browser === null){
this.browser = 0;
}
return this.browser++;
}
}
window.BRB = new BRB();
})(window);
console.log(BRB.getBrowser.get());
console.log(BRB.getBrowser.get());
console.log(BRB.getBrowser.get());
console.log(BRB.getBrowser.get());
You probably intended for the getBrowser method to be an IIFE closure for the result:
BRB.prototype.getBrowser = (function(){
var browser = null;
return function(){
if(browser === null){
browser = 0;
}
return browser++;
}
})();
This way the browservariable is not reinitialized on each function call.
UPDATE
You could use a property instead of a variable scoped in a closure for the browser value:
BRB.prototype.getBrowser = function() {
if(!this.browser){
this.browser = 0;
}
return this.browser++;
}
I'd like be able to call a function like item_edit.say hello passed as a string on the window object (like the last line of the following):
var arc={ view: { item_edit: {} } };
arc.view.item_edit={
say_hello: function(){
alert('hello there');
}
}
var f_name='say_hello';
var g_name='item_edit.say_hello';
var str=window.arc.view.item_edit[f_name](); // <- this works
var str2=window.arc.view[g_name](); // <- this is what I'm interested in; curently doesn't work
any ideas on how to get this to work?
thx in advance
edit #1
I guess I should add that probably don't want to be doing eval although the more I look at it, that might be what makes sense (and is in fact what eval was made to do).
Sure. The Google closure library does something like this in its goog.provide function when not optimized by the compiler.
function callDotted(obj, path, args) {
var parts = path ? path.split('.') : [];
var i, n = parts.length;
for (i = 0; i < n - 1; ++i) {
obj = obj[parts[i]];
}
var fn = i < n ? obj[parts[i]] : obj;
return fn.apply(obj, args);
}
and then on browsers where Date.now returns the current timestamp,
callDotted(window, 'Date.now', [])
returns the current timestamp.
Here's one way using .reduce().
var str2 = g_name.split('.').reduce(function(obj, key) {
return obj[key];
}, window.arc.view);
You'll need to shim it for older browsers, and introduce safety checks if you want.
If you do this a lot, I'd add the function to your library so you can reuse it.
function keyToObj(obj, key) {
return obj[key];
}
Then use it like this:
var str2 = g_name.split('.').reduce(keyToObj, window.arc.view);
As #MikeSamuel pointed out, there's an issue with the this value of the executed function when using this approach.
To resolve this, we could make another version that's suited specifically for method invocations.
function keyToMethod(obj, key, i, arr) {
return i === arr.length - 1 && typeof obj[key] === "function"
? function() {
return obj[key].apply(obj, arguments);
}
: obj[key];
}
Now our function returns a function that invokes the method from the proper object.
var str2 = g_name.split('.').reduce(keyToMethod, window.arc.view)();
We could further enhance the returned function to check to see if the this value is the default value, and use the provided value if not.
How about this:
var str2 = eval('window.arc.view.' + g_name + '()');
I'm trying to extend the Array.push method so that using push will trigger a callback method and then perform the normal array function.
I'm not quite sure how to do this, but here's some code I've been playing with unsuccessfully.
arr = [];
arr.push = function(data){
//callback method goes here
this = Array.push(data);
return this.length;
}
arr.push('test');
Since push allows more than one element to be pushed, I use the arguments variable below to let the real push method have all arguments.
This solution only affects the arr variable:
arr.push = function () {
//Do what you want here...
return Array.prototype.push.apply(this, arguments);
}
This solution affects all arrays. I do not recommend that you do that.
Array.prototype.push = (function() {
var original = Array.prototype.push;
return function() {
//Do what you want here.
return original.apply(this, arguments);
};
})();
First you need subclass Array:
ES6 (https://kangax.github.io/compat-table/es6/):
class SortedArray extends Array {
constructor(...args) {
super(...args);
}
push() {
return super.push(arguments);
}
}
ES5 (proto is almost deprecated, but it is the only solution for now):
function SortedArray() {
var arr = [];
arr.push.apply(arr, arguments);
arr.__proto__ = SortedArray.prototype;
return arr;
}
SortedArray.prototype = Object.create(Array.prototype);
SortedArray.prototype.push = function() {
this.arr.push(arguments);
};
Array.prototype.push was introduced in JavaScript 1.2. It is really as simple as this:
Array.prototype.push = function() {
for( var i = 0, l = arguments.length; i < l; i++ ) this[this.length] = arguments[i];
return this.length;
};
You could always add something in the front of that.
You could do it this way:
arr = []
arr.push = function(data) {
alert(data); //callback
return Array.prototype.push.call(this, data);
}
If you're in a situation without call, you could also go for this solution:
arr.push = function(data) {
alert(data); //callback
//While unlikely, someone may be using "psh" to store something important
//So we save it.
var saved = this.psh;
this.psh = Array.prototype.push;
var ret = this.psh(data);
this.psh = saved;
return ret;
}
While I'm telling you how to do it, you might be better served with using a different method that performs the callback and then just calls push on the array rather than overriding push. You may end up with some unexpected side effects. For instance, push appears to be varadic (takes a variable number of arguments, like printf), and using the above would break that.
You'd need to do mess with _Arguments() and _ArgumentsLength() to properly override this function. I highly suggest against this route.
Or you could use "arguments", and that'd work too. I still advise against taking this route though.
There's another, more native method to achieve this: Proxy
const target = [];
const handler = {
set: function(array, index, value) {
// Call callback function here
// The default behavior to store the value
array[index] = value;
// Indicate success
return true;
}
};
const proxyArray = new Proxy(target, handler);
I wanted to call a function after the object has been pushed to the array, so I did the following:
myArray.push = function() {
Array.prototype.push.apply(this, arguments);
myFunction();
return myArray.length;
};
function myFunction() {
for (var i = 0; i < myArray.length; i++) {
//doSomething;
}
}