039_JavaScript对象访问器

1. JavaScript访问器(Getter和Setter)

1.1. Getter(get关键词)来获取属性的值。

// 创建对象
var person = {firstName: "Bill",lastName : "Gates",language : "en",get lang() {return this.language;}
};// 使用getter来显示来自对象的数据
document.getElementById("demo").innerHTML = person.lang;

1.2. Setter(set关键词)来设置属性的值。

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

2. JavaScript函数还是Getter?

2.1. 使用函数:

var person = {firstName: "Bill",lastName : "Gates",fullName : function() {return this.firstName + " " + this.lastName;}
};// 使用方法来显示来自对象的数据
document.getElementById("demo").innerHTML = person.fullName();

2.2. 使用Getter:

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

2.3. 以函数形式访问fullName: person.fullName()。

2.4. 以属性形式访问fullName: person.fullName。

2.5. 以属性形式访问提供了更简洁的语法。

3. 数据质量

3.1. 使用getter和setter时, JavaScript可以确保更好的数据质量。

3.2. 在本例中, 使用upperLang属性以大写形式返回language属性的值:

var person = {firstName: "Bill",lastName : "Gates",language : "en",get upperLang() { // 返回language属性的大写值return this.language.toUpperCase();}
};// 使用getter来显示来自对象的数据
document.getElementById("demo").innerHTML = person.upperLang;

3.3. 在本例中, 使用lang属性将大写值存储在language属性中:

var person = {firstName: "Bill",lastName : "Gates",language : "",// 以大写值设置language属性, 不管用户设置的lang值是否大写set upperLang(lang) {     this.language = lang.toUpperCase();}
};// 使用setter来设置对象属性
person.upperLang = "en";// 显示来自对象的数据
document.getElementById("demo").innerHTML = person.language;

4. 为什么使用Getter和Setter?

4.1. 它提供了更简洁的语法。

4.2. 它允许属性和方法的语法相同。

4.3. 它可以确保更好的数据质量。

4.4. 有利于后台工作。

5. 例子

5.1. 代码

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8" /><title>JavaScript对象访问器</title></head><body><script type="text/javascript">var obj = {counter : 0,set add(value) {this.counter += value;},get increment() {this.counter++;},get decrement() {this.counter--;},set subtract(value) {this.counter -= value;},get reset() {this.counter = 0;}};// 操作计数器document.write('obj.counter = ' + obj.counter + '<br />');obj.add = 5;document.write('obj.counter = ' + obj.counter + '<br />');obj.increment;document.write('obj.counter = ' + obj.counter + '<br />');obj.decrement;document.write('obj.counter = ' + obj.counter + '<br />');obj.subtract = 2;document.write('obj.counter = ' + obj.counter + '<br />');obj.reset;document.write('obj.counter = ' + obj.counter + '<br />');</script></body>
</html>

5.2. 效果图

039_JavaScript对象访问器相关推荐

深入理解对象的数据属性与访问器属性及属性间相互转换
ECMA-262 第 5 版在定义只有内部才用的特性(attribute)时,描述了属性(property)的各种特征.ECMAScript 中有两种属性:数据属性和访问器属性. 1. 数据属性数据 ...
面向对象——访问器、修改器、构造函数、对象的创建流程
在之前的代码讲解中,我们将一类事物封装成一个类,再去创建一个相应的对象去调用方法完成相应的操作这是非常方便的,但是在之前的代码我们发现,对象不仅仅能调用类中的方法,还可以访问到该类中的成员变量并进行赋 ...
封装一个新闻类News，包含新闻标题，新闻作者，新闻内容，新闻类型三个属性，提供必要的访问器和修改器方法重写toString方法，要求打印对象时输出格式为“标题；
封装一个新闻类News,包含新闻标题,新闻作者,新闻内容, 新闻类型三个属性,提供必要的访问器和修改器方法,重写toString方法, 要求打印对象时输出格式为"标题:类型:作者" ...
委托、事件、事件访问器
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace 委托与事 ...
24Visitor(访问器)模式
技术交流QQ群:1027579432,欢迎你的加入! 1.Visitor(访问器)模式动机在软件构建过程中,由于需求的改变,某些类层次结构中常常需要增加新的行为(方法).如果直接在基类中做这样的更改 ...
《js高级程序设计》6.1.1-6.1.3——数据属性、访问器属性
数据属性:该属性包含了一个数据值的位置,它包含了4个描述行为的特性: 1. [[Configurable]]:表示是否能通过delete删除属性从而重新定义属性,能否修改属性的特性,能否把属性修改为访 ...
Js中的数据属性和访问器属性
Js中的数据属性和访问器属性在javaScript中,对象的属性分为两种类型:数据属性和访问器属性. 一.数据属性 1.数据属性:它包含的是一个数据值的位置,在这可以对数据值进行读写. 2.数据属性 ...
设计模式的理解：访问器模式 Visitor
在访问者模式(Visitor Pattern)中,我们使用了一个访问者类,它改变了元素类的执行算法.通过这种方式,元素的执行算法可以随着访问者改变而改变.这种类型的设计模式属于行为型模式.根据模式,元 ...
JS-数据属性与访问器属性
数据属性与访问器属性 1.对象属性的作用主要是数据的存储 2.既然数据存在存储,则会有增删改查相关操作(增加属性,修改属性值,获取属性值,删除属性) 3.数据属性用于控制属性的增删改查特征 4.访问属 ...

039_JavaScript对象访问器

039_JavaScript对象访问器相关推荐

最新文章

热门文章