How to create object member variable that contains a function pointer - javascript

In Javascript, I have an object that contains a member variable called "dialogHost". It is itself an object that can call different functions. Currently, the way I have it set up is that in most cases, the object's dialogHost value is undefined. In the rare cases where it needs to be defined, I define it to be something like "window.parent" for example. The problem with setting it up this way is that any time I need to use this member variable, I have to check whether it is defined first, like:
var myDelegate;
if (typeof (myObject.dialogHost) !== 'undefined') {
myDelegate = myObject.dialogHost.someFunction;
} else {
myDelegate = someFunction;
}
myDelegate(...);
I have to do this type of check in a few places and it would be nice if the value always existed. Should I simply provide a default value of "window" for dialogHost in this case? I'm not sure if that is a good idea or not. Basically, I want the default value to be such that I can simply call:
// This would be equivalent to myDelegate(...) above...
myObject.dialogHost.someFunction(...);
Without having to do the above checks every time. Is there a way to do this?

In JavaScript the very good practice is development with "avoiding global variables as much you can".
Should I simply provide a default value of "window" for dialogHost in
this case? - No, don't rely on global window object. Use closures and immediate functions.
var myObject = {
'dialogHost': function(){
// doing some good stuff
}
},
myDelegate;
myDelegate = (function(obj){
function someFunction(){ // local function, not accessible from outside
// doing some good stuff too
}
return (typeof obj.dialogHost === 'function')? obj.dialogHost : someFunction;
}
)(myObject);
// Now you can use myDelegate() function anywhere below
myDelegate(...);

Related

Can you get the object of a method?

I'm just wondering if I can make some of my helper functions(for stuff like benching, logging and caching) a bit neater. Right now I'm doing this
function doSomethingToMethodsObject(object, methodname) {
//do things to object and object[methodname]
}
so I can use it like this
var myObject = function() {
this.myString = "hello";
this.myMethod = function() { return this.myString; }.bind(this);
doSomethingToMethodsObject(this, "myMethod");
}
but it would be better if I could call it like this
doSomethingToMethodsObject(this.myMethod);
and then break down the function reference to this and "myMethod" inside doSomethingToMethodsObject.
So is there a way to figure out what objects a function belongs to?
So is there a way to figure out what objects a function belongs to?
A function does not belong to only a single object. There can be lots of references to that same function on lots of different objects. So, no you can't specifically figure out what object a function belongs to by purely looking at the function.
In fact, why you pass this.myMethod as an argument, there is no connection whatsoever to the this part that is passed. It just gets a reference to the function and passes that.
You can use .bind() to pass a bound reference to the function, but that only lets you call the method in the context of the right object - it doesn't allow you to separate out the object from the method. If you need both object and method separately in your function, then you will need to find some way to make them both separately accessible inside the function - the most obvious way to do that is just pass them both as arguments.
Depending upon the specific context (which you don't really share very much of), sometimes you can use parent scoped variables like var self = this; to maintain a reference to this that can be accessed by child functions, but I'm not sure that applies to what you're doing.
Here are some options:
doSomethingToMethodsObject(this, this.myMethod);
doSomethingToMethodsObject({obj: this, method: this.myMethod});
When you use this.myMethod, JS creates a reference whose base is this and whose referenced name is "myMethod".
However, when you use it as an argument, JS resolves the reference into the property value. Therefore, in doSomethingToMethodsObject, it's too late to get the base.
The only way to obtain the base of this.myMethod is when myMethod is an accessor property with a getter which redirects to the underlying object value. Then you can use this inside the getter, and store it in a property of the underlying value.
For example:
var obj = {
_myMethod: function(arg) { /* Underlying function */
return {thisArg: this, arg: arg};
},
get myMethod() { /* Stores reference parts and redirects */
return Object.assign(this._myMethod, {
refBase: this,
refName: "_myMethod"
});
}
};
function doSomethingToMethodsObject(value) {
return value.call(
value.refBase,
value === value.refBase[value.refName]
);
}
obj.myMethod(123); // {thisArg: obj, arg: 123}
doSomethingToMethodsObject(obj.myMethod); // {thisArg: obj, arg: true}

Can't use own property in JavaScript Object's function

I'm trying to understand the following code:
var x = {
editBox: _editBox,
comboBox: _comboBox,
getExchangeRate: function() {
var r = parseFloat(_editBox.val());
return isNaN(r) ? null : r;
}
}
My question is about the use of _editBox in getExchangeRate().
I'm creating a JavaScript object, which has two value properties and a function property. But why can't the function use editBox? It's undefined if I try.
And how can it use _editBox? It could be much later when the function gets called. I understand there is some work being done under the hood to make it available, but how do I know it will still be valid? Wouldn't it make more sense if I could use editBox instead?
Having come from other languages, that's certainly what seems more logical.
But why can't the function use editBox? It's undefined if I try.
It is a property of the object, not an in-scope variable.
this.editBox will probably work (assuming are you calling getExchangeRate in the right context (i.e. x.getExchangeRate()).
And how can it use _editBox?
Because the variable is in scope.
It could be much later when the function gets called.
That doesn't really matter
how do I know it will still be valid?
You control when and if it gets overwritten.
Because there is no variable such as editBox, but there is _editBox. I think you are looking for
this.editBox.val()
If you call the function as x.getExchangeRate(), then this inside the function will refer to x and you can access its property editBox. See the MDN documentation for more information about this.
Having come from other languages, that's certainly what seems more logical.
JavaScript is not like Java where instance members are automatically in scope of the methods. There is no implicit connection between a function and the object it is a property value of. That's because functions are first-class objects, they don't "belong" to anyone. And JS has lexical scope.
Consider this example:
var name = 'bar';
function foo() {
console.log(name);
}
var obj = {
name: 'baz',
prop: foo
};
As you can see, we defined foo "independently" from obj. obj.name doesn't magically become name inside the function if it is called as obj.prop().

Why is call necessary in this Javascript example?

Here's the problem (called "Compose functions (T Combinator)" on codewars.com, in case you want to try it out in the original environment):
Let's make a function called compose that accepts a value as a parameter, as well as any number of functions as additional parameters.
The function will return the value that results from the first parameter being used as a parameter for all of the accepted function parameters in turn. If only a single parameter is passed in, return that parameter.
So:
var doubleTheValue = function(val) { return val * 2; }
var addOneToTheValue = function(val) { return val + 1; }
compose(5, doubleTheValue) // should === 10
compose(5, doubleTheValue, addOneToTheValue) // should === 11
Here was one of the possible solutions:
var compose = function(initialValue) {
var functions = Array.prototype.slice.call(arguments, 1);
return functions.reduce(function(previousResult, func){
return func.call(this, previousResult);
}, initialValue);
}
Why do we need to return func.call(this, previousResult) rather than just func(previousResult)? The latter only works in some cases. What will "this" default to without the call?
Why do we need to return func.call(this, previousResult) rather than just func(previousResult)?
We don't really. this is not the this value of the compose function (what the author probably intended), but of the reduce callback - where it is specified to be undefined.
What will "this" default to without the call?
undefined as well, see Why is "this" in an anonymous function undefined when using strict?.
In strict mode, this will be undefined since there is no calling context.
In non-strict Javascript it will be the global object (window in a browser).
Why do we need to return func.call(this, previousResult) rather than just func(previousResult)?
this defaults to our window.
Basically, we're giving it a secondary value in order to further our progression down the line.
If you were to call simply previousResult, the JS doesn't know where to look to find such a thing. Your are referencing the window if you don't call a prior parameter. This is very common in most OOP languages. You can't look for your value IN window without further defining that you want something IN window.
Essentially, we are just providing a bogus variable in order to get to the next step in the chain. You will see this a lot with Python and Ruby code.
The reason you set this is because this will equal the parent window, then you know you can find the next variable within that particular parameter.
Simple Example:
It's sort of like trying to call a variable in a different function. Just doesn't work without defining your scope first.

Get name of instance of a class within the class

Here is what I want:
var Validator = function () {
this.do = function () {
alert(INTANCENAME); /// SHOULD BE 'FOO'
}
}
var FOO = new Validator().do();
Is it possibe to implement in Javascript?
The truth is there is no point of doing that, the only way I can hardly think is to loop all window or scope objects and check some kind of equality with the current object, something like
this.do = function () {
for(var key in window) {
if(this === window[key]) {
alert(key);
}
}
};
In order to work call it after you assign it.
var FOO = new Validator();
FOO.do();
Another issue that can come up is that an instance (a reference) can be stored in various variables so maybe will not get what you expect.
The literal answer to your question would be:
Use (new Error()).stack to get information on the line and the function where the do() method was called.
Use JS parser (e.g. Esprima) to find out what variable it was called on (if any, the method itself might be assigned to a variable).
I do not recommend doing this though.
There's no way to directly do what you're asking for here. Objects themselves are not in any defined by their matching variable name - in fact it's possible to have objects that exist that are not directly assigned to a variable, and multiple variables assigned to the same object.
The javascript interpreter uses our variable names as identifiers to help with the code execution, but once it's running the variable name makes no difference to the running javascript program, as it's probably been reduced to a memory reference by the time it's executing, completely separated from the original code that you wrote.
Edit: Answer by yannis does kind of simulate this, but it relies on working with variables available in a specific scope - what I ment was that there's no direct way to do this from within the object itself as per your example in the question.

Pass a function reference that has a variable as its name

I have the following javascript method:
function 123_test_function(){
}
The function is generated by java and sent to the client. The 123 is the id of the component so it could change. i.e I can have another function called 111_test_function()
I want to pass this function as a reference.
So I need to create the reference
var 123_test_function = function 123_test_function(){
}
In another js file inside an object I have a function that needs to use the 123_test_function reference like so:
useFunction(123_test_function);
The problem I'm having is which the 123 part of the function.
In this object I have a variable(uniqueID) which has the number at the beginning of the function.
I need the function call to be something like:
useFunction(uniqueID+"_test_function");
This doesn't seem to pass a function instead it passes a string.
Am I doing something wrong?
For one, identifiers (such as function names) cannot begin with a digit.
To solve your problem, use an object, like this:
// 1. define an object to hold all your functions
var allFunctions = {};
// 2. store any function with a unique string as the ID
allFunctions['123_test_function'] = function () {
// whatever
};
// 3. call the function
allFunctions['123_test_function']();
allFunctions[uniqueID + '_test_function']();
Objects are associative arrays. They store key/values pairs, so they do exactly what you want here.
Note that functions don't need a name in JavaScript, so I did not use on in step 2.
If the function is defined as global one, it will be a member of global object (window in case of browsers). Hence you can just do window['id_'+uniqueID+'_test_function'] to access your function
useFunction(window['id_'+uniqueID+'_test_function'])
(Identifiers cannot begin with numbers in JavaScript so I added the 'id_' prefix. You can of course change it to your liking.)
function test_function(number){
if(number == 1)
{
return function() {}
}
if(number == 2)
{
return function() {}
}
}
call the function like this
var func = test_function(1)
func();
As a couple of people have correctly pointed out, a function (or indeed variable) name cannot begin with a numeric. Also this syntax is wrong:
var 123_test_function = function 123_test_function(){
}
The correct syntax would be:
var 123_test_function = function() {
};
...although it should also be noted that the effect of this is exactly the same as a "traditional"
function 123_test_function() {
}
...declaration, in the context of the window object - since window is effectively the global scope of a JS environment in a browser, it doesn't matter how you define the functions, they will always be accessible from anywhere. Understanding exactly what each method of declaring a function means in Javascript is important - luckily, Douglas Crockford to the rescue once again...
People have suggested various methods for calling your named functions from the context of a string, which is basically attempting to use "variable variable" syntax, a subject that has been discussed on SO and elsewhere at length. The eval() approach should be avoided wherever possible - if you find yourself needing an eval() chances are you went wrong somewhere a while back. #Tomalak has the right idea with a collection of functions held in an object, but this still needs the slightly messy string approach to reference things that are actually being accessed by a numeric ID. The collection approach has the advantage of not cluttering up the window object with what are likely to be single/zero use members.
But the way I see it, all you actually need here is an indexed array of functions, where all you need is the numeric index in order to access them. I suggest you create your functions like this:
// Do this once at the top of your JS
var test_functions = [];
// Now, for each function you define:
test_functions[123] = function() {
// Do stuff here
};
// And when you need to call the functions:
var funcId = 123;
test_functions[funcId]();

Categories