JavaScript OOP. Trying to study OOP in JavaScript

Question

Below is a simple JavaScript OOP that I am trying to understand. I want to know why getA() and getC() return undefined, but the same getB() returns 2 when I change the variable B in the constructor and assign it to the b.

When I run getD() it returns, what I am assigning? How is this working here?

var a,b,c,d;

var encap = function(a,B,c,d){
    a = a;
    b = B;
    this.c = c;
    this.d = d;
}

encap.prototype.getA = function() {
    return a; // returns undefined
};

encap.prototype.getB = function() {
    return b; // returns 2
};

encap.prototype.getC = function() {
    return c; // undefined
};

encap.prototype.getD = function() {
    return this.d;
};


encap.prototype.setA = function(A) {
    a = A;
};

encap.prototype.setB = function(B) {
    b = B;
};


var encapObj = new encap(1,2,4,6);

console.log(encapObj.getA());  // undefined
console.log(encapObj.getB());  // 2
console.log(encapObj.getC());  // undefined
console.log(encapObj.getD());  // 6

JavaScript is a fine language to learn OOP, just not classical inheritance. — elclanrs
– elclanrs, Commented Aug 21, 2014 at 20:28
Maybe , can you please explain above... i working in javascript only. — Sathish
– Sathish, Commented Aug 21, 2014 at 20:28
a = a doesn't assign to the global a, it assigns to the local one. Those global vars really shouldn't exist in any real scenario. — user400654
– user400654, Commented Aug 21, 2014 at 20:29
JavaScript is a prototype based language, object oriented concepts are created on top of the prototype chain. Have a look at this article to learn more about how the two concepts relate: gameprogrammingpatterns.com/prototype.html — zfedoran
– zfedoran, Commented Aug 21, 2014 at 20:30

Ry- · Accepted Answer · 2014-08-21 20:31:28Z

5

a = a;

This assigns to the local variable a from the local variable a, effectively (ineffectively?) doing nothing. The global variable is still set to its default of undefined, and that’s why you get undefined from getA().

In getC(), you return the value of the global variable c, but only assigned to the property c of the instance: this.c. this isn’t implicit in JavaScript.

answered Aug 21, 2014 at 20:31

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

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

Comments

Ryan Kinal · Accepted Answer · 2014-08-21 20:39:31Z

3

Okay, so here's the deal. You have four global variables:

var a, b, c, d;

You also have four variables that are local to the constructor

var encap = function(a,B,c,d);

Then you also have two "instance" variables - variables that are attached to the new object when it's created.

this.c = c;
this.d = d;

In the constructor, you set a = a - this is really just setting the local variable (parameter) a to itself. You're accessing the local variable from the constructor on both sides of the =. In your accessor getA, you return the global variable a - which is undefined.

Also in the constructor you set the value of global variable b equal to the value of local variable B - remember that they're different because JavaScript is case-sensitive. So, your global variable b now has a value of 2. Since, again, you return the global variable in your accessor getB, you get the value 2.

In your accessor getC, you still return the global variable c - which was never set. Hence undefined. However, this time you set this.c in the constructor, so if you were to return this.c in your accessor, you should get the correct value.

In summary, you should probably be using this on all your variable assignments and returns. so, your constructor should look like the following:

var encap = function(a,B,c,d){
    this.a = a;
    this.b = B;
    this.c = c;
    this.d = d;
}

And your accessors should look like this:

encap.prototype.getD = function() {
    return this.d;
};

From there, I think it's pretty obvious what your setters should look like. Good luck in your exploration of OOP in JavaScript. It's my favorite language, and I love its OOP, despite what anybody says about it. If you have trouble, the StackOverflow JS chat room is often helpful, so come on in some time.

answered Aug 21, 2014 at 20:39

Ryan Kinal

17.8k7 gold badges48 silver badges63 bronze badges

3 Comments

Sathish Over a year ago

Thanks Ryan, What about private variables in OOP, if i am giving this.a = a, so when creating a object , that a will accessible outside the class? i also have another question . By using this.a , whether i am accessing a global "a" or it's local context of the object.

Ryan Kinal Over a year ago

When you use this.a you're accessing the object. this can be kind of a strange concept in JS, but those are the basics. Private don't really exist, though you can use closures to simulate something like private variables. In my experience, it's best to just let go of the idea of "private"

Ryan Kinal Over a year ago

I can, in fact... I wrote a short series on Blogascript. Start with Objects and the Prototype Chain.

Ryan Kinal · Accepted Answer · 2014-08-21 21:00:00Z

2

Here you go, I commented every assignment of what variable is being assigned where.

This should help explain things.

// Create four global variables.
var a,b,c,d;

var encap = function(a,B,c,d){
    // Assign local argument a, to local argument a.  Does nothing
    a = a;

    // Assign local argument "B" to global variable "b"
    b = B;

    // assign local argument 'c' to property 'c'
    this.c = c;

    // assign local argument 'd' to property 'd'
    this.d = d;
}

encap.prototype.getA = function() {
    // Returns global variable a
    return a; // returns undefined
};

encap.prototype.getB = function() {
    // Return global variable B, which was assigned in the constructor
    return b; // returns 2
};

encap.prototype.getC = function() {
    // Return global variable 'c'
    return c; // undefined
};

encap.prototype.getD = function() {
    // return object property 'd', which was assigned.
    return this.d;
};


encap.prototype.setA = function(A) {
    // assign global variable 'a' from argument 'A'
    a = A;
};

encap.prototype.setB = function(B) {
    // assign global variable 'b' from argument 'B'
    b = B;
};


var encapObj = new encap(1,2,4,6);

edited Aug 21, 2014 at 21:00

Ryan Kinal

17.8k7 gold badges48 silver badges63 bronze badges

answered Aug 21, 2014 at 20:38

Jeremy J Starcher

24k6 gold badges56 silver badges75 bronze badges

2 Comments

Sathish Over a year ago

Thanks Jeremy , // Create four local variables. var a,b,c,d; is it local or global? i thought it's global. Best Javascript prototype Example Including private & public variables , methods. Explaining the context of "this". i searched over internet , many has many ways. it will be lot if you give me example. Thanks in advance

Ryan Kinal Over a year ago

I'll assume that first "local" was a typo. Edited

igorzg · Accepted Answer · 2014-08-22 10:25:26Z

0

One thing you should know: Javascript is fully object oriented language there is no OOP "way" in javascript. Everything execpt primitive types ( undefined, number, string, boolean, null ) is an object.

answered Aug 22, 2014 at 10:25

igorzg

1,50614 silver badges17 bronze badges

Collectives™ on Stack Overflow

JavaScript OOP. Trying to study OOP in JavaScript

4 Answers 4

Comments

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related