理解JavaScript中Object的setter与getter

我们常常在定义对象的时候通常var o = {name:"jack"}像是这样去定义的,但偶尔,我们可以用的更高级一点,对对象中的赋值取值做个更高级的处理

var o = Object.defineProperty({},'a',{enumerable:false,configurable:true,set:(n)=>{this.value=n},get:()=>{return this.value}})

这样就可以把a属性当做是一个私密的,无法通过Object.keys,for...in 遍历了,当然还是可以通过delete去删除。若还想禁止删除,可以使用Object.seal将其封闭。

下面我们先讲讲setter

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

language.current = 'EN';
language.current = 'FA';

console.log(language.log);
// expected output: Array ["EN", "FA"]

语法:

{set prop(val) { . . . }} {set [expression](val) { . . . }}
//prop 属性名,赋值需要的参数val,在es2015之后属性名还可以是一种表达式
set方法必须携带一个参数,在定义对象的属性中,属性名是唯一的, { set x(v) { }, set x(v) { } } and { x: ..., set x(v) { } } 像这种方式是不予许的;命名规则跟js命名规则一致,set方法也是可以被delete的

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']

上面代码定义了一个current的属性,使用set方式对language对象中的current赋值,结果log数组就把current的值添加进去了,删除setter delete o.current;

可以通过defineproperty对现有的一个对象添加setter

var o = {a: 0};

Object.defineProperty(o, 'b', { set: function(x) { this.a = x / 2; } });

o.b = 10; // 运行setter 10 / 2  实际上a的结果是5
console.log(o.a) // 5
还可以使用属性
var expr = 'foo';
var obj = {
  baz: 'bar',
  set [expr](v) { this.baz = v; }//实际上 set foo(v){this.baz = v;}
};
console.log(obj.baz); // "bar"
obj.foo = 'baz';      // 将会运行setter
console.log(obj.baz); // "baz" 下面我们来说说getter 
{get prop() { ... } }

{get [expression]() { ... } }
语法与setter类似,只不过get不带任何参数,setter却是必须带一个参数
prop命名规则跟js命名一致,不能携带参数,在同一个对象中getter 属性名是唯一的{ get x() { }, get x() { } } 和 { x: ..., get x() { } })这种是不允许的
var obj = {
  log: ['example','test'],
  get latest() {
    if (this.log.length == 0) return undefined;
    return this.log[this.log.length - 1];
  }
}
console.log(obj.latest); // "test". 上面代码创建了一个属性latest,在执行完代码,通过obj.latest取值时,将会执行get函数,即会返回'test',同样可以使用delete删除getter delete obj.latest;
可以使用defineProperty随时添加getter var o = { a:0 }
Object.defineProperty(o, "b", { get: function () { return this.a + 1; } });
console.log(o.b) // Runs the getter, which yields a + 1 (which is 1) 与 setter类似,getter 属性名同样可以可以使用字面量 var expr = 'foo';
var obj = {
  get [expr]() { return 'bar'; }//等同于get foo(){return 'bar'}
};
console.log(obj.foo); // "bar"

这在以下情况下很有用:

  • 如果属性值的计算是昂贵的(占用大量RAM或CPU时间,产生工作线程,检索远程文件等)。
  • 如果现在不需要该值。它将在稍后使用,或在某些情况下它根本不使用。
  • 如果被使用,它将被访问几次,并且不需要重新计算该值将永远不会被改变,或者不应该被重新计算。

这意味着你不应该为你希望更改其值的属性使用懒 getter,因为 getter 不会重新计算该值。

get notifier() {
  delete this.notifier;
  return this.notifier = ...
}
PHP Warning: curl_exec() has been disabled for security reasons in /home/ftp/f/free49568/wwwroot/wp-content/themes/Variant/functions.php on line 490 百度已收录
分享