JavaScript Closure problem again!

Question

This is what i am facing with

function AAA(){
    this.f1 = function (){
        /*expecting that f2 will be call as both of then are of same object.*/
        console.log(f2(5));//
    }

    this.f2 = function(x){
        return x;
    }
}

x = new AAA();
x.f1(); //ReferenceError: f2 is not defined

Neither does it work,

function AAA(){
    this.f1 = function (){
        /*expecting that f2 will be call as both of then are of same object.*/
        console.log(f3(5));//
    }

    /*naming the function f3 hope to get function reference, as function 
     on the right side has name now and in the closure of f1, right?*/
    this.f2 = function f3(x){
        return x;
    }

    function f4() {};
}

x = new AAA();
x.f1(); //ReferenceError: f3 is not defined

What is happening here? who are in closure of 'f1' except 'f4'? can't we call the same object function without 'this'?

Elian Ebbing · Accepted Answer · 2011-02-17 07:02:20Z

3

You are not really using closures here. It will work fine if you change the line to

 console.log(this.f2(5));

If you want to use closures, you can rewrite the class as follows:

function AAA()
{
    var f1 = function()
    {
        console.log(f2(5));
    };

    // f2 is a private function.
    var f2 = function(x)
    {
        return x;
    };

    // Define the public interface.
    return { f1: f1 };
}

answered Feb 17, 2011 at 7:02

Elian Ebbing

19.1k5 gold badges50 silver badges56 bronze badges

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

3 Comments

Zer001 Over a year ago

yes, I got your point but i wonder who are in closure of f1, or why can't we call same objects function without 'this'? what is the mechanism.

Elian Ebbing Over a year ago

@abdullah829: In other languages you can omit "this" if you are referring to another member of the same object. You can't do that in javascript. If you just write "f2" and omit "this", then javascript will start looking for a local variable with this name, and then go up in the scope chain (closures) and finally it will look at the global scope (window object).

Zer001 Over a year ago

That's fine! thank you then, what does happen if you name a function like second example ... where name is f3, if you did not assign it to this.f2 it would work properly? right

Community · Accepted Answer · 2017-05-23 12:29:02Z

You’re confusing a few things here; this and closures are two completely different issues.

Your problem here is that you’re trying to refer to f2 directly, thereby assuming that this is part of the current execution scope. It isn't.
If you put f2 on this, you’ll have to keep referencing it as this.f2. To be able to reference f2 directly, you’ll have to declare a (separate) variable by that name, which you can then assign to this if you want, as qwertymk says.

Personally, I try to avoid this as much as I can, since its meaning is completely dependent on how the function is called (e.g. if AAA is called without specifying the new operator, this will refer to the global object!). It also saves you from headaches like the one above. Closures (as demonstrated by Elian) are a much better way of obtaining this functionality.
Interestingly enough, I've found I hardly ever need to use this.

In Elian's example, f2 is closed over: once the AAA function is done running, nobody can access f2, except the functions that were defined inside AAA (and are still accessible). In this case, the function f1 is accessible from the returned object, so that still exists. Therefore, f1 can still use f2.
That's what closures are about: a function can still access all the variables in its scope, even when those variables were declared in a function that's terminated.

qwertymk · Accepted Answer · 2011-02-20 08:47:29Z

1

It should be this.f2() not f2() by itself. You would use f2() if it was a private variable which means if it was created with a var keyword.

function AAA(){
    var f3 = function(x) { return x; };
    this.f1 = function (){
        /*expecting that f2 will be call as both of then are of same object.*/
        console.log(this.f2(5));//
        console.log(f3(10));
    }

    this.f2 = function(x){
        return x;
    }
}

DEMO

edited Feb 20, 2011 at 8:47

answered Feb 17, 2011 at 6:58

qwertymk

35.6k31 gold badges127 silver badges184 bronze badges

2 Comments

Christopher Creutzig Over a year ago

For exactly the reason qwertymk mentioned: The assignment to this.f2 does not create a variable named f2, but your code tries to access a variable(!) named f2.

Zer001 Over a year ago

@Chistopher What does happen with the second example, when I name the function as f3?

Martin Jespersen · Accepted Answer · 2011-02-17 08:14:47Z

0

Others have already told you what the problem is, so i will not repeat it. If you want your code to work, you just need a reference to this:

function AAA(){
    var self = this;
    this.f1 = function (){
        console.log(self.f2(5)); //self.f2 exists, yay
    }

    this.f2 = function(x){
        return x;
    }
}

x = new AAA();
x.f1(); //5

answered Feb 17, 2011 at 8:14

Martin Jespersen

26.3k8 gold badges60 silver badges69 bronze badges

Collectives™ on Stack Overflow

JavaScript Closure problem again!

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related