# getter/setter

[JS](/web/js.md) ⟩ [class](/web/js/val/class.md) ⟩ [definition](/web/js/val/class/member.md) ⟩ getters/setters

{% tabs %}
{% tab title="💾 程式" %}

* [replit](https://replit.com/@pegasusroe/JS-class-getters-and-setters#index.js)

```javascript
class User {

    constructor(name) {
        this.name = name;        // ⭐ invokes "setter"❗
    }

    // ⭐ getter: access `this.name`
    get name() {
        return this._name;
    }

    // ⭐ setter: set `this.name` (this.name = ...)
    set name(value) {
        
        // guard length >= 4
        if (value.length < 4) {
            log("name too short."); return;
        }
        
        this._name = value;    // private property
    }
    
}

// test code
let user = new User('Mary');

// ⭐ invokes "setter": 
user.name = 'Joe';             // "name too short."

// ⭐ invokes "getter": 
log(user.name);                // "Mary"
```

{% endtab %}

{% tab title="🧨 雷區" %}
{% hint style="danger" %}
⭐️ 注意：getter 不能這樣寫❗️
{% endhint %}

```javascript
// ⛔ SyntaxError: Unexpected token 'function'
//                                 vvvvvvvv
Array.prototype.maxRowLength = get function(){
    return Math.max(...this.map(row => row.length))
}
```

{% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="warning" %}
**differences** between **getter** and [Object.defineProperty()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty) :

* the <mark style="color:purple;">**getter**</mark> is defined on the instance's <mark style="color:red;">**prototype**</mark>,&#x20;
* with [`Object.defineProperty()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty) the **property** is defined on the <mark style="color:red;">**instance**</mark>.
  {% endhint %}
  {% endtab %}

{% tab title="📗 參考" %}

* [ ] JS.info ⟩ class ⟩ [getters & setters](https://javascript.info/class#getters-setters)
  {% endtab %}

{% tab title="📘 手冊" %}

* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) ⟩ [getter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get)/[setter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set)
* Object.[defineProperty](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty)()
* Object.[defineProperties](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties)()
  {% endtab %}

{% tab title="👥 相關" %}

* [fav](/web/master/fav.md)
* object [getter/setter](/web/js/val/obj/prop/getter-setter.md)
* [getter/setter for attributes](/web/component/custom-element/getter-setter.md) of [custom element](/web/component/custom-element.md).
* [arr.last](/web/js/val/builtin/arr/ext/arr.last.md)
* behaves like [class field](/web/js/val/class/member/field.md) (instance property).
* [Google Apps Script](/web/appendix/gas.md) 目前不支援 [class field](/web/js/val/class/member/field.md)，但可用 ([static](/web/js/val/class/member/static.md)/instance) [getter/setter](/web/js/val/class/member/getter-setter.md) 代替。
* [\[\[Get\]\]/\[\[Set\]\]](/web/js/val/obj/prop/internal.md) is used internally in [mixin](/web/js/val/obj/extend/mixin.md) by [Object.assign()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign).
  {% endtab %}
  {% endtabs %}

## Archive

{% tabs %}
{% tab title="💾 程式" %}

* replit ⟩ [getter & setter](https://replit.com/@pegasusroe/getter-and-setter#index.js)

```javascript
const {log} = console;

/* -------------- new object -------------- */

const expr = 'foo';

const obj = {

  // obj.log             ↱ ⭐️ 注意：有 ","
  log: ['example','test'],

  // ⭐️ getter (obj.latest)
  get latest() {
    return this.log[this.log.length - 1];
  },

  // ⭐️ getter (obj.foo)
  get [expr]() { return 'bar' }        // ⭐️ computed property name

};

/* -------------- existing object -------------- */

const o = {a: 0};

// ⭐️ o.b                  ↱ ⭐️ property name
Object.defineProperty(o, 'b', { 
    get: function() { return this.a + 1 } 
});

// ⭐️ p.name (= name)
//    ↱ ⭐️ (same) object passed in ↰
const p = Object.defineProperties({ }, {
//  ↱ ⭐️ property name
  name: {   //                                    ↱ ⭐️ 注意：有 ","
    set(name) { this._name = name.toLowerCase(); },
    get()     { return this._name; }
  },
});

p.name = 'MoLLy BroWn';      // ⭐️ setter				

/* -------------- class definition -------------- */

class MyArray extends Array {

  // ⭐️ instance getters         ↱ ⭐️ 注意：沒有 ","
  get first() { return this[0] }                // arr.first
  get last() { return this[this.length - 1] }   // arr.last

  // ⭐️ static getter
  static get foo() { return 'foo' }             // ⭐️ MyArray.foo
}

/* -------------- log -------------- */
const arr = new MyArray('a', 'b', 'c', 'd');

[
    obj.latest,             // 'test'
    obj.foo,                // 'bar'

    o.b,                    // 1
    p.name,                 // "molly brown"

    arr.last,               // "d"
    arr.push('e'),          // 5 (⭐️ new length)
    arr.last,               // "e"
    MyArray.foo,            // 'foo'

].forEach(x => log(x));
```

{% endtab %}

{% tab title="First Tab" %}

{% endtab %}

{% tab title="Second Tab" %}

{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://lochiwei.gitbook.io/web/js/val/class/member/getter-setter.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.