資料結構
網路
關係資料庫管理系統 (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+ 次瀏覽
廣告