039_JavaScript对象访问器

最新推荐文章于 2022-11-03 08:38:36 发布

自由与束缚JavaJavaScript

最新推荐文章于 2022-11-03 08:38:36 发布

阅读量139

点赞数

分类专栏： JavaScript学习文章标签： javascript web前端

本文链接：https://blog.csdn.net/aihiao/article/details/109569111

版权

JavaScript学习专栏收录该内容

105 篇文章 1 订阅

订阅专栏

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. 效果图

自由与束缚JavaJavaScript

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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").inner
复制链接

扫一扫

专栏目录