Question

我的目标是在Javascript中创建一个对象，我可以轻松地转到block.red = 128;或block.red += 5。在对象内使用this.red可以很容易地完成，但是我希望我的对象也能够做到这一点，确保红色值落在可接受的范围内（即不高于255而不低于0））。

我已经看了一下，我认为可能有用的一件事就是封装。那么问题是我不能使用复合赋值运算符。显然这不是世界末日，但我想知道是否有任何我没想过的解决方案。

function colours(r, g, b) {
    _r = r;
    _g = g;
    _b = b;

    this.red = red;

    function red(value) {
        if (value == undefined) {
            return _r;
        } else {
            if (value < 0) {
                _r = 0;
            } else if (value > 255) {
                _r = 255;
            } else {
                _r = value;
            }
        }
    }
}

// tests
colours(240, 120, 60);
alert(red());
red(120);
alert(red());
red(360);
alert(red());

// works up to here
red() -= 30;
alert(red());

那么您是否有任何关于如何保持复合赋值运算符同时仍然确保红色值保持在范围内的想法？

Answer 1

您可以使用getters and setters作为实现此目的的一种方式。

// our constructor function
function Color(r, g, b) {
    return {
        get red() {
            return r;
        },

        set red(value) {
            // let's make sure we get a number here
            if ( typeof value === 'number' && !isNaN(value) ) {
                // check the range
                if (value < 0) {
                    r = 0;
                } else if (value > 255) {
                    r = 255;
                } else {
                    r = value;
                }
            } else {
                // this gets set if they don't pass a number
                r = 255;
            }
        }
        // other color methods here
    };
}

// --------------------

var red = new Color(255, 0, 0);

alert(red.red); // 255

red.red -= 55;  // assignment within range, success

alert(red.red); // 200

red.red -= 999; // assignment out of range, failure

alert(red.red); // 0

red.red += 999; // assignment out of range, failure

alert(red.red); // 255

jsFiddle example

Javascript封装和复合赋值运算符

1 个答案: