面向对象编程：我应该使用函数还是对象文字

Question

I know a little bit Java and I like this whole classes and OO programming style. Well Im reading about JavaScript and I see there is no "classical" OO Style like in Java and C++ , not even a simple constructor. The programmer has a lot of choice. Well I made this, what do you think about it. It is ok to code a constructor like that?

//constructor of Human
function Human(name, age, size, married) {
    this.n = name;
    this.a = age;
    this.s = size;
    this.m = married
    this.printInformation = function() {
        return "Name: " + this.n + ", Age: " + this.a + ", Size: " + this.s + ", Married: " + this.m;
    };
}

var human1 = new Human("Lenny Linux", 42, "142cm", false);
window.alert(human1.printInformation());

Its working, so I think it could be ok. But there is a problem: I have other options too. Like to use these "object literals" or what theyr called. I could do this:

var human1 = {
    name: "Lenny Linux",
    age: 42,
    size: "142cm",
    married: false,
    printInformation: function() {
        //...
    }
}

Well this one is faster is it? And after I got this written, there is an "object" of Human, the other one I have to initialize. But I like the other one more. Its easier for me to overlook my code. But the first example is NOT typical JavaScript-like right? So I have to forget everything about Java and use the special JavaScript style? Or can I keep my Java Code style? What do you think?

PS: One other question to the first example. It drives me crazy that I cannot force the programmer if hes initializing the constructor to use only boolean if hes at the "married" variable. But i really want to force him. The same for Age: sould be only Integer... Any ideas?

Thank You!

Answer 1

The two approaches you describe are actually totally equivalent (other then the syntax) and are mostly ok from a Javascript point of view. That said, you probably shouldn't choose what to do just based on what you are comfortable with now - in the long term you will need to get used to working with the language instead of against it. Moving on...

What if I want to force my fields to be a certain type, as in Java?

Javascript is dynamically typed so you will have a hard time trying trying to apply the same static typing paradigm. You could try doing runtime checks (with typeof) during object constructor but that usually isn't worth the trouble since checking would still be at runtime, not checking would likely cause a similar error anyway and typeof is very limited (its tricky to check if something is an array, its annoying to check for interfaces and lets not get started on the "alien" browser objects...)

In the end, don't get too stressed about the dynamic typing - you will get used to it soon enough.

If you said that the object literal approach and the constructor function approach returned the same result, whats the difference then?

First of all, while object literals are a very neat piece of syntax, there are some things that need to be split over multiple statements so you kinda need a function for them:

//Note: lowercase name since I won't be using 'new here...
//there is a good convention for only using capital names on 
// "real" constructors
function create_human(name, age){
    var obj = {};
    obj.name = name;
    obj.age = age;

    //this needs to be on a separate statement
    //since it involves the other fields
    obj.isAdult = (obj.age >= 21);

    return obj;
}

//not using 'new ...yet
var that_penguin = create_human("Lenny", 42);

Note that object literals can still be very useful here and it is very popular to use them to provide named and default parameters in cases that would normaly have large parameter lists:

function  create_human(args){
    var obj;
    obj.name = args.name;
    //...
}

var x  = create_human({
    name: 'Lenny',
    age: 42,
    //...
});

Remember: Up to this point, using a function to build the object vs an object literal is just a matter of style and organization and the best approach will generally depend on what particular case you are dealing with. In my expirience, object literals are very nice for creating singletons and configuration dictionaries while functions are very useful for enforcing invariants in complex objects of offering a shorthand for common ones.

So what is the deal with "real" constructor functions, new and this then?

A disadvantage of explicitly contructing objects by hand is that we miss some of the OO goodness we are used to. By giving each object a copy of its methods not only do we waste space (in a classical language those would be stored in the class) but we lose differential inheritance (since everything is static). The way Javascript deals with this is with Prototypes . All objects have a prototype and when looking for a property (or method) it is recursively searched for in the prototype in case it is not immediately found.

A common use case of prototypes is making so that a class of objects keep their instance variables by themselves but share the methods:

lenny:
    name: "Lenny"
    age: 42
    __proto__: Person.prototype

glenda:
    name: "Glenda"
    age: 19
    __proto__: Person.prototype

Person.prototype:
    printInformation: ...
    tons of methods: ...

This way we can access lenny.printInformation without even noticing that this method is being shared with Glenda.

To create an object with a prototype you can either use Object.create (on newer browsers, at least) or the old way with constructor functions and the new operator:

function Person(name, age){
    //The 'new operator provides an empty
    // 'this' object with a suitable prototype.
    // The constructor function just needs to fill in the 
    // instance variables.

    this.name = name;
    this.age = age;

    //note: no return statement!

    //and no methods as well
    //(unless they need to be closures but thats another thing)...
}

//Methods in Person.prototype, will be shared by all Person instances:
Person.prototype = {
    printInformation: function(){
        console.log('my age is', this.age);
    }
};

var lenny = new Person("Lenny", 42);

Summing up

Use constructor functions and the new operator if you want to use the prototypal features of the language.

Use normal functions or object literals otherwise.

Answer 2

You should read about prototypical inheritance from this book .

    //constructor of Human
    function Human(name, age, size, married) {
        this.n = name;
        this.a = age;
        this.s = size;
        this.m = married;
        this.printInformation = function() {
            return "Name: " + this.n + ", Age: " + this.a + ", Size: " + this.s +
                 ", Married: " + this.m;
        };
    }

    var human1 = new Human("Lenny Linux", 42, "142cm", false);
    window.alert(human1.printInformation());

So, printInformation is a good candidate to throw on the prototype of Human to create a shared method between instances of Human . When you defined Human , all of the references to this will be an object literal set to an empty object behind the scenes. Also, behind the scenes, a hidden _proto_ property is being assigned to the object that literally is an object reference to Human.prototype. Therefore, as long as you don't make Human.prototype a reference to a new object, then all instances of Human will have the same function pointer to Human.protoype . So, here's the standard example of what you want for efficiency.

    //constructor of Human
    function Human(name, age, size, married) {
        this.n = name;
        this.a = age;
        this.s = size;
        this.m = married;
    };
    Human.prototype.printInformation = function() {
        return "Name: " + this.n + ", Age: " + this.a + ", Size: " + this.s +
            ", Married: " + this.m;
    };
    var human1 = new Human("Lenny Linux", 42, "142cm", false);
    window.alert(human1.printInformation());

At runtime, the interpreter will try to find printInformation on the instance itself, and will not find it in this case. So, it will follow the _proto_ link. It finds it there, because Human.prototype.printInformation is a function.

The reason this is efficient is because all instances are pointing to the same object: Human.prototype ; whereas, when you say this.method = function() {} inside a constructor, each instance is getting a new function assigned to it.