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 ...
随机推荐
- spring mvc(2):请求地址映射(@RequestMapping)
@RequestMapping 参数说明 value定义处理方法的请求的 URL 地址.method定义处理方法的 http method 类型,如 GET.POST 等.params定义请求的 UR ...
- PHP正则表达式 /i, /is, /s, /isU等
PHP正则表达式 /i, /is, /s, /isU等 都是些什么东西呢? i 匹配大小写 s 模式中的圆点元字符(.)匹配所有的字符,包括换行符 x 模式中的空白字符除了被转义的或在字符类中的以外完 ...
- Sql Server 2008卸载后再次安装一直报错
sql server 2008卸载之后再次安装一直报错问题. 第一:由于上一次的卸载不干净,可参照百度完全卸载sql server2008 的方式 1. 用WindowsInstaller删除所有与S ...
- 解决织梦channel标签 指定typeid或设置son时 currentstyle无效的修复办法
{dede:channel type='son' row='8' currentstyle="<li><ahref='~typelink~' class='thisclas ...
- fuse入门
参考1 http://www.cs.nmsu.edu/~pfeiffer/fuse-tutorial/html/running.html 参考2 http://www.maastaar.net/fus ...
- 框架介绍thinkphp
ThinkPHP是一个免费开源的,快速.简单的面向对象的 轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的.ThinkPH ...
- codingNet项目的创建
首先,在codingNet上面创建一个项目(一般情况下) 然后,在本地打开项目并添加到储存库 其次,提交代码到已经创建好的项目中(注意赋值远程存储库的路径)
- Ado.net中简单的DBHelper类(增删改查)
private static string connString = "server=.;database=hotel;uid=aa;pwd=123";//最好从配置文件中取出 p ...
- c++ 课堂作业(1)
一.题目 Create a program that asks for the radius of a circle and prints the area of that circle, using ...
- Spring 常用的一些工具类
学习Java的人,或者开发很多项目,都需要使用到Spring 这个框架,这个框架对于java程序员来说.学好spring 就不怕找不到工作.我们时常会写一些工具类,但是有些时候 我们不清楚,我们些的工 ...