為什么使用Getter和Setter？Getter和Setter有什么區(qū)別？

發(fā)布時(shí)間：2020-06-28 02:50:03 來源：網(wǎng)絡(luò) 閱讀：540 作者：web全棧欄目：web開發(fā)

JavaScript訪問器（Getter和Setter），ECMAScript 5（2009）介紹了Getter和Setters。 Getters和setter允許您定義對(duì)象訪問器（Computed Properties）。

JavaScript Getter（get關(guān)鍵字）

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>js</title>
<body>

<h3>JavaScript Getters和Setters</h3>

<p> Getters和setter允許您通過方法獲取和設(shè)置屬性。</p>

<p>此示例使用lang屬性獲取語言屬性的值。</p>

<p id="demo"></p>

<script>
    // 新建一個(gè)對(duì)象。
    var person = {
        firstName: "John",
        lastName : "Doe",
        language : "en",
        get lang() {
            return this.language;
        }
    };
    // 使用getter顯示來自對(duì)象的數(shù)據(jù)：
    document.getElementById("demo").innerHTML = person.lang;
</script>

</body>
</html>

JavaScript Setter (set關(guān)鍵字)

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>JavaScript Getters和Setters</title>
<body>

<h3> JavaScript Getters和Setters </h3>

<p> Getters和setter允許您通過方法獲取和設(shè)置屬性。</p>

<p>此示例使用lang屬性設(shè)置語言屬性的值。</p>

<p id="demo"></p>

<script>
    // Create an object:
    var person = {
        firstName: "John",
        lastName : "Doe",
        language : "NO",
        set lang(value) {
            this.language = value;
        }
    };
    // Set a property using set:
    person.lang = "en";
    // Display data from the object:
    document.getElementById("demo").innerHTML = person.language;
</script>

</body>
</html>

為什么使用Getter和Setter？

它提供了更簡(jiǎn)單的語法
它允許屬性和方法的語法相同
它可以確保更好的數(shù)據(jù)質(zhì)量
在幕后做事情很有用

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>js</title>
<body>

<h3> JavaScript Getters和Setters </h3>

<p>完美的創(chuàng)建反對(duì)象：</p>

<p id="demo"></p>

<script>
    var obj = {
        counter : 0,
        get reset() {
            this.counter = 0;
        },
        get increment() {
            this.counter++;
        },
        get decrement() {
            this.counter--;
        },
        set add(value) {
            this.counter += value;
        },
        set subtract(value) {
            this.counter -= value;
        }
    };
    // Play with the counter:
    obj.reset;
    obj.add = 5;
    obj.subtract = 1;
    obj.increment;
    obj.decrement;
    // Display the counter:
    document.getElementById("demo").innerHTML = obj.counter;
</script>

</body>
</html>

Object.defineProperty()方法還可用于添加Getters和Setter

向AI問一下細(xì)節(jié)

為什么使用Getter和Setter？Getter和Setter有什么區(qū)別？

JavaScript Getter（get關(guān)鍵字）

JavaScript Setter (set關(guān)鍵字)

為什么使用Getter和Setter？

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

為什么使用Getter和Setter？Getter和Setter有什么區(qū)別？

為什么使用Getter和Setter？