了解来自Java和C ++背景的Javascript原型

Question

My programming background is largely in Java, C++, and C#. I've been getting into Javascript and web development recently and I have a basic grasp of using Javascript and JQuery to do things like manipulate DOM elements and whatever else I need on the front end.

What I can't seem to wrap my head around, however, is prototyping in JS. I've read several articles and answers about it, but it still doesn't quite make sense to me. I think the best way for me to properly understand it is with some sort of comparison between JS prototypes and C++/Java classes.

So my final question is: Coming from a Java/C++ background, what do I need to know to be able to effectively use prototypes in my code?

---

Side note: questions like this talk about the philosophical differences between the two. What I'm really hoping for is an explanation of how to program with prototypes geared towards someone who already understands how to use classes in C++.

Answer 1

Prototypes, and why they are awesome.

Before I start, Mozilla can write this guide better than me: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

Just like you I also have a background in traditional OO languages, my first programming language that I really learned was C++, and I thought it was the greatest. In many ways, C++ is a fantastic language, that's why the best JavaScript engine is coded in it.

The difference however, lies in how JavaScript works. C++ is strictly typed, and classes must contain the exact datatypes of what they contain:

class Rectangle {
    int width, height;
  public:
    void set_values (int,int);
    int area() {return width*height;}
};

Unlike C++, nearly everything in JavaScript is an Object and and be easily extended with dot notation

var derek = "Derek Howard";
derek.age = 16;

Since JavaScript is compiled on the fly, it is extremely flexible. Rather than a rigid skeleton of what an Object can be, we can just extend an existing object whenever we want.

In many situations however, we want to have a whole bunch of Objects that look the same , but have their own data (like a class in C++). This is where the prototype object comes into play.

How can I make a "class" in Javascript?

I will recreate the rectangle object above in JavaScript to demonstrate.

The first step is to create a Function that defines your class name. This should be capitalized to signify it is a "class"

The first function (the one that is capitalized) is your constructor. You should use it to pass essential inital values to your Object

function Rectangle(width, height) {
    this.width = width || 1;
    this.height = height || 1;
}

The || operator makes it so if the developer doesn't pass a value to the constructor it still has default values.

Then, to add functions to your "class" you will want to create functions on the prototype.

Rectangle.prototype.area = function () {
    return this.width * this.height;
}

You're done creating the class! Now to use your class.

To use the class is actually very similar to C++. You simply create an object and use the new keyword:

var bigRec = new Rectangle(42, 100);

Then you can call the functions you created on Rectangle.prototype directly on the new object:

alert(bigRec.area());

The Full Code (JSFiddle: http://jsfiddle.net/howderek/H65qs/ )

//new class
function Rectangle(width, height) {
    //class properties
    this.width = width || 1;
    this.height = height || 1;
}

//class functions
Rectangle.prototype.area = function () {
    return this.width * this.height;
}

//create a new Rectangle object
var bigRec = new Rectangle(42, 100);
//call functions created from the prototype
alert(bigRec.area());

Answer 2

I came from a similar background as you, and I'd done Javascript for years before I finally made sense of this. If your question is along the lines of "How do I write clean Javascript classes and avoid polluting my codebase with my misunderstandings of the way things work," here's how I did it:

What I did was actually study the Javascript that the language CoffeeScript to. CoffeeScript lets you write OO-code in a manner that resembles Class-based systems like Java, rather than Prototype-based systems like Javascript. And then it compiles down to (relatively) clean Javascript, so you can see how such code could be implemented directly.

If you look at the Coffeescript homepage, and then scroll down to the Classes, Inheritance, and Super section, you'll see a window that shows CoffeeScript classes and the resulting Javascript implementation (you can edit it live and play with it by clicking on the Load button down at the bottom). When I write Javascript classes natively, I generally mimic this style now. There are other ways...prototype-based systems are inherently more flexible...but this way seems safe and keeps my namespaces relatively clean (something that's inherently part of Java culture but not the default in the Javascript language).

The Coffeescript example on that page is a little busy because it implements a class heirarchy, something not natively supported by Javascript. If you delete all of the "inheritance" and "super" stuff in the Coffeescript pane, you'll see much cleaner Javascript results. Of course, then everything just inherits from "Object".