Cannot access function inside function javascript - javascript

I'm trying to clean my code a bit, so I create some small objects or libraries (call it how you want) like:
function myLib() {
this.get = function() { ... };
...
};
Problem is when I try to call it like myLib.get(). It throws the following error:
Uncaught TypeError: myLib.get is not a function
I've tried to encapsulate the call into $(document).ready(), but it did not help.
Can you help me, please?
Thanks!

myLib is used for "libary", and you want to call this "get" method of libary.
Static instance is better in your case.
const myLib = {
get:function(){},
get2:function(){}
...
};
myLib.get();
myLib.get2();

so I create some small objects or libraries (call it how you want)
In your case you are creating a constructor, myLib is a constructor and not just a function, and you can't access a function's properties and methods directly that's why you got the Exception.
So you need to get an instance of myLib in order to call the get method or to access any of its members(methods).
function myLib() {
this.get = function() { console.log("get called!!"); };
};
let lib = new myLib();
lib.get();
Note:
And from the MDN Reference for Functions you can see that:
The this keyword does not refer to the currently executing function, so you must refer to Function objects by name, even within the function body.

You should use myLib as a constructor ie:
var lib = new myLib();
lib.get();

Related

How to detect function creation js

I am trying to detect when a function is created, preferable through a constructor. Functions are a type of object, right? So it makes sense that when you create a new one, it calls a constructor. Is there a way to override this, for example, something like this
var old = Function.constructor;
Function.constructor = () => {
alert('new function created!');
old();
};
function asdf() {}
var k = new Function();
If this is not possible, is there a way to get all currently defined functions? I am trying to trigger a piece of code on each function run.
You can't detect function creation.
Functions are a type of object, right?
Yes.
So it makes sense that when you create a new one, it calls a constructor.
No. Or - maybe, but that constructor is internal. Just like the construction of objects from array literals, object literals, regex literals, definition of a function directly creates a native object.
Is there a way to override this?
No. You'd need to hook into the JS engine itself for that.
If this is not possible, is there a way to get all currently defined functions?
No. At best, you could try the debugging API of the JS engine and get a heap snapshot, that should contain all function objects.
I am trying to trigger a piece of code on each function run.
Let me guess, that piece of code is a function itself?
Was able to get a semi-working attempt at this. It reads only global functions but it can add code to both the front and beginning of the function. Any tips on how to improve this, as I use classes a lot when I code?
Thanks to Barmar for the idea of looping through window properties, but since you can't access local functions and class functions, this may be the closest way to do this
<script>
function prepend(name) {
console.time(name);
}
function postpend(name) {
console.timeEnd(name);
}
var filter = ['prepend', 'postpend', 'caches'];
function laggyFunction() {
var l = 0;
while (l<1000) {l++}
}
var functions = [];
for (var property in window) {
try {
if (!filter.includes(property)) { // security error on accessing cache in stackoverflow editor along with maximum call stack size exceeded if prepend and postpend are included
if (typeof window[property] === 'function') {
window[property].original = window[property];
window[property].name = property;
window[property] = function() {
prepend(this.name);
console.log(this.original);
this.original.apply(null, arguments);
postpend(this.name);
}.bind(window[property]);
functions.push(property);
}
}
} catch(e) {
console.warn(`Couldn't access property: `+property+' | '+e);
}
}
document.write(functions); // functions the prepend and postpend are applied to
laggyFunction(); // test performance of the function
</script>

Inject a function/property to another function/object that can be called or read/set from functions within that function?

Can I, in JavaScript, add a function to an already existing function or object that a function within that object then "suddenly" can "see" and call itself? Here is an example to demonstrate:
function CreateThing() {
function callAddedFunction() {
theFunction(); // this does not exist yet!
}
}
So theFunction() obviously does not exist in createThing(). Is there any way to add that outside so that when I then invoke callAddedFunction() it is able to resolve that? Something like:
let f = new CreateThing();
addFunctionAtRuntime(f, "theFunction", function() {
console.log("YAY!");
};
f.callAddedFunction();
I have tried to experiment with prototype, but I have been unable to do this. Note that the main reason for me wanting to do this is "fake" object inheritance without resorting to classes and inheritance as that requires the this keyword in front of every function call. I also want to avoid having to pass an object in that function as a parameter that can be called through in order to reach those other functions. I know that I can achieve this by having all those extra functions in global scope, but I have hoped to avoid that if possible.
EDIT: I have modified my example with the magic function I was looking for called addFunctionAtRuntime which from what I have understood is not possible. Some suggest I use eval and just make those functions available in the eval script, but so far I have been able to do this by creating a script tag dynamically and add my code as content including those functions I wanted callAddedFunction() in my example above to be able to see (without having to call through some object context).
I'm not sure this is exactly what you want but you can also use a generic higher-order function that returns the implementation you are looking for.
const supplimentor = (src, extraFunc) => ({
src: new src(),
extraFunc
})
//OR
function supplimentor1(src, extraFunc) {
this.extraFunc = extraFunc;
new src();
}
function CreateThing() {console.log('SOURCE')}
const extraFunc = () => console.log('EXTRA');
const newFunc = supplimentor(CreateThing, extraFunc)
newFunc.extraFunc()
const newFunc1 = new supplimentor1(CreateThing, extraFunc)
newFunc1.extraFunc()
Just in case the OP ...
... is not in need of something as complex as method modification as described / demonstrated at e.g.
"Can I extend default javascript function prototype to let some code been executed on every function call?"
"Intercepting function calls in javascript" ...
... why doesn't the OP just provide the very function object as parameter to the Thing constructor at the thing object's instantiation time?
After all it comes closest to (or is exactly) what the OP describes with ...
Can I, in JavaScript, add a function to an already existing function or object that a function within that object then "suddenly" can "see" and call itself?
function Thing(fct) {
this.callAddedFunction = () => fct();
}
const thing = new Thing(() => console.log("YAY!"));
thing.callAddedFunction();

Replacing anonynomous function while keeping all others from module

I'm fairly new to node.js, prototypical inheritance and the CommonJS module patterns.
Maybe this question was answered a million times, but I couldn't find it, so even a link to the answer is considered an answer.
I have to wrap a module that has both named and unnamed functions, like this:
// a.js
function a(data) {
console.log(data, 'A')
}
function b() {
a('B');
}
module.exports = a;
module.exports.b = b;
Given OOP background I would like to somehow 'inherit' all the functions of the module while I want to override the anonymous function (I'd like to add some fields to the data).
It is very important that after overriding function a in the new module function b should use the overridden method and not the original one.
// 'inherited.js'
var a = require('./a');
function overriddenA(data) {
data.myAddedValue = 'an important addition';
a(data);
}
// I would like to export all other functions and properties of the original module
[magic that overrides the anonymous function while keeping all other functions as they are]
From where I use it should look like this:
var decoratedA = require('./inherited');
decoratedA('stuff'); // it calls overridden function
decoratedA.b(); // it calls the original a.b() which in turn calls the overridden function
Solved our original problem
Check out this: https://stackoverflow.com/a/31459267/2018771 - still if you have any comment on the abstract problem, please answer the question. We are curious :).
I would like to somehow 'inherit' all the functions of the module while I want to override the anonymous function
Wanna use some dark magic? Then __proto__ is the way to go:
var a = require('./a');
function overriddenA(data) {
data.myAddedValue = 'an important addition';
a(data);
}
overriddenA.__proto__ = a;
module.exports = overriddenA;
The cleaner method, without actual inheritance, would be to just copy over all properties from a to overriddenA. You can use Object.assign (or a shim), _.extend, or a simple for in loop for that.
Meanwhile we have solved our original problem which was adding a special header to every calls of request library. In that implementation there were functions like get(), put(), post(), etc. that used one function: function request(...) which was exported module.exports = request
My understanding was that I had to replace that request(...) with our own, adding our header and then calling the original function.
But we were lucky because request(...) returned an object which we could modify according our needs:
Request.prototype.__originalInit = Request.prototype.init;
requestPromise.Request.prototype.init = function(options){
console.log('adding our stuff');
this.__originalInit(options);
};
So this solved the problem for us, but not the original question.

Constructor and prototypes in javascript

I'm reading a snippet of code that defines a constuctor
var Resource = function(data) {
angular.extend(this, data);
}
and then subsequently defines a method to it.
Resource.query = function(url) {
console.log(url);
}
Can I ask how this works? I know functions are objects as well, and is this the equivalent of the following? But if so, then what happens to the constructor function?
var data = {};
data.query = function(url) {
console.log(url);
}
Also, why wouldn't we simply define it on the prototype instead?
Resource.prototype.query = function(url) {
console.log(url);
}
http://jsfiddle.net/HPg6A/
You would define methods on the prototype only if they are meant to be called on specific instances. When methods are defined directly as constructor members, it's usually to mimic static methods.
Basically, when a method relates very closely to a class, but doesn't make much sense as an instance method, it can be implemented as a static method.
I think that you will agree with me that the second example makes more sense and if you do, you already understood the difference.
1-
var user = new User();
user.findUser('somequery').then(...);
2-
User.findUser('somequery').then(...);
I know functions are objects as well, and is this the equivalent of the following
There's nothing more to what you say. It's just like any other property on any other object.
Also, why wouldn't we simply define it on the prototype instead?
The difference is that each object created using the constructor would then have that method in their prototype chain. This isn't true for properties defined on the constructor itself.
That is:
var Resource = function() {}
Resource.one = function() {
console.log("one");
}
Resource.prototype.two = function() {
console.log("two");
}
var r = new Resource();
r.two(); // => "two"
r.one(); // => TypeError: r.one is not a function
And:
Resource.one(); // => "one"
Resource.two(); // => TypeError: Resource.two is not a function
You might call one a static method, but the language doesn't treat it differently than any other function (unlike methods defined using, say, static in Java).

Javascript Prototype not Working

Hi I don't know whether this is my mistake in understanding Javascript prototype object ..
Well to be clear I'm new to the Javascript singleton concept and lack clear cut knowledge in that but going through some referral sites I made a sample code for my system but it's giving out some errors which I couldn't find why so I'm asking for your help. My code is:
referrelSystem = function(){
//Some code here
}();
Prototype function:
referrelSystem.prototype.postToFb = function(){
//Some Code here
};
I get an error saying prototype is undefined!
Excuse me i thought of this right now
EDIT
I have used like this:
referrelSystem = function(){
return{
login:getSignedIn,
initTwitter:initTw
}
};
Is this causing an issue?
A typical way to define a JavaScript class with prototypes would be:
function ReferrelSystem() {
// this is your constructor
// use this.foo = bar to assign properties
}
ReferrelSystem.prototype.postToFb = function () {
// this is a class method
};
You might have been confused with the self-executing function syntax (closures). That is used when you would like to have "private" members in your class. Anything you declare in this closure will only be visible within the closure itself:
var ReferrelSystem = (function () {
function doSomething() {
// this is a "private" function
// make sure you call it with doSomething.call(this)
// to be able to access class members
}
var cnt; // this is a "private" property
function RS() {
// this is your constructor
}
RS.prototype.postToFb = function () {
// this is a class method
};
return RS;
})();
I would recommend that you study common module patterns if you're looking into creating a library.
Update: Seeing your updated code, the return from referrelSystem won't work as expected, since return values are discarded when calling new referrelSystem().
Rather than returning an object, set those properties to this (the instance of referrelSystem that gets constructed):
var referrelSystem = function () {
// I assume you have other code here
this.login = getSignedIn;
this.initTwitter = initTw;
};
I don't think you intend to immediately execute the functions, change them to this:
var referrelSystem = function(){
//Some code here
};
(+var, -())
Same with the prototype function:
referrelSystem.prototype.postToFb = function(){
//Some Code here
};
(Here you don't need the var, because you're assigning to something that already exists.)
A function should return to work as
prototype
property.
Take a look at this example here

Categories