# <font class="h2">Getter與Setter</font>

###### tags: `javascript`

<style>
.h2 {
background: linear-gradient(135deg,#fff,#537479) ;
color: #537479;
display:block;
padding: 6px 5px;
border-radius: 4px;
}
.h3 {
background: linear-gradient(180deg,#fff 50%,#c9d5d4) ;
color: #537479;
display:block;
padding: 6px 5px;
border-bottom: 3px solid #537479;
}
.h4 {
color: #537479;
font-weight:bold;
font-size:1.1em;
}
</style>

可以針對寫入資料或是讀取資料的時候，去賦予它函式

| 語法 | 說明 |
| -------- | -------- |
| Getter | 「取值」時觸發，一定要retrun |
| Setter | 「設定值」時觸發，可以帶入參數 |

<br>

### <font class="h3">範例一:</font>

var obj = {};
(function() {
  var _name;
  Object.defineProperty(obj, "name", {
    get: function() {
      console.log("讀取_name");
      return _name;
    },
    set: function(value) {
      console.log("寫入_name");
      _name = value;
    }
  })
})();

console.log(obj.name); //讀取_name
console.log(obj.name = "Ｍark"); //寫入_name,Ｍark

<br><br><br><br>

### <font class="h3">範例二:</font>

let wallet = {
    total: 100
}

wallet.tatal = 300;

console.log(wallet.tolal)//300

<br><br><br>

### <font class="h4">➤使用Setter</font>

let wallet = {
    total: 100,
  return  set save(price){
        this.total = this.total + price/2;
    }
}

wallet.save = 300;

console.log(wallet.total)//250

<br><br><br>

### <font class="h4">➤使用Getter</font>

let wallet = {
    total: 100,
    set：save(price){
        this.total = this.total + price/2;
    },
    get：take(){
        return this.total / 2;
    }
}

wallet.save = 300;

console.log(wallet.take)//125

<br><br><br>

let wallet = {
    total: 100,
    set save(price){
        this.total = this.total + price/2;
    },
    get take(){
        return this.total / 2;
    }
}

wallet.save = 300;

console.log(wallet)

查看使用getter和setter方法得到的屬性，一開始顯示會是(...)

<br><br><br>

### <font class="h3">範例:使用defineProperty</font>

let wallet = {
    total:100
}

Object.defineProperty(wallet,'take',{
    set: function(price){
        this.total = this.total + price /2;
    },
    get: function(){
        return this.total /2
    }
})

wallet.take = 300;

console.log(wallet)

<br><br><br>

### <font class="h4">➤`getOwnPropertyDescriptor`查看屬性</font>

let wallet = {
    total:100
}

Object.defineProperty(wallet,'take',{
    set: function(price){
        this.total = this.total + price /2;
    },
    get: function(){
        return this.total /2
    }
})

wallet.take = 300;

console.log(Object.getOwnPropertyDescriptor(wallet,'take'))

==發現使用defineProperty得到的屬性特徵是不可被列舉與刪除的==
<br><br><br>

let wallet = {
    total:100
}

Object.defineProperty(wallet,'take',{
    configurable: true,
    enumerable: true,
    set: function(price){
        this.total = this.total + price /2;
    },
    get: function(){
        return this.total /2
    }
})

wallet.take = 300;

console.log(wallet)

<br><br><br>

### <font class="h3">陣列範例</font>

let a = [1,2,3];
Object.defineProperty(Array.prototype, 'latest',{
       get: function(){
    return this[this.length -1];
     }             
   })
   
 console.log(a.latest) //3

<br><br><br>

let a = [1,2,3];
Object.defineProperty(Array.prototype, 'latest',{
       get: function(){
    return this[this.length -1];
     }             
   })
   
console.log(a)