JavaScript中对象属性的方法

Question

I have a constructor:

function Point(point, left, right) {
    this.p = point;
    this.l = left;
    this.r = right
}
var bezierPoint = new Point([0.0,0.0],[-50.43794, 0.0],[25.54714,4.78643])

Is there a proper way to make a method that I could use among all the properties and not with the object itself? For example if I want to output

console.log(bezierPoint.l) // -50.43794, 0.0
console.log(bezierPoint.l.round()) // -50, 0
console.log(bezierPoint.r.round()) // 26, 5

Or is this the wrong approach and I should make new methods for the types of data I'll be working with? Something like

Array.prototype.round = function() {
    return [Math.round(this[0]), Math.round(this[1])] //this code doesn't matter now
}
console.log(bezierPoint.l.round()) // -50, 0

Answer 1

You can use the parameters as inner variables and expose the methods as follows:

function Point(point, left, right) {

    function exposed(points) {
        return {
            value: function () {
                return points;
            },
            round: function () {
                return [Math.round(points[0]), Math.round(points[1])];
            }
        };
    }

    this.p = exposed(point);

    this.l = exposed(left);

    this.r = exposed(right);

}

Then you can use it like:

var bezierPoint = new Point([0.0, 0.0], [-50.43794, 0.0], [25.54714, 4.78643]);

document.write('value:' + bezierPoint.l.value() + '<br />'); // value:-50.43794,0

document.write('round:' + bezierPoint.l.round() + '<br />'); // round:-50,0

Answer 2

Yet another approach. A bit more code, but more prototypical and solid.

// Common point class

/**
 * Creates simple point class
 * Point can be passed as two separate coordinates or as an array (coordinates pair). In case of array, second argument is omitted.
 * @param {String|Number|Array} a
 * @param {String|Number|undefined} b
 * @returns {Point}
 */
var Point = function (a, b) {
    if (!!a && !!b) {
        this.a = parseFloat(a);
        this.b = parseFloat(b);
    } else if (a.constructor === Array ? a.length === 2 : false) {
        this.a = parseFloat(a[0]);
        this.b = parseFloat(a[1]);
    } else {
        throw 'Wrong data provided for `Point`';
    }
}

/**
 * @returns {Array} Rounded coordinates pair
 */
Point.prototype.round = function () {
    return [Math.round(this.a), Math.round(this.b)];
}

/**
 * @returns {Array} Raw coordinates pair (as they were passed to constructor)
 */
Point.prototype.value = function () {
    return [this.a, this.b];
}

// Bezier point class

/**
 * Creates a Bezier point instance
 * @param {Array|Point} point
 * @param {Array|Point} left
 * @param {Array|Point} right
 * @returns {BezierPoint}
 */
var BezierPoint = function (point, left, right) {
    this.p = point instanceof Point ? point : new Point(point);
    this.l = left instanceof Point ? left : new Point(left);
    this.r = right instanceof Point ? right : new Point(right);
}

// Operation

var bezierPoint = new BezierPoint([0.0,0.0], [-50.43794, 0.0], [25.54714,4.78643]);

Each point can be passed to BezierPoint as an array or already well-formed Point class.

---

UPD: As an extension for existing answer ability to define arbitrary number of points can be provided next way.

var ArbitraryNumberOfPoints = function (args) {
    this.points = args.length === 0 ? [] :
        args.map(function (arg) {
            return arg instanceof Point ? arg : new Point(arg);
        });
}

ArbitraryNumberOfPoints.prototype.round = function () {
    return this.points.map(function (pointInstance) {
        return pointInstance.round();
    });
}