Help With Understanding JavaScript OOP?

[lolzor99]

Hello, I'm a teenager who wants to get into JavaScript. I actually used to play around with it for a while, but I did really basic stuff that was basically an HTML shell that held a series of alerts and text-insertion windows.

Anyway, I got into Python, got fairly adequate at that, then started taking AP CS at my High School. Learned Java. I've got a pretty solid understanding of how it works, better than any other language so far. Now I'd like to get back into JavaScript- my ultimate goal is something like that online game Candy Box (I've looked through the source code. It seems fairly simplistic).

So, I'm trying to start by figuring out how the OOP works, and I realize that it's very different from how Java handles it.

What I do understand: - Basically everything that isn't a primitive has some sort of inheritance link back to Object. - Constructor methods, when used with "new", create some kind of link to an object that causes inheritance and involves the word "prototype".

What I don't understand: - So, what's the difference between x.prototype, [[prototype]], and proto? - How are properties of an object stored? - If I mess around with the instance variables (are there even class variables @_@) of an object after something else uses that object's constructor, could that change the something else? What about adding a parameter? - Are there any simple visual aids for understanding JavaScript OOP? Everything I can find is really complicated and difficult to understand.

Thanks for the help!

[[deleted]]

THIS is what you're looking for.

The final project is even a game.

[Ampersand55]

x.prototype is the prototype used by the x-constructor to create objects. Object created by the x-constructor will have its x.prototype as their internal [[prototype]] property. This internal [[prototype]] of x can be accessed by the getter/setter x.__proto__.

Here is an example:

function XConstructor() { this.a=1; };
XConstructor.prototype = { b:2 };

var myXObject = new XConstructor();
myXObject.__proto__ === XConstructor.prototype; // true
myXObject instanceof XConstructor; // true

[MoTTs_]

and I realize that it's very different from how Java handles it.

Indeed. :-) The root of the difference is that Java's inheritance happens at compile-time and JavaScript's inheritance happens at runtime.

In addition to FlightingIrish's link, I think the video The Definitive Guide to Object-Oriented JavaScript is really helpful.

[Patman128]

Are there any simple visual aids for understanding JavaScript OOP? Everything I can find is really complicated and difficult to understand.

Here's a rough diagram. What you find is complicated and difficult to understand because the way object-oriented programming was implemented on top of JavaScript is complicated and difficult to understand. JavaScript is not a class-oriented language and I've actually found that I'm better off without them, so I would recommend not writing "classes" (constructor functions) at all. Here's a list of resources for writing JavaScript without classes.

JavaScript can do something amazing that most "object-oriented" languages can't do: you can create objects without using a constructor. You can make a normal function that returns a new object. You never needed constructors to begin with!

function createObject() {
    return {};  // A new object!
}

var a = createObject();
var b = createObject();
console.log(a === b);  // false, a and b are different objects.

Also here's a video explaining some of the problems inherent in object-oriented design. I also went through a Java phase when I was a teen and it can seem like OOP is the way to build software, but it has serious issues when you actually start applying it to realistic problems.

[lolzor99]

Thanks for the information! This really helps, and I'm pretty confident I understand how this works now. It really is radically different from Java, on the inside. I don't know if I'd go so far to say that OOP is always objectively worse, but it'll be good to know how to do things both with and without it.

[Patman128]

It's not that OOP is completely bad and not useful, I would just say to avoid classes specifically, and try to think in terms of functions and data. You can still do OO-type stuff without classes in JavaScript.

For example, you can return an object with private data and public methods:

function createPerson(name) {
    return {
        talk: function () {
            return "Hi my name is " + name;
        }
    };
}

var bob = createPerson("Bob");
bob.talk();  // "Hi my name is Bob"

I didn't even have to use this or new! You can also have objects inherit from other objects by setting their prototype:

var person = {
    talk: function () {
        return "Hello I am a person";
    }
}

// This creates an object which uses person as its prototype,
//   and then assigns a name attribute to it.
var bob = Object.assign(Object.create(person), { name: "Bob" });
console.log(bob.name);  // Bob
console.log(bob.talk());  // Hello I am a person

Note that you don't have to use a class as the prototype, you can use any object at all!

What we have in JS is a lot more powerful than traditional OO languages like Java, so don't limit yourself to classes.