深入学习JavaScript对象访问器（Getter和Setter）-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

深入学习JavaScript对象访问器（Getter和Setter）

Nov 29, 2019 pm 02:39 PM

javascript

深入学习JavaScript对象访问器（Getter和Setter）

JavaScript访问器（Getter和Setter），ECMAScript 5（2009）介绍了Getter和Setters。 Getters和setter允许您定义对象访问器（Computed Properties）。

【相关课程推荐：JavaScript视频教程】

JavaScript Getter（get关键字）

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;meta charset=&quot;utf-8&quot;&gt;
&lt;title&gt;js&lt;/title&gt;
&lt;body&gt;

&lt;h2&gt;JavaScript Getters和Setters&lt;/h2&gt;

&lt;p&gt; Getters和setter允许您通过方法获取和设置属性。&lt;/p&gt;

&lt;p&gt;此示例使用lang属性获取语言属性的值。&lt;/p&gt;

&lt;p id=&quot;demo&quot;&gt;&lt;/p&gt;

&lt;script&gt;
    // 新建一个对象。
    var person = {
        firstName: &quot;John&quot;,
        lastName : &quot;Doe&quot;,
        language : &quot;en&quot;,
        get lang() {
            return this.language;
        }
    };
    // 使用getter显示来自对象的数据：
    document.getElementById(&quot;demo&quot;).innerHTML = person.lang;
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;

Salin selepas log masuk

JavaScript Setter (set关键字)

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;meta charset=&quot;utf-8&quot;&gt;
&lt;title&gt;JavaScript Getters和Setters&lt;/title&gt;
&lt;body&gt;

&lt;h2&gt; JavaScript Getters和Setters &lt;/h2&gt;

&lt;p&gt; Getters和setter允许您通过方法获取和设置属性。&lt;/p&gt;

&lt;p&gt;此示例使用lang属性设置语言属性的值。&lt;/p&gt;

&lt;p id=&quot;demo&quot;&gt;&lt;/p&gt;

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

&lt;/body&gt;
&lt;/html&gt;

Salin selepas log masuk

使用JavaScript函数还是Getter？

这两个例子之间有什么区别？

示例1：

var person = {
  firstName: &quot;John&quot;,
  lastName : &quot;Doe&quot;,
  fullName : function() {
    return this.firstName + &quot; &quot; + this.lastName;
  }
};
// 使用方法显示对象的数据：
document.getElementById(&quot;demo&quot;).innerHTML = person.fullName();

Salin selepas log masuk

示例2：

var person = {
  firstName: &quot;John&quot;,
  lastName : &quot;Doe&quot;,
  get fullName() {
    return this.firstName + &quot; &quot; + this.lastName;
  }
};
// 使用getter显示来自对象的数据：
document.getElementById(&quot;demo&quot;).innerHTML = person.fullName;

Salin selepas log masuk

示例1将fullName作为函数访问：person.fullName（）。示例2将fullName作为属性访问：person.fullName。第二个示例提供了更简单的语法。

数据质量

使用getter和setter时，JavaScript可以确保更好的数据质量。lang在此示例中，使用属性language以大写形式返回属性的值：

// 创建一个对象:
var person = {
  firstName: &quot;John&quot;,
  lastName : &quot;Doe&quot;,
  language : &quot;en&quot;,
  get lang() {
    return this.language.toUpperCase();
  }
};
// 使用getter显示来自对象的数据：
document.getElementById(&quot;demo&quot;).innerHTML = person.lang;

Salin selepas log masuk

lang在此示例中，使用该属性将大写值存储在language属性中：

var person = {
  firstName: &quot;John&quot;,
  lastName : &quot;Doe&quot;,
  language : &quot;&quot;,
  set lang(lang) {
    this.language = lang.toUpperCase();
  }
};
// 使用setter设置对象属性：
person.lang = &quot;en&quot;;
// 显示来自对象的数据：
document.getElementById(&quot;demo&quot;).innerHTML = person.language;

Salin selepas log masuk

为什么使用Getter和Setter？

　●　它提供了更简单的语法

　●　它允许属性和方法的语法相同

　●　它可以确保更好的数据质量

　●　在幕后做事情很有用

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;meta charset=&quot;utf-8&quot;&gt;
&lt;title&gt;js&lt;/title&gt;
&lt;body&gt;

&lt;h2&gt; JavaScript Getters和Setters &lt;/h2&gt;

&lt;p&gt;完美的创建反对象：&lt;/p&gt;

&lt;p id=&quot;demo&quot;&gt;&lt;/p&gt;

&lt;script&gt;
    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(&quot;demo&quot;).innerHTML = obj.counter;
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;

Salin selepas log masuk

Object.defineProperty()

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

// 定义对象
var obj = {counter : 0};
// 定义 setters
Object.defineProperty(obj, &quot;reset&quot;, {
  get : function () {this.counter = 0;}
});
Object.defineProperty(obj, &quot;increment&quot;, {
  get : function () {this.counter++;}
});
Object.defineProperty(obj, &quot;decrement&quot;, {
  get : function () {this.counter--;}
});
Object.defineProperty(obj, &quot;add&quot;, {
  set : function (value) {this.counter += value;}
});
Object.defineProperty(obj, &quot;subtract&quot;, {
  set : function (value) {this.counter -= value;}
});
// Play with the counter:
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;

Salin selepas log masuk

浏览器支持

Internet Explorer 8或更早版本不支持Getters和Setter：

Internet Explorer	Chrome	FireFox	Safari	Opera

9.0+	支持	支持	支持	支持

本文来自 js教程栏目，欢迎学习！

Atas ialah kandungan terperinci 深入学习JavaScript对象访问器（Getter和Setter）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn