Understanding Functional Scoping, `this`, and OO design patterns in Javascript

Question

For some time now, I've been using the design pattern of objectOne, shown below. I cannot remember where I picked it up. I tried to find it but couldn't. Perhaps its some hybrid of things I read about. Today I discovered that it is very flawed, since this is resolving to the window object, making all public methods global. I was under the impression that when this is used within a function, it would refer to the function itself, as opposed to the global window object. I guess this is not the case? Could someone explain something that I'm missing or point me to a resource that explains it? I'm also interested in either fixing this pattern or finding a similar one that doesn't have this problem with global method names. I suppose if I would use a variable other than this, perhaps fn, and i return that, then it would fix things. Thanks in advance for any help with this question, sorry its sort of vague.

JS Fiddle: http://jsfiddle.net/nLL8y/3/

myapp = {};

myapp.objectOne = function() {
    var that = this,
        p = {};

    this.public = function() {
        console.log(this);
    };

    p.private = function() {};

    return this;
}();

myapp.objectTwo = {
    public: function() {
        console.log(this);
    },

    notPrivate: function() {}
};

myapp.objectThree = function() {
    var fn = {},
        p = {};

    fn.public = function() {
        console.log(this);
    };

    p.private = function() {};

    return fn;
}();

//creates global functions
myapp.objectOne.public();
//doesn't allow private
myapp.objectTwo.public();
//seems to work
myapp.objectThree.public();

this refers to the closest tied object instance, in this case that would be window. What is your code supposed to do? — Ja͢ck
– Ja͢ck, Commented Jun 25, 2012 at 12:32
developer.mozilla.org/en/JavaScript/Reference/Operators/this — Felix Kling
– Felix Kling, Commented Jun 25, 2012 at 12:40
this never refers to the function itself, unless you explicitly set it: func.call(func). — Felix Kling
– Felix Kling, Commented Jun 25, 2012 at 12:42
@Jack The idea is that myapp.objectOne will be assigned to the return value of an anonymous function. It builds two objects of functions and returns one making them public. I added a third version which seems to work like I want it to. I thought that this in objectOne would behave as it does in objectTwo and refer to the parent object instead of the window. I guess I'm missing something about function scopes and this. I'll have to read more about it, but I thought I was using a common design pattern but apparently I was way off base. I used this since I thought its a convention — Andy Groff
– Andy Groff, Commented Jun 25, 2012 at 12:46

Tomasz Nurkiewicz · Accepted Answer · 2012-06-25 12:24:00Z

2

myapp is used as a namespace in your example. objectOne and objectTwo are constructors so they should start with capital letter. But your biggest problem is using methods directly as opposed to creating objects:

var myapp = {};

myapp.ObjectOne = function() {
    this.public = function() {
        console.log(this);
    };
    var private = function() {};
};

myapp.ObjectTwo = function() {
    this.public = function() {
        console.log(this);
    },

    this.notPrivate = function() {}
};


var o1 = new myapp.ObjectOne();
o1.public();

var o2 = new myapp.ObjectTwo();
o2.public();

answered Jun 25, 2012 at 12:24

Tomasz Nurkiewicz

342k72 gold badges713 silver badges680 bronze badges

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

1 Comment

Andy Groff Over a year ago

Thanks. Someone linked me to a mozilla page which seemed to explain this pretty well. I guess this only works as I expected with the new constructor, and will refer to window in an anonymous function.

Collectives™ on Stack Overflow

Understanding Functional Scoping, `this`, and OO design patterns in Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related