您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

getter & setter

利用 getter/setter 可以操作对象的,在设置前或前做一些事情。

get语法将对象绑定到该时将被的。(MDN)

// 语法
var 对象 = {
  get () {
    // 做一些事情 balabala
    return;
  }
};

getter 在时被,同时返回 getter 的返回值。

const student = {
  : {
    english: ,
    chinese: ,
    math: ,
  },

  // 总分 通过计算得出
  get total() {
    var  = this.;

    return .english + .chinese + .math;
  }
};

console.log(student.total); // 115

访问 student.total,实际上时访问了 total 这个 gettergetter 本质上是个,所以可以像写一样写 getter,最后返回 getter 的返回值作为访问的值。

需要注意的是,没有特殊情况,不要在 getter 中访问自身。

var obj = {
  key: ,

  get key() {
    return this.key;
  },
}

这样会导致无限访问 key 这个 getter

当尝试设置时,set语法将对象绑定到要的。(MDN)

// 语法
var 对象 = {
  set () {
    // 做一些事情 balabala
    // this.某个 = 值;
  }
};

setter 在被赋值时,同时这个值会被作为参数传递给 setter。

const student = {
  : {
    english: ,
    chinese: ,
    math: ,
  },

  // 总分 通过计算得出
  get total() {
    var  = this.;

    return .english + .chinese + .math;
  },

  set english(value) {
    this..english = value;
  },

  set chinese(value) {
    this..chinese = value;
  },

  set math(value) {
    this..math = value;
  },
};

console.log(student);

student.math = ;
student.chinese = ;
student.english = ;

console.log(student);
console.log(student.total);

这里通过三个 setter 来设定对应的分数,这样就不用使用 student..学科 的方式赋值了,可以省略

getter 同理,使用 setter 时,setter 名和最终要设置值的不应同名,否则会无限设置这个值。

利用 defineProperty 也可以设置 setter/getter

var person = {
  _cash: ,
  _deposit: ,
};

Object.defineProperty(person, 'money', {
  get: function() {
    return this._cash + this._deposit;
  },
});
Object.defineProperty(person, 'cash', {
  set: function(val) {
    console.log('现金发生了改变');
    this._cash = val;
  },
});

person.cash = ;
console.log(person.money);

getter/setter 可以充当器的角色,在设置和访问的时候做一些额外的事情。

灵活使用 getter/setter 可以使开发变得更有效率,许多框架的核心机制就是灵活、巧妙的使用了 getter/setter

getter/setter 是 ES5 中的特性,所以要注意 IE8 并。


联系我
置顶