Try to create object of returned function?

Question

I was trying something different and ended up with these codes..

var f1 = function() {
             this.x = 10;
             this.innerf = function() {    console.log(this.x);   }
         }

var of1 = new f1();
of1.innerf();

var f2 = function() {
             return function() {
                 this.x = 10;
                 this.innerf = function() {    console.log(this.x);    }
             }
         }

var of2 = new f2();
of2.innerf();

It is throwing error ??! of2.inner is not a function

So, my anonymous function is returning same function body to my variable. Why still i cannot able to instantiate??

or rather the hideous nature of JavaScript's scope and prototypical nature. — jusopi
– jusopi, Commented Jun 23, 2015 at 20:49
@Kyll—every language has a set syntax and rules, constructive comments are preferred. @jusopi—this has nothing what–so–ever to do with either scope or prototype inheritance. — RobG
– RobG, Commented Jun 23, 2015 at 20:57
Your last line would have to be switched from of2.innerf(); to new of2().innerf(); but I'm curious what your end goal is from this. — Jesse Kernaghan
– Jesse Kernaghan, Commented Jun 23, 2015 at 20:59

GolezTrol · Accepted Answer · 2015-06-23 21:12:53Z

5

The first part returns an object of which you can call the innerf method.

The second part returns a function that would return an object if you called it. But you don't.

This would work. Call the function f2(). It's return value is the anonymous function. Then, with new <return value of f2>(), you can create an instance of the object.

var f2 = function() {
             return function() {
                 this.x = 10;
                 this.innerf = function() {    console.log(this.x);    }
             }
         }

var of2 = new (f2())();
of2.innerf();

// The two lines above can also be written as:

var of3constructor = f2(); // This returns the inner anonymous function.
var of3 = new of3constructor(); // This creates an instance by invoking the anonymous function.
of3.innerf();

edited Jun 23, 2015 at 21:12

answered Jun 23, 2015 at 20:52

GolezTrol

116k19 gold badges186 silver badges215 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Jyotirmay Over a year ago

Confused :( :( .. can you please elaborate.

GolezTrol Over a year ago

There is a difference between the function (the declaration of a piece of functionality) and the result of a function (the value you get when calling it). Your second function doesn't return an instance of the anonymous function in it, but instead it returns the inner function itself. You first need to create an instance of that inner function before you can call it's method.

GolezTrol Over a year ago

I must add that I made this code working to show the error in your thinking, but in itself it doesn't make much sense. I wouldn't know a good purpose for this.

Travis J Over a year ago

@Jyotirmay - Using new on the function in the f2 variable will create an instance of f2. It will then return a function instead of the instance object. As a result of2 will be equal to the returned function. That function has no innerf property. If you were to call that function, it would also have no innerf property because this wouldn't be scoped. You would have to use new on the of2 value again. However, there was no point in using new on f2 when all you wanted was to use new on the returned function.

Travis J Over a year ago

@ecarrizo - That would result in an error. "Uncaught TypeError: Cannot read property 'innerf' of undefined". There would be no instance to use without using new, and as a result this would not be scoped to the return function, it would be scoped to window. In other words, that would require var of2 = (f2())(); window.innerf();//10

|

ecarrizo · Accepted Answer · 2015-06-23 21:42:01Z

1

Examples that work:

Creating it directly:

var f1 = function() {
    this.x = 11;
    this.innerf = function() {    
        console.log(this.x);   
    }
}
var of1 = new f1();
of1.innerf();

Returning a new object from a function:

var f2 = function() {
    return new function() {
        this.x = 12;
        this.innerf = function() {    
            console.log(this.x);    
        }
    }
}

var of2 = f2();
of2.innerf();

Returning an object:

var f3 = function() {
    return {
        x: 13,
        innerf : function() {
            console.log(this.x);
        }
    }
}

var of3 = f3();
of3.innerf();

Another one:

var f4 = function() {
    return function() {
         this.x = 10;
         this.innerf = function() {    
             console.log(this.x);    
         }
    }
}

var of4 = new (f2())();
of2.innerf();

Remember that when you call a function without the "new" keyword "this" points object where the functions was declared, in this case "window"

edited Jun 23, 2015 at 21:42

answered Jun 23, 2015 at 20:54

ecarrizo

2,80919 silver badges29 bronze badges

2 Comments

Jyotirmay Over a year ago

okay.. whenever we will use new, will it automatically run my function?? As you did not use '()' after functions. even i tried code like that. and it works fine. So just to confirm. @ecarrizo

ecarrizo Over a year ago

Sorry did not see the edit. Yes, using functionName() and the pharentessis will call a function, if you use new, it will initialize an object, if you are not creating an Object (executing a function directly) the use of new is useless. you can read how it works stackoverflow.com/questions/6750880/…

Community · Accepted Answer · 2017-05-23 12:14:06Z

0

You need to return this from the inner function to the outer function. Also you need to run the inner function immediately.

jsFiddle: http://jsfiddle.net/5dxybbb5/

var f1 = function() {
             this.x = 10;
             this.innerf = function() {console.log(this.x);}
         }

var of1 = new f1();
of1.innerf();

var f2 = function() {
             return function() {
                 this.x = 10;
                 this.innerf = function() {console.log(this.x);}
                 return this;
             }();
         }

var of2 = new f2();
of2.innerf();

Also this explains the () after a function declaration What is the (function() { } )() construct in JavaScript?

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Jun 23, 2015 at 20:58

Sean Wessell

3,5201 gold badge15 silver badges20 bronze badges

Collectives™ on Stack Overflow

Try to create object of returned function?

3 Answers 3

11 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related