JS 13 - Getter & Setter

大家好！

理解完物件继承的方法，就要接续介绍今天的 Getter 和 Setter 了。
我们进入今天的主题吧！

存取行为

出现赋值和取值的行为，就是存取行为。

let a;
a; // undefined
a = 'Felix'; // 'Felix'
a; // 'Felix'

/* or */

window.a; // undefined
window.a = 'Felix'; // 'Felix'
window.a; // 'Felix'

可赋值的情况下，新的值会是赋予的值，这是完全没有争议的，就像上方的举例一样。

存取器

Getter 和 Setter 顾名思义就是有 Get 和 Set 的行为，因此称呼为「存取器」是最适合的了。
那麽存取器究竟如何使用呢？让我们来看看：

document.cookie; // ''
document.cookie = 'name=Felix; max-age=9'; // 'name=Felix; max-age=9'
document.cookie; // 'name=Felix'
document.cookie = 'name=Felix; max-age=0'; // 'name=Felix; max-age=0'
document.cookie; // ''

对 document.cookie 赋值後，读取的值会和赋予的值不同，这就是存取器的特色之一。
document.cookie 乍看之下就是物件属性，但是为什麽又和一般的物件属性不同呢？
原因是因为 document.cookie 被充当函式使用了。

定义存取器

定义存取器和定义属性只有稍微不同，就是要在存取器的名称前加上 get 或 set：

let clicking = {
    limit: 10,
    targets: [],
    get status() {
        return this.targets;
    },
    set status(t) {
        if (this.targets.length < this.limit) return this.targets.push(t);
        throw new Error('You have reached the maximum set limit.');
    }
};

上方的存取器有什麽用途呢？让我们来看看：

window.addEventListener('click', function (e) {
    clicking.status = e.target;
    console.log('Clicked!');
});

/* 点击网页第 10 次 */
// Log: Clicked!
clicking.status; // [...×10]

/* 点击网页第 11 次 */
// Uncaught Error: You have reached the maximum set limit.
clicking.status; // [...×10]