0

我的目标是在 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());

那么您对我如何在保持红色值保持在范围内的同时保留复合赋值运算符有任何想法吗？

4

1 回答 1

0

您可以使用getter 和 setter作为实现此目的的一种方法。

// 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 示例

于 2013-10-04T12:29:31.747 回答