當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
039_JavaScript对象访问器
生活随笔
收集整理的這篇文章主要介紹了
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对象访问器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 038_JavaScript对象
- 下一篇： 083_JavaScript Cooki