I can store a function in a variable and call it later like this
var storedFunction = functionName;
//Later On
storedFunction(); //Equivalent to functionName()
How can I store a function like this and call it later, also executing this when its called so this would be the
var storedFunction = this.function1().function2();
Later I could call it like this and this would be the class.
class MyClass {
method() {
storedFunction();
}
}
If you have a function like this :
function myFunction(){
return {
function inner(){
return 'some data'
}
}
}
When you call myFunction with myFunction() returned value is an object like this:
{
inner: function (){ return 'some data'; }
}
If you want to store inner function just need store your value with it's key from returned object, like this:
let myInnerFunction = myFunction().inner;
...
//and when you want call that
myInnerFunction ()
In your case this is correct:
let storedFunction = this.function1().function2;
If you want to run function1 and function2 when you call there is a simple way:
let storedFunction = () => {
return this.function1().function2();
}
// or without arrow function
let storedFunction = function () {
return this.function1().function2();
}.bind(this)
The dot operator (.) is the object access operator. That means whenever you see it (not related to a number), the code is attempting to access a property or method (function) of that object.
That means: this.something is attempting to access the something property on an object referred to as this.
Related, then function1().function2() means function2() must be a method of an object too. But, in this case, the object must be returned from function1() in order for this to work.
So here is some sample code that would do what you expect.
function function1() {
return {
function2: () => {
console.log('called function2 from function1 on "this"');
}
}
}
function1.bind(this);
this.function1().function2();
// Using class syntax
class OtherClass {
function2() {
console.log('Used class keyword');
}
}
class MyClass {
constructor() {
this.veryOddThingToDo = this.function1().function2;
}
function1() {
return new OtherClass();
}
}
const myClass = new MyClass();
// Get reference to function2() from "MyClass.function1()" call
const oddness = myClass.veryOddThingToDo;
// This is exactly: this.function1().function2() referenced"
oddness();
Related
I can do this in JavaScript:
var output = String(result);
And I can do this with the same object that is referenced using String:
var character = String.fromCharCode(10);
String can be used as a function to construct an object and members can be called on it without using it as a constructor. How do I make an object usable in both these ways? What is this called?
You are talking about class methods.
function Foo() {
this.bar = 3
}
Foo.baz = function() {
console.log('hi');
}
or in ES 2015
class Foo {
static baz () {
console.log('hi');
}
}
Response to the comments
You can define a static method in the constructor function because the constructor function is necessarily in scope:
function Foo() {
Foo.method = function () {
// do stuff
}
}
There are a couple of problems with this approach though:
Foo.method('stringy string'); // TypeError: cannot read property 'method' of undefined
Because the static method is defined in the constructor, it won't be there until the constructor function runs at least once:
const foo = new Foo();
Foo.method('stringy string'); // now we're good
which leads to another problem, now we're wastefully reassigning that method every time the constructor runs. You can avoid that with a conditional check:
function Foo() {
if (!Foo.method) Foo.method = function....
}
But that's a lot of weird stuff just to avoid defining the class method after the constructor, and it still doesn't solve the first problem.
You can make a class with static methods:
class Foo {
constructor(bar) {
this.bar = bar;
}
length() {
return this.bar.length;
}
static fromThing(thing) {
return new Foo(thing.bar);
}
}
Foo.fromThing() is analogous to String.fromCharCode()
Simply
function MyClass () {
this.val = 1;
}
MyClass.staticMethod = function () {/* code here */};
Seems like I can only create a global variable for this to work but here is what would be ideal. I would like to pass a variable to an object which has keys that reference functions. In the function I am referencing I would like to set either that variable or one that was defined within the function that called it and pass it back:
jsfiddle
var methodHandler = {
'a-key': function () {
aVariable = document.getElementById('a-container');
}
}
function sample() {
var aVariable;
methodHandler['a-key']();
console.log(aVariable);
}
sample();
Because of scoping, you can't really do it that way. However, you could restructure it like this and get a similar result:
var methodHandler = {
'a-key': function () {
return document.getElementById('a-container');
}
}
function sample() {
var aVariable = methodHandler['a-key']();
console.log(aVariable);
}
sample();
You should use the this element. The this element, when referenced inside a function of the object, represents the object itself, so doing this.foo = 1 will actually create a property called foo with the value of 1 in your object.
Here is the correct form of the code:
var methodHandler = {
'a-key': function () {
this.aVariable = document.getElementById('a-container');
return this.aVariable;
}
}
function sample() {
// You can do this:
methodHandler['a-key']();
console.log(methodHandler['aVariable']);
// Or you can do this instead:
console.log(methodHandler['a-key']());
}
sample();
When you call methodHandler['a-key'](), the property aVariable will be set in your object, so if you log the object you'll see this:
console.log(methodHandler);
// Object {a-key: function, aVariable: div#a-container}
why doesn't this work as expected. (see expected comment)
var Module = function () {
var public_instance_var;
function doStuff () {
Module.doOtherStuff();
console.log(public_instance_var); // expected: true, but logs undefined
};
function doOtherStuff() {
public_instance_var = true;
};
return {
public_instance_var: instance_var,
doStuff: doStuff,
doOtherStuff: doOtherStuff
}
}();
Module.doStuff();
Update: Fixed accordingly to a few of jAndy suggestions
Multiple errors here:
You don't return DoStuff as module interface
instance_var is not declared, probably meant public_instance_var
doOtherStuff is never assigned to Module, just call it like doOtherStuff();
Fixed code:
var Module = function () {
var public_instance_var;
function doStuff() {
doOtherStuff();
console.log(public_instance_var); // expected: true, but logs undefined
};
function doOtherStuff() {
public_instance_var = true;
};
return {
doStuff: doStuff,
public_instance_var: public_instance_var
}
}();
Module.doStuff();
change your code like so
var Module = function () {
var public_instance_var;
function doStuff () {
doOtherStuff();
console.log("var is ", public_instance_var); // expected: true, but logs undefined
};
function doOtherStuff() {
public_instance_var = true;
};
return {
public_instance_var: public_instance_var,
doStuff : doStuff
}
}();
Module.doStuff();
you have to return doStuff() function (otherwise outside it will be undefined) and public_instance_var instead of instance_var
you need to execute doOtherStuff() without prefixing Module.
What this code does is, simply put: create and run a function and assign its return value to a variable: Module. The return value is an object with 1 property: public_instance_var, that points to the variable instance_var, or (after correcting the typo: public_instance_var). This variable was declared, but not instantiated. Therefore the return value looks like this:
Module.public_instance_var = undefined
The very last line Module.doStuff(); won't work one bit: Module is an object that has no methods. The functions you declared are garbage collected when the anonymous function returns. If you want access to those functions, you'll need to include them in the return statement. Read up on closures, Object constructors and design patterns in general, but I'd say the code you're after will look something like this:
var Module = (function()
var public_instance_var;
function doStuff () {
this.doOtherStuff();
console.log(public_instance_var); // expected: true, but logs undefined
};
function doOtherStuff() {
public_instance_var = true;
};
return {
public_instance_var: public_instance_var,
doStuff: doStuff,
doOtherStuff: doOtherStuff
};
})();
Of course, this way your variable public_instance_var is a public property, so my guess would be what you're really trying to do is simulate a private properties and methods. In which case you might end up with code similar to this:
var Module = (function()
{
var public_instance_var;
return {
//public_instance_var: public_instance_var, remove this line
//the closure will preserve access to the variable
doStuff: function ()
{
this.doOtherStuff();//this, you're referencing the object's property
console.log('here I am');
},
doOtherStuff: function ()
{
public_instance_var = true;
//this won't work anymore:
//this.public_instance_var = true;
};
}
})();
Module.doStuff() now logs here I am, but the doOtherStuff is now a public method, too. Here's how you might choose to solve the issue:
var Module = (function()
{
var public_instance_var;
function doOtherStuff ()
{
public_instance_var = true;
};
return {
//public_instance_var: public_instance_var, remove this line
//the closure will preserve access to the variable
doStuff: function ()
{
doOtherStuff();//don't use this here, but the reference to the function exists thanks to closure
console.log('here I am');
console.log(public_instance_var);//logs true
}
};
})();
These are just a few of the very powerful things you can do with closures and functions returning objects. Just read a couple of articles, like this one, there are better ones out there. Google the term power constructors
When does it make sense to use function expressions instead of function declarations when implementing "private methods"? In both cases, the functions are encapsulated, the only practical difference appears to be that I wouldn't be able to call myFunc1 in the constructor. I know I should be using the prototype property either way, but I'm just curious.
function myClass
{
myFunc1() //error
myFunc2() //success
var myFunc1 = function()
{
}
function myFunc2()
{
}
}
You can call the function assigned to a variable, but you have to assign it before you can call it:
function myClass() {
var myFunc1 = function() {
}
myFunc1() //success
myFunc2() //success
function myFunc2() {
}
}
Those functions are local to the constructor, so it's not the same as using the prototype. To make a public function you need to assign it to the object:
function myClass() {
this.myPublicFunc1 = function() {
}
this.myPublicFunc2 = myFunc2;
function myFunc2() {
}
}
var o = new myClass();
o.myPublicFunc1() //success
o.myPublicFunc2() //success
You must use an expression if you want to invoke the function immediately.
This one invokes it and assigns the return value to the variable:
function myClass {
var myVar = function() {
return 'some value'; // <--- 2. assign the return value to the variable
}(); // <--- 1. invoke the function immediately
function myFunc2() {
}
}
This one invokes it, but assigns the function itself to the variable:
function myClass {
var myFunc1;
(myFunc1 = function() { // <--- 1. assign the function to the variable
// Do something
})(); // <--- 2. invoke the function immediately
function myFunc2() {
}
}
I know how to access the below member function when it's written like this:
var blady_blah=
{
some_member_function: function ()
{
}
}
I access it from outside doing blady_blah.some_member_function()
But how do I access the member function when it's written like this:
(function() {
some_member_function: function ()
{
}
})();
Braces, { }, are used to define both object literals and function bodies. The difference is:
var name = {}; // Object literal
Which you may also see written as
var name = {
};
That's just the same but with some space in between so it's still an object literal, and unfortunately it looks very similar to:
var name = function () { // Function body
};
An object can have members:
var name = {
member: "string"
};
Whereas a function cannot; a function has statements:
var name = function () {
do_something();
var result = do_something_else();
};
You can't write
var name = function () {
member: "string"
};
Because you've mixed the two uses of { } together.
A variable can be defined within a function, but it can't be seen outside the function - it's within the function scope:
var name = function () {
var something_useful = string;
};
The second example is a closure (it just happens to have a syntax error inside). Minus the bad syntax, your self-evaluating anonymous function looks like this:
(function() {
})();
If you'd like, you can define functions inside this that will be invisible to the outside world. This is useful if you're interested in maintaining a clean global namespace, for example with library code.
(function() {
function utilityFunctionFoo() {
}
function utilityFunctionBar() {
}
})();
Of course, if you'd like to call any of these functions from the outside world, you're out of luck. Or are you? Actually, there's another way to define a function:
var foo = function() {
}
That's exactly the same as writing:
function foo() {
}
...Except that when written in the second style, you can actually omit the var keyword and create a global variable! Bringing it all together:
(function() {
publicData = "stuff accessible from outside anonymous function";
var privateData = "stuff that stays inside anonymous function";
function utilityFunctionFoo() {
}
function utilityFunctionBar() {
}
usefulFunctionExport = function() {
utilityFunctionFoo();
utilityFunctionBar();
}
})();
usefulFunctionExport();
You can't access it after the function it's in terminates. It's a local variable that goes out of scope when its parent function ends.
You should make the main function be a constructor so that it returns a new instance of a class (you could name it Blahdy_blah) with the member function as one of its properties.
Look up constructors, their return values, and accessing member variables.
If you want to execute the function you need to return an object that exposes the function.
var LIB = (function() {
var fn = {
member_function : function(){}
};
return fn;
})();
and to call
LIB.member_function();
(function() {
blady_blah.some_member_function();
})();
If you need to add stuff into it you would write it like this.
(function() {
blady_blah.some_member_function(function(){
// Do stuff...
});
})();