getter & setter

利用 getter/setter 可以 拦截 操作对象的 属性 ，在设置 属性 前或 获取 属性 前做一些事情。

1. getter

get语法将对象 属性 绑定到 查询 该 属性 时将被 调用 的 函数 。(MDN)

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

getter 在 获取 一个 属性 时被 调用 ，同时返回 getter 的返回值。

  const  student  =   { 
   score  :   { 
    english :   , 
    chi nes e :   , 
    math :   , 
   }  , 

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

     return   score  . english  +   score  . chi nes e  +   score  . math ; 
   } 
 }  ; 

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

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

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

  var  obj  =   { 
  key :   , 

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

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

2. setter

当尝试设置 属性 时，set语法将对象 属性 绑定到要 调用 的 函数 。(MDN)

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

setter 在 一个 属性 被赋值时 调用 ，同时这个值会被作为参数传递给 setter。

  const  student  =   { 
   score  :   { 
    english :   , 
    chi nes e :   , 
    math :   , 
   }  , 

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

     return   score  . english  +   score  . chi nes e  +   score  . math ; 
   }  , 

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

   set   chi nes e  ( value )   { 
     this  .  score  . chi nes e  =  value ; 
   }  , 

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

console .  log  ( student )  ; 

student . math  =   ; 
student . chi nes e  =   ; 
student . english  =   ; 

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

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

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

3. 使用 Object.defineProperty 设置 setter/getter

利用 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 )  ; 
 

4. 小结

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

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

getter/setter 是 ES5 中的特性，所以要注意 IE8 并 不支持 。

JavaScript 原型 ? ?debugger

查看更多关于getter & setter的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did92450