closures - Javascript object literal, how to solve context? - Stack Overflow

admin管理员组

文章数量:1389758

I would like to start organizing my code properly, so I want to use object literals. In the following case, I'm doing a pseudo class. I would like that init() could work as a constructor, but unfortunately, I'm not seeing how to set attributes based on object context.

    var car = {
    context : this,
    wheels : 0,
    color : '',
    speed : 0,
    init : (function(x){
        console.log(x);
        x.wheels = 4;
        x.color = 'red';
        x.speed = 120;
    })(context)
};

console.log(car.color);

I would like to start organizing my code properly, so I want to use object literals. In the following case, I'm doing a pseudo class. I would like that init() could work as a constructor, but unfortunately, I'm not seeing how to set attributes based on object context.

    var car = {
    context : this,
    wheels : 0,
    color : '',
    speed : 0,
    init : (function(x){
        console.log(x);
        x.wheels = 4;
        x.color = 'red';
        x.speed = 120;
    })(context)
};

console.log(car.color);

• javascript
• closures
• this

• What exactly you are trying to achieve? And how is it different from say: var car = new Car(); – c-smile Commented May 8, 2011 at 21:00
• An Object object doesn't have a this property, only Function objects do. And in a function, this is a keyword that belongs to the activation object (effectively a variable), it is not a public property. Finally, a function's this is set by the call, you can't set it statically (though you can sort of using ES5 and bind). – RobG Commented May 8, 2011 at 23:16

3 Answers 3

You can't immediately run a function like that whilst declaring an object literal. What you can do:

var car = {
init : function(wheels,color,speed){
    this.wheels = wheels || 0;
    this.color = color || '';
    this.speed = speed || 0;
    return this;
  }
}.init(4,'red',120);

alert(car.speed); //=>120

Which removes the need for:

context : this,
wheels : 0,
color : '',
speed : 0,

...and offers the possibility for:

var car = {
    init : function(wheels,color,speed){
      this.wheels = wheels || 0;
      this.color = color || '';
      this.speed = speed || 0;
      return this;
     }
    },
    redAndFast = car.init(4,'red',230),
    threeWheeler = car.init(3,'yellowstriped',110);

[edit] What was I thinking? If you want more instances of Car, you'll have to use a real constructor function instead of an object literal:

var Car = function(){
  return {
    init : function(wheels,color,speed){
            this.wheels = wheels || 0;
            this.color = color || '';
            this.speed = speed || 0;
            return this;
  }
 }
},
redAndFast = new Car().init(4,'red',230),
threeWheeler = new Car().init(3,'yellowstriped',110);

Which can be simplified to:

var Car = function(wheels,color,speed){
            this.wheels = wheels || 0;
            this.color = color || '';
            this.speed = speed || 0;
    },
    redAndFast = new Car(4,'red',230),
    threeWheeler = new Car(3,'yellowstriped',110);

Or if you wanted to cling on to some init like function:

var Car = (function(){
    function car(wheels,color,speed){
            this.wheels = wheels || 0;
            this.color = color || '';
            this.speed = speed || 0;
    }
    return {
        init: function(w,c,s){
            return new car(w,c,s);
        }
    };
 })(),
 redAndFast   = Car.init(4,'red',230),
 threeWheeler = Car.init(3,'yellowstriped',110);

But hey, what happened to my context? you may ask. Well, it turns out you didn't need it after all. Isn't javascript a beautiful and flexible language?

var Car = function() {
    this.wheels = 4;
    this.color = 'red';
    this.speed = 120;
}

var car = new Car();

It's best to use normal constructors for these kind of tasks.

Object literals work for singletons. If you want an instantiable object, you'll need to learn how js oop works and just use function objects.

本文标签： closuresJavascript object literalhow to solve contextStack Overflow