数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学JavaScript 类中的 Getter 和 Setter？
本文将讨论 JavaScript 类中的 getter 和 setter，并附带相应的 JavaScript 示例。
在 JavaScript 中，getter 和 setter 是用于获取或设置属性值的函数。使用 getter 和 setter 可以确保更高的数据质量。Getter 和 Setter 为对象的属性和方法提供了简化的语法。Getter 和 Setter 用于数据封装。要在类中添加 getter 和 setter，请使用 get 和 set 关键字。
为了更好地理解，让我们看看 JavaScript 中 getter 和 setter 方法的语法和用法。
使用 Getter 方法
Getter 是一个用于检索属性值的函数。Getter 方法的语法如下：
get methodName(){…}
此方法的返回类型可以是任何原始数据类型。
示例 1
这是一个定义 JavaScript 中 getter 方法用法的示例程序。
<html>
<head>
<title>Getters in JavaScript</title>
</head>
<body style="text-align: center;">
<p>Getters in JavaScript</p>
<p id="result"></p>
<script>
const student = {
student1 : ['Ram', 'Computer Science', 022],
get details() {
return this.student1[0]+' has registered for the course '+this.student1[1]+' with the roll no. '+this.student1[this.student1.length-1];
}
}
document.getElementById("result").innerHTML = student.details;
</script>
</body>
</html>
执行以上代码后，将生成以下输出。
示例 2
这是一个定义 getter 方法用法和删除特定 getter 方法的示例程序。
<html>
<head>
<title>Getters in JavaScript</title>
</head>
<body style="text-align: center;">
<p>Getters in JavaScript</p>
<p id="result"></p>
<p id="result2"></p>
<script>
class Maths {
static get PIvalue() {
return 3.14;
}
}
Maths.PIvalue = 3.14159265; // Cannot update static method values
document.getElementById("result").innerHTML = Maths.PIvalue;
delete Maths.PIvalue; // Deleting a getter method object.
document.getElementById("result2").innerHTML = Maths.PIvalue;
</script>
</body>
</html>
执行以上代码后，将生成以下输出。
使用 Setter 方法
Setter 是一个用于设置属性值的函数。表示 setter 方法的语法如下：
set MethodName(value){…}
参数 `value` 可以是任何原始数据类型。
示例 1
这是一个定义 JavaScript 中 setter 方法用法的示例程序。
<html>
<head>
<title>Setters in JavaScript</title>
</head>
<body style="text-align: center;">
<p>Setters in JavaScript</p>
<p id="text1"></p>
<script type="text/javascript">
var Employee = {
Name: "Rahul",
desg : 'Software Engineer',
Company : "Google",
set setName(Name) {
this.Name = Name;
},
set setDesignation(desg) {
this.Designation = desg;
},
get getname() {
return this.Name;
},
get getDesignation() {
return this.desg;
}
};
Employee.setName = 'Mohan';
Employee.setDesignation = 'Web Developer';
document.getElementById("text1").innerHTML ='The Employee details are as follows : ' + '<br/>' +'Employee Name : ' + Employee.getname + '<br/>' + 'Designation : ' + Employee.getDesignation; + '<br/>';
</script>
</body>
</html>
执行以上代码后，将生成以下输出。
示例 2
这是一个关于 setter 方法的用法以及如何删除特定 setter 方法的示例程序。
<html>
<head>
<title>Setters in JavaScript</title>
</head>
<body style="text-align: center;">
<p>Setters in JavaScript</p>
<p>Deleting a setter method</p>
<p id="text1"></p>
<script type="text/javascript">
var Employee = {
set setName(Name) {
this.Name = Name;
},
set setDesignation(desg) {
this.Designation = desg;
},
get getname() {
return this.Name;
},
get getDesignation() {
return this.desg;
}
};
Employee.setName = 'Mohan';
Employee.setDesignation = 'Web Developer';
delete Employee.setDesignation; //Deleting a setter method.
document.getElementById("text1").innerHTML ='The Employee details are as follows : ' + '<br/>' +'Employee Name : ' + Employee.getname + '<br/>' + 'Designation : ' + Employee.getDesignation; + '<br/>';
</script>
</body>
</html>
执行以上代码后，将生成以下输出。
更新于：2022-12-09
6000+ 次浏览
广告