务必搞懂的setter与getter

大体描述

setter用于在一个对象伪属性改变时添加验证。getter用于在使用到这个伪属性时执行定义好的方法。setter方法会在getter调用之前调用。

setter

setter概念

在 javascript中，如果试着改变一个属性的值，那么对应的setter将被执行。setter经常和getter连用以创建一个伪属性。不可能在具有真实值的属性上同时拥有一个setter器。

也就是说，setter的触发条件是对应属性值发生改变。

基本语法

{set prop(val) { … }}

{set [expression](val) { … }}

用法示例

setter一般用于对象值的初始化，，它必须有一个明确的参数。字面量对象中，不能为一个真实值的变量使用set，也不能为一个属性设置多个set.

具体用法demo如下：

var language = {
  set current(name) {
    this.log.push(name);
  },
  log: []
}

language.current = 'EN';
console.log(language.log); // ['EN']

language.current = 'FA';
console.log(language.log); // ['EN', 'FA']

setter常见出错情况

总结一下以上提到的在使用setter时常见的易出错坑点：
- 使用setter时传入多个参数或者没有传入参数报错（只能传入一个参数）。
- 在对一个确定的属性使用setter时会导致这个属性值丢失，demo如下

const counter = n => ({
    name:'steven',
    set name(val) {
        console.log(val);
        console.log(this.name);
    },
});

let c = counter(1000);
console.log(c.name);
//undefined

console.log(c.name='cursor');
//cursor
//undefined
//cursor

setter改变了伪属性的值

const counter = n => ({
    get count() {
        return n++
    },
    set count(m) {
        console.log(m);
        return this.count = 200;
    }
});

let c = counter(1);
console.log(c.count);
console.log(c.count = 20);

以上报错原因：无限调用setter方法。因为setter方法就是在数值改变时触发，setter调用当前伪属性相当于无限递归。

getter

描述

有时需要允许访问返回动态计算值的属性，或者你可能需要反映内部变量的状态，而不需要使用显式方法调用。在JavaScript中，可以使用 getter 来实现。虽然可以使用 getter 和 setter 来创建一个伪属性类型，但是不可能同时将一个 getter 绑定到一个属性并且该属性实际上具有一个值。

demo如下：
调用count这个伪属性时会将传入的参数自增。

扫描二维码关注公众号，回复： 3813193 查看本文章

const counter = n => ({
    get count() {
        return n++
    }
});

let c = counter(1);
console.log(c.count);   //1
console.log(c.count);   //2
console.log(c.count = 20);  //20

伪属性

使用 getter 和setter来创建一个伪属性类型。比如在以下代码中，c.count就是一个伪属性。

const counter = n => ({
    get count() {
        return n++;
    },
    set count(m) {
        if (m<=10) 
        return this.count = 200;
    }
});

let c = counter(1);
console.log(c.count);
console.log(c.count = 20);

伪属性的使用方法：
- c.count 调用伪属性的getter方法
- c.count = 20 调用伪属性的setter方法

delete

伪属性可以使用delete关键字删除，一旦使用伪属性的setter与getter都会被删除。

delete c.count;
console.log(c.count); //undefined

defineProperty

使用defineProperty可以为已经存在的对象添加setter或是getter。

以下demo是给对象c的count属性添加get方法。

Object.defineProperty(c, "count", { get:function () { return this.a + 1; } });

setter还是Set()

在之前代码中出现的setter和set请注意不要和Set()搞混，这完全就是两个不同的东西。

Set()是ES6新引入的一种类似数组的数据类型，这篇文章中提到的setter/set与Set()一点关系都没有，注意区分~