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
以上代码就是dojo/Stateful的原理。
Javascript自己动手实现getter/setter的更多相关文章
- Java程序猿JavaScript学习笔记(4——关闭/getter/setter)
计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...
- 懒加载(getter\setter理解)
为什么要用懒加载 1.首先看一下程序启动过程:(如图) 会有一个mian的设置,程序一启动会加载main.storyboard main.storyboard又会加载箭头所指的控制器 控制器一旦加载, ...
- iOS getter setter
getter setter 给成员变量起名字用的 setter方法 设置成员变量值 1. setter 方法一定是对象方法 不可能是类方法 2.一定没有返回值 3. 以set开头,并且set后面跟上需 ...
- Lombok(1.14.8) - @Getter, @Setter, @ToString, @EqualsAndHashCode & @Data
@Getter / @Setter @Getter 和 @Setter,分别实现了 Gette r和 Setter 方法. package com.huey.hello.bean; import ja ...
- lombok @Getter @Setter 使用注意事项
lombok是一个帮助简化代码的工具,通过注解的形式例如@Setter @Getter,可以替代代码中的getter和setter方法,虽然eclipse自带的setter.getter代码生成也不需 ...
- lombok(@Getter&@Setter)
Lombok是一个可以通过简单的注解形式来帮助我们简化消除一些必须有但显得很臃肿的Java代码的工具,通过使用对应的注解,可以在编译源码的时候生成对应的方法. 官方地址:https://project ...
- 自动生成getter setter
如何使用java黑魔法给一个entity生成getter,setter方法? 由于java是一门静态语言,要给一个类动态添加方法,看似是不可能的.但牛B的程序员会让任何事情发生.我只知道有两种方式可以 ...
- 为什么要使用getter/setter
变量私有化的好处 1. 在setter中可以加入合法性检查,比如设置颜色的函数中,对于RGB颜色要判断其值在0~255之间. 2. 更新与被设置变量相关的其它变量的值,比如在一个潜水艇模拟系统中,改变 ...
- 反射工具类.提供调用getter/setter方法, 访问私有变量, 调用私有方法, 获取泛型类型Class,被AOP过的真实类等工具函数.java
import org.apache.commons.lang3.StringUtils; import org.apache.commons.lang3.Validate; import org.ap ...
随机推荐
- 安装pillow错误的解决方案
错误信息: ValueError: jpeg is required unless explicitly disabled using --disable-jpeg, aborting ...
- 使用 hexdump dump 文件内容
名词解释 [dump] dump 是指把文件的内容,每个字节用2位十六进制数来表示的方式. 缘由 最近看矢泽久雄的<How Program Works>,了解到 dump “exe文件”( ...
- Xamarin For Android 遇到错误java.exe exited with code 1. (msb6006)
今天用Xamarin编译一个android工程遇到这样一个问题:java.exe exited with code 1. (msb6006),项目代码没有问题.于是各种谷歌 ,在http://foru ...
- cannot determine the location of the vs common tools folder
问题:打开"VS2010开发人员命令提示后",上面提示"cannot determine the location of the vs common tools fold ...
- 移动端前端笔记 — 遇到的常见JS与CSS问题及解决方法 ( 摘自zdwzdwzdw)
笔者接触移动前端快一年了,特将平时的一些笔记整理出来,希望能够给需要的人一些小小的帮助.同时也由于笔者的水平有限,虽说都是笔者遇到过使用过的,但文中可能也会出现一些问题或不严谨的地方,望各位指出,不胜 ...
- linux下配置nginx使用service nginx start 服务
解压出来后执行 mkdir /var/tmp/nginx/client/ -pv 接下来我们简单的为它提供一个服务脚本吧! # vim /etc/init.d/nginx 新建文件/etc/rc.d ...
- MVC模式下向qq邮箱发送邮件
将已经保存在数据库中的密码通过邮件发送到qq邮箱中.用的ssm框架,其中的config文件要先配置好. 用到的jar包有gson-2.2.1.jar,gson.jar,mail.jar,activat ...
- 让fetch也可以timeout
原生的HTML5 API fetch并不支持timeout属性,习惯了jQuery的ajax配置的同学,如果一时在fetch找不到配置timeout的地方,也许会很纠结.fetch 的配置 API 如 ...
- android 的闪屏效果
android的闪屏效果,就是我们刚开始启动应用的时候弹出的界面或者动画,过2秒之后自动的跳转到主界面. 其实,实现这个效果很简单,使用Handler对象的postDelayed方法就可以实现.在这个 ...
- javascript基础知识-数组
1.javascript创建数组时无需声明数组大小或者在数组大小变化时重新分配 2.javascript数组是无类型的 3.数组元素不一定要连续 4.针对稀疏数组,length比所有元素的索引都要大 ...