How do I properly code a javascript property and method using the 'prototype' function?

问题

I am trying to learn how to create and use javascript properties and methods using javascript prototypes and am having a bit of difficulty.

In the following code I am trying to create a simple object called 'radius' that has a radius of 4 and has a method called 'getCircumference' which produces the circumference using the object radius' value.

function radius()
{
    this = 4;
}

function getCircumference()
{
    var pi = 3.141592;
    var circumference = this.value * 2 * pi;
    document.write(circumference);
}

radius.prototype.circumference = getCircumference;
radius.circumference();

If someone can show me how to make this code work, and better yet, how to make this code allow the input of any radius and return the circumference each time the new method is called upon. thanks!

回答1:

There are a couple of problems with your code, both technically and conceptually.

On the technical side, you can't assign to this. Change that line to this.value = 4 and combine it with pst's suggestion (change the last line to (new radius()).curcumference()) and I believe your code will work as-is.

Conceptually, it's probably more useful to think of a circle as an object and as having a radius rather than thinking of the radius itself as an object. Try this:

// traditionally, class name are TitleCased
function Circle(radius) {
    this.radius = radius;
}

Circle.prototype = {
    circumference: function() {
        return this.radius * 2 * Math.PI;
    }
};

var circle = new Circle(4);
document.write(circle.circumference());

回答2:

Try: (new radius).circumference() -- the object in the ".prototype" property on the "parent" function is put into the "[[prototype]]" chain (keyword hint :-) for objects derived from it via new.

If your constructor took an argument, then you could this perhaps: new radius(42).circumference().

See http://jibbering.com/faq/notes/closures/ for details.

回答3:

Lets first understand some of the prototype basics:

Function objects inherit from Function.prototype. Modifications to the Function.prototype object are propagated to all Function instances.

If you're used to an object-oriented programming language, you can think of prototype as a combination class definition/static variable set. Of course, whatever analogy you choose will fall short, as it's not equivalent to either.

When you define any function in JavaScript, you have the potential to create an instance of the function (similar to an object in OOP).

Consider the following example:

function example(some, params)
{
  var foo = some;
  this.bar = params;
  //more code...
}

If it was called in the context of the window:

window.example('fizz', 'buzz');

you'd know that foo was a temporary variable storing the value of 'fizz' for the duration of the function call, and that window.bar would be set to the value of 'buzz'.

However, if it were used to instantiate a new object

var temp = new example('fizz', 'buzz');

you'd know that foo was still a temporary variable storing the value of 'fizz' for the duration of the function call, and now temp.bar would be set to the value of 'buzz'.

---

If we were to define a new property on the prototype:

example.prototype.baz = 'w00t';

Every instance of the example function will now have a property baz with a value of 'w00t'.

You can define functions as properties of prototype to provide your "Class" methods:

example.prototype.doSomething = function(){ /* do something code */... };

And all instances of example will have the doSomething function defined for them.

---

What happens when you want to override a prototype value?

If you override a property on the prototype all instances will be updated:

example.prototype.baz = 'new w00t';

However, if you override a property on the instance, only that instance will be updated:

temp.baz = 'not w00t';

---

Your example:

You want a circle object that has a radius:

function circle(r)
{
  //probably should do some value checking stuff here
  this.radius = r;
}

Every circle object has a circumference:

circle.prototype.getCircumference()
{
  return Math.PI * 2 * this.radius;
}

Now if you instantiate a new circle, you can get the circumference:

var c = new circle(5);
console.log(c.getCircumference());

---

Quick Note:

defining a function on a prototype allows all instances to share a reference to the same function.

If you create a function for every instance:

function temp()
{
  this.func = function(){...};
}

You will likely have worse performance than allowing the instances to share the prototype function:

function temp(){}

temp.func = function(){...};

来源：https://stackoverflow.com/questions/4653472/how-do-i-properly-code-a-javascript-property-and-method-using-the-prototype-fu