JavaScript中getter/setter實作的範例程式碼分享
雖然ES5中為我們提供了Object.defineProperty方法來設定getter與setter，但此原生方法使用起來並不方便，我們何不自己來實作一個類，只要繼承該類別並遵循一定的規範就可以擁有媲美原生的getter與setter。
現在我們定義以下規格：
取值器跟設值器遵循格式：_xxxGetter/_xxxSetter，xxx代表需要被控制的屬性。例如，如果要控制foo屬性，則物件需要提供_fooGetter/_fooSetter方法來作為實際的取值器與控制器，這樣我們可以在帶程式碼中呼叫obj.get ('foo')和obj.set('foo', value)來進行取值與設值；否則呼叫get與set方法相當於程式碼：obj.foo和obj.foo = value;
#提供watch函數：obj.watch(attr, function(name, oldValue, newValue){});每次呼叫set方法時，都會觸發fucntion參數。 function中name代表被改變的屬性，oldValue是上一次該屬性的值，newValue代表該屬性的最新值。此方法傳回一個handle對象，擁有remove方法，呼叫remove將function參數從函數鏈中移除。
首先使用閉包模式，使用attributes變數作為私有屬性存放所有屬性的getter與setter：
var Stateful = (function(){
'use strict';
var attributes = {
Name: {
s: '_NameSetter',
g: '_NameGetter',
wcbs: []
}
};
var ST = function(){};
return ST;
})()其中wcbs用來存儲呼叫watch(name, callback)時所有的callback。
第一版實作程式碼如下：
var Stateful = (function(){
'use strict';
var attributes = {};
function _getNameAttrs(name){
return attributes[name] || {};
}
function _setNameAttrs(name) {
if (!attributes[name]) {
attributes[name] = {
s: '_' + name + 'Setter',
g: '_' + name + 'Getter',
wcbs: []
}
}
}
function _setNameValue(name, value){
_setNameAttrs(name);
var attrs = _getNameAttrs(name);
var oldValue = _getNameValue.call(this, name);
//如果对象拥有_nameSetter方法则调用该方法，否则直接在对象上赋值。
if (this[attrs.s]){
this[attrs.s].call(this, value);
} else {
this[name] = value;
}
if (attrs.wcbs && attrs.wcbs.length > 0){
var wcbs = attrs.wcbs;
for (var i = 0, len = wcbs.length; i < len; i++) {
wcbs[i](name, oldValue, value);
}
}
};
function _getNameValue(name) {
_setNameAttrs(name);
var attrs = _getNameAttrs(name);
var oldValue = null;
// 如果拥有_nameGetter方法则调用该方法，否则直接从对象中获取。
if (this[attrs.g]) {
oldValue = this[attrs.g].call(this, name);
} else {
oldValue = this[name];
}
return oldValue;
};
function ST(){};
ST.prototype.set = function(name, value){
//每次调用set方法时都将name存储到attributes中
if (typeof name === 'string'){
_setNameValue.call(this, name, value);
} else if (typeof name === object) {
for (var p in name) {
_setNameValue.call(this, p, name[p]);
}
}
return this;
};
ST.prototype.get = function(name) {
if (typeof name === 'string') {
return _getNameValue.call(this, name);
}
};
ST.prototype.watch = function(name, wcb) {
var attrs = null;
if (typeof name === 'string') {
_setNameAttrs(name);
attrs = _getNameAttrs(name);
attrs.wcbs.push(wcb);
return {
remove: function(){
for (var i = 0, len = attrs.wcbs.length; i < len; i++) {
if (attrs.wcbs[i] === wcb) {
break;
}
}
attrs.wcbs.splice(i, 1);
}
}
} else if (typeof name === 'function'){
for (var p in attributes) {
attrs = attributes[p];
attrs.wcbs.splice(0,0, wcb); //将所有的callback添加到wcbs数组中
}
return {
remove: function() {
for (var p in attributes) {
var attrs = attributes[p];
for (var i = 0, len = attrs.wcbs.length; i < len; i++) {
if (attrs.wcbs[i] === wcb) {
break;
}
}
attrs.wcbs.splice(i, 1);
}
}
}
}
};
return ST;
})()測試工作：
console.log(Stateful);
var stateful = new Stateful();
function A(name){
this.name = name;
};
A.prototype = stateful;
A.prototype._NameSetter = function(n) {
this.name = n;
};
A.prototype._NameGetter = function() {
return this.name;
}
function B(name) {
this.name = name;
};
B.prototype = stateful;
B.prototype._NameSetter = function(n) {
this.name = n;
};
B.prototype._NameGetter = function() {
return this.name;
};
var a = new A();
var handle = a.watch('Name', function(name, oldValue, newValue){
console.log(name + 'be changed from ' + oldValue + ' to ' + newValue);
});
a.set('Name', 'AAA');
console.log(a.name);
var b = new B();
b.set('Name', 'BBB');
console.log(b.get('Name'));
handle.remove();
a.set('Name', 'new AAA');
console.log(a.get('Name'), b.get('Name'))輸出：
function ST(){}
Namebe changed from undefined to AAA
AAA
Namebe changed from undefined to BBB
BBB
new AAA BBB可以看到將所有watch函數存放於wcbs數組中，所有子類別重名的屬性所存取的都是同一個wcbs數組。有什麼方法可以既確保每個實例擁有自己的watch函數鏈又不會發生污染？可以考慮這個方法：為每個實例添加一個_watchCallbacks屬性，該屬性是一個函數，將所有的watch函數鏈都存放到該函數上，主要程式碼如下：
ST.prototype.watch = function(name, wcb) {
var attrs = null;
var callbacks = this._watchCallbacks;
if (!callbacks) {
callbacks = this._watchCallbacks = function(n, ov, nv) {
var execute = function(cbs){
if (cbs && cbs.length > 0) {
for (var i = 0, len = cbs.length; i < len; i++) {
cbs[i](n, ov, nv);
}
}
}
//在函数作用域链中可以访问到callbacks变量
execute(callbacks['_' + n]);
execute(callbacks['*']);// 通配符
}
}
var _name = '';
if (typeof name === 'string') {
var _name = '_' + name;
} else if (typeof name === 'function') {//如果name是函数，则所有属性改变时都会调用该函数
_name = '*';
wcb = name;
}
callbacks[_name] = callbacks[_name] ? callbacks[_name] : [];
callbacks[_name].push(wcb);
return {
remove: function(){
var idx = callbacks[_name].indexOf(wcb);
if (idx > -1) {
callbacks[_name].splice(idx, 1);
}
}
};
};經過改變後整體程式碼如下：
var Stateful = (function(){
'use strict';
var attributes = {};
function _getNameAttrs(name){
return attributes[name] || {};
}
function _setNameAttrs(name) {
if (!attributes[name]) {
attributes[name] = {
s: '_' + name + 'Setter',
g: '_' + name + 'Getter'/*,
wcbs: []*/
}
}
}
function _setNameValue(name, value){
if (name === '_watchCallbacks') {
return;
}
_setNameAttrs(name);
var attrs = _getNameAttrs(name);
var oldValue = _getNameValue.call(this, name);
if (this[attrs.s]){
this[attrs.s].call(this, value);
} else {
this[name] = value;
}
if (this._watchCallbacks){
this._watchCallbacks(name, oldValue, value);
}
};
function _getNameValue(name) {
_setNameAttrs(name);
var attrs = _getNameAttrs(name);
var oldValue = null;
if (this[attrs.g]) {
oldValue = this[attrs.g].call(this, name);
} else {
oldValue = this[name];
}
return oldValue;
};
function ST(obj){
for (var p in obj) {
_setNameValue.call(this, p, obj[p]);
}
};
ST.prototype.set = function(name, value){
if (typeof name === 'string'){
_setNameValue.call(this, name, value);
} else if (typeof name === 'object') {
for (var p in name) {
_setNameValue.call(this, p, name[p]);
}
}
return this;
};
ST.prototype.get = function(name) {
if (typeof name === 'string') {
return _getNameValue.call(this, name);
}
};
ST.prototype.watch = function(name, wcb) {
var attrs = null;
var callbacks = this._watchCallbacks;
if (!callbacks) {
callbacks = this._watchCallbacks = function(n, ov, nv) {
var execute = function(cbs){
if (cbs && cbs.length > 0) {
for (var i = 0, len = cbs.length; i < len; i++) {
cbs[i](n, ov, nv);
}
}
}
//在函数作用域链中可以访问到callbacks变量
execute(callbacks['_' + n]);
execute(callbacks['*']);// 通配符
}
}
var _name = '';
if (typeof name === 'string') {
var _name = '_' + name;
} else if (typeof name === 'function') {//如果name是函数，则所有属性改变时都会调用该函数
_name = '*';
wcb = name;
}
callbacks[_name] = callbacks[_name] ? callbacks[_name] : [];
callbacks[_name].push(wcb);
return {
remove: function(){
var idx = callbacks[_name].indexOf(wcb);
if (idx > -1) {
callbacks[_name].splice(idx, 1);
}
}
};
};
return ST;
})()測試：
console.log(Stateful);
var stateful = new Stateful();
function A(name){
this.name = name;
};
A.prototype = stateful;
A.prototype._NameSetter = function(n) {
this.name = n;
};
A.prototype._NameGetter = function() {
return this.name;
}
function B(name) {
this.name = name;
};
B.prototype = stateful;
B.prototype._NameSetter = function(n) {
this.name = n;
};
B.prototype._NameGetter = function() {
return this.name;
};
var a = new A();
var handle = a.watch('Name', function(name, oldValue, newValue){
console.log(name + 'be changed from ' + oldValue + ' to ' + newValue);
});
a.set('Name', 'AAA');
console.log(a.name);
var b = new B();
b.set('Name', 'BBB');
console.log(b.get('Name'));
a.watch(function(name, ov, nv) {
console.log('* ' + name + ' ' + ov + ' ' + nv);
});
a.set({
foo: 'FOO',
goo: 'GOO'
});
console.log(a.get('goo'));
a.set('Name', 'AAA+');
handle.remove();
a.set('Name', 'new AAA');
console.log(a.get('Name'), b.get('Name'))輸出：
function ST(obj){
for (var p in obj) {
_setNameValue.call(this, p, obj[p]);
}
}
Namebe changed from undefined to AAA
AAA
BBB
* foo undefined FOO
* goo undefined GOO
GOO
Namebe changed from AAA to AAA+
* Name AAA AAA+
* Name AAA+ new AAA
new AAA BBB以上是JavaScript中getter/setter實作的範例程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
如何使用WebSocket和JavaScript實現線上語音辨識系統
Dec 17, 2023 pm 02:54 PM
如何使用WebSocket和JavaScript實現線上語音辨識系統引言：隨著科技的不斷發展，語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統，具備了低延遲、即時性和跨平台的特點，成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系
WebSocket與JavaScript：實現即時監控系統的關鍵技術
Dec 17, 2023 pm 05:30 PM
WebSocket與JavaScript：實現即時監控系統的關鍵技術引言：隨著互聯網技術的快速發展，即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用，並給出程式碼範例，詳細解釋其實作原理。一、WebSocket技
如何利用JavaScript和WebSocket實現即時線上點餐系統
Dec 17, 2023 pm 12:09 PM
如何利用JavaScript和WebSocket實現即時線上點餐系統介紹：隨著網路的普及和技術的進步，越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統，我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議，可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中，當使用者選擇菜餚並下訂單
如何使用WebSocket和JavaScript實現線上預約系統
Dec 17, 2023 am 09:39 AM
如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代，越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統，並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工
JavaScript與WebSocket：打造高效率的即時天氣預報系統
Dec 17, 2023 pm 05:13 PM
JavaScript和WebSocket：打造高效的即時天氣預報系統引言：如今，天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展，我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中，我們將學習如何使用JavaScript和WebSocket技術，來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We
javascript如何使用insertBefore
Nov 24, 2023 am 11:56 AM
用法：在JavaScript中，insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數：要插入的新節點和參考節點（即新節點將要插入的位置的節點）。
簡易JavaScript教學：取得HTTP狀態碼的方法
Jan 05, 2024 pm 06:08 PM
JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest
JavaScript與WebSocket：打造高效率的即時影像處理系統
Dec 17, 2023 am 08:41 AM
JavaScript是一種廣泛應用於Web開發的程式語言，而WebSocket則是一種用於即時通訊的網路協定。結合二者的強大功能，我們可以打造一個高效率的即時影像處理系統。本文將介紹如何利用JavaScript和WebSocket來實作這個系統，並提供具體的程式碼範例。首先，我們需要明確指出即時影像處理系統的需求和目標。假設我們有一個攝影機設備，可以擷取即時的影像數
