JS 中的 getter 和 setter

发表于 更新于 分类于 评论： 阅读次数：

本文是《Eloquent Javascript》 “The Secret Lift of Objects”这一章节的学习笔记，记录了Javascript中对象的getter/setter的用法。

类似于 Java，Javascript 中也提倡使用 getter/setter 而不是直接访问对象属性。但 getter/setter 带来的问题是你不得额外写大量的方法。

Javascript 提供了一种兼有属性和 getter/setter 优势的技巧。这个技巧可以给对象定义一个属性，从外部看来是一个正常的属性，但实际上是方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
var pile = {
    elements: ["eggshell", "orange peel", "worm"],
    get height() {
        return this.elements.length;
    },
    set height(value) {
        console.log("Ignoring attempt to set height to", value);
    }
};
console.log(pile.height);
// → 3
pile.height = 100;
// → Ignoring attempt to set height to 100

给属性添加get和set注解允许你定义相应的方法，这些方法会在访问属性时被调用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function TextCell(text) {
    this.text = text.split("\n");
}

Object.defineProperty(TextCell.prototype , "heightProp", {
    get: function() { return this.text.length; }
});

var cell = new TextCell("no\nway");
console.log(cell.heightProp);
// → 2
cell.heightProp = 100;
console.log(cell.heightProp);
// → 2

可以使用类似的方式定义set属性来指定 setter 方法。当仅有 getter 但没有 setter 时，向属性写入值会被忽略。