Question

I have this Car function:

var Car = function(vendor, model, year) {
    return {
        vendor: vendor,
        model: model,
        year: year,
        name: (function() {
            return vendor + " " + model + " " + year;
        })()
    };
};
var foo = Car("Toyota","Corola",2007);
alert(foo.name);  //alerts "Toyota Corola 2007"

This works, but I want the name to be able to change according to the vendor, model, and year.

taxi.vendor = "Mitsubishi";
alert(taxi.vendor); //still alerts "Toyota Corola 2007"

How can I instead make it alert Mitsubishi Corola 2007 according to the change of the vendor property?

EDIT: And the catch — name must remain a property that does not need to be called as a function.

Answer 1

With recent versions of WebKit (Safari, Chrome) or Firefox, you can define getter and setter functions:

var o = {a: 7, get b() {return this.a + 1;}, set c(x) {this.a = x / 2}};
o.b // result is 8
o.a = 10
o.b // result is 11

Then you would do this:

var Car = function(vendor, model, year) {
    return {
        vendor: vendor,
        model: model,
        year: year,
        get name() { return this.vendor + " " + this.model + " " + this.year; }
    };
};

And get the result that you want.

I don’t know if IE or Opera support this or which versions. If you need to support anything other than recent Safari, Chrome, or Firefox browsers then you’re better off using a function to access the name instead of leaving it as a property:

var Car = function(vendor, model, year) {
    return {
        vendor: vendor,
        model: model,
        year: year,
        name: function() { return this.vendor + " " + this.model + " " + this.year; }
    };
};

And then:

var foo = Car("Toyota","Corola",2007);
alert(foo.name());  //alerts "Toyota Corola 2007"
foo.vendor = "Mitsubishi";
alert(foo.name());  //alerts "Mitsubishi Corola 2007"