javascript and this

function distance(r,t){
        this.rate = r,
        this.time = t,
        this.calculate = function() {return rate *开发者_如何学C time ;};
        return this;
}

var trip1 = distance(2,4);
var trip2 = distance(5,7);
var trip3 = distance(3,10);
document.write("<br>trip1: " + trip1.calculate());
document.write("<br>trip2: " + trip2.calculate());
document.write("<br>trip3: " + trip3.calculate()); 

ouput

trip1: 30
trip2: 30
trip3: 30

Shouldn't the output be

trip1: 8
trip2: 35
trip3: 30

Each new distance should be a NEW object. Also, inside calculate, you have to refer to the current instance by the "this" keywork

function distance(r,t){
        this.rate = r,
        this.time = t,
        this.calculate = function() {return this.rate * this.time ;};
        return this;
}

var trip1 = new distance(2,4);
var trip2 = new distance(5,7);
var trip3 = new distance(3,10);
document.write("<br>trip1: " + trip1.calculate());
document.write("<br>trip2: " + trip2.calculate());
document.write("<br>trip3: " + trip3.calculate()); 

EDIT The example above without NEW keyword:

function distance(r,t){
        if ( !(this instanceof distance) ) //checking if I'm using 'new' or not
            return new distance(r, t); 
        this.rate = r,
        this.time = t,
        this.calculate = function() {return this.rate * this.time ;};
        return this;
}

var trip1 = distance(2,4);
var trip2 = distance(5,7);
var trip3 = distance(3,10);
document.write("<br>trip1: " + trip1.calculate());
document.write("<br>trip2: " + trip2.calculate());
document.write("<br>trip3: " + trip3.calculate()); 

In your function distance() you're setting the rate and time property on the global window object, because you're not instantiating trip objects using the new operator. return this inside the function returns the window object, so essentially, you're overwriting the properties three times.

The correct solution is given by @steweb.

EDIT: Adding example without new keyword:

var createTripObject = function(rate, time) {
  var r = rate, t = time;
  return {
    calculate: function() { return r * t; }
  };
};

var trip1 = createTripObject(2, 4);
var trip2 = createTripObject(5, 7);
document.write('<br/>trip1: ' + trip1.calculate());
document.write('<br/>trip2: ' + trip2.calculate());

The method return a new object that can acccess local variables inside the object scope but are unavailable from outside the scope, essentially creating pseudo-private members.

The this object is the 'owner' of the current context. In your distance function the owner will be the global object, in other words the window object. Hence, when you call distance() multiple times, each invocation will overwrite the previous values of r, t and calculate in the window object.

To create each trip variable as a separate object, use the new keyword e.g.

var trip1 = new distance(2,4);

Quoted from the OP on Krof Drakula's answer:

"how to do the above without new the new keyword?"

Just access the parameters then. It will work.

function distance(rate, time) {
    return {
        calculate: function() { return rate * time; }
    };
}

If you need access to rate and time property, both get and set, you can define it as a part of the object.

function distance(rate, time) {
    return {
        rate: rate,
        time: time,
        calculate: function() { return this.rate * this.time; }
    };
}