JavaScript中getter setter的实现Word下载.docx
- 文档编号:7515762
- 上传时间:2023-05-08
- 格式:DOCX
- 页数:15
- 大小:64.69KB
JavaScript中getter setter的实现Word下载.docx
《JavaScript中getter setter的实现Word下载.docx》由会员分享,可在线阅读,更多相关《JavaScript中getter setter的实现Word下载.docx(15页珍藏版)》请在冰点文库上搜索。
s:
_NameSetter'
g:
_NameGetter'
wcbs:
[]
}
};
varST=function(){};
returnST;
})()
其中wcbs用来存储调用watch(name,callback)时所有的callback。
第一版实现代码如下:
varattributes={};
function_getNameAttrs(name){
returnattributes[name]||{};
function_setNameAttrs(name){
if(!
attributes[name]){
attributes[name]={
_'
+name+'
Setter'
Getter'
[]
function_setNameValue(name,value){
_setNameAttrs(name);
varattrs=_getNameAttrs(name);
varoldValue=_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){
varwcbs=attrs.wcbs;
for(vari=0,len=wcbs.length;
i<
len;
i++){
wcbs[i](name,oldValue,value);
function_getNameValue(name){
varoldValue=null;
//如果拥有_nameGetter方法则调用该方法,否则直接从对象中获取。
if(this[attrs.g]){
oldValue=this[attrs.g].call(this,name);
oldValue=this[name];
returnoldValue;
functionST(){};
ST.prototype.set=function(name,value){
//每次调用set方法时都将name存储到attributes中
if(typeofname==='
string'
){
_setNameValue.call(this,name,value);
}elseif(typeofname===object){
for(varpinname){
_setNameValue.call(this,p,name[p]);
returnthis;
ST.prototype.get=function(name){
){
return_getNameValue.call(this,name);
ST.prototype.watch=function(name,wcb){
varattrs=null;
attrs=_getNameAttrs(name);
attrs.wcbs.push(wcb);
return{
remove:
function(){
for(vari=0,len=attrs.wcbs.length;
if(attrs.wcbs[i]===wcb){
break;
attrs.wcbs.splice(i,1);
}elseif(typeofname==='
function'
for(varpinattributes){
attrs=attributes[p];
attrs.wcbs.splice(0,0,wcb);
//将所有的callback添加到wcbs数组中
function(){
varattrs=attributes[p];
测试工作:
console.log(Stateful);
varstateful=newStateful();
functionA(name){
this.name=name;
A.prototype=stateful;
A.prototype._NameSetter=function(n){
this.name=n;
A.prototype._NameGetter=function(){
returnthis.name;
functionB(name){
B.prototype=stateful;
B.prototype._NameSetter=function(n){
B.prototype._NameGetter=function(){
vara=newA();
varhandle=a.watch('
Name'
function(name,oldValue,newValue){
console.log(name+'
bechangedfrom'
+oldValue+'
to'
+newValue);
});
a.set('
'
AAA'
);
console.log(a.name);
varb=newB();
b.set('
BBB'
console.log(b.get('
));
handle.remove();
newAAA'
console.log(a.get('
),b.get('
))
输出:
functionST(){}
NamebechangedfromundefinedtoAAA
AAA
NamebechangedfromundefinedtoBBB
BBB
newAAABBB
可以看到将所有watch函数存放于wcbs数组中,所有子类重名的属性访问的都是同一个wcbs数组。
有什么方法可以既保证每个实例拥有自己的watch函数链又不发生污染?
可以考虑这种方法:
为每个实例添加一个_watchCallbacks属性,该属性是一个函数,将所有的watch函数链都存放到该函数上,主要代码如下:
ST.prototype.watch=function(name,wcb){
varcallbacks=this._watchCallbacks;
callbacks){
callbacks=this._watchCallbacks=function(n,ov,nv){
varexecute=function(cbs){
if(cbs&
cbs.length>
0){
for(vari=0,len=cbs.length;
cbs[i](n,ov,nv);
//在函数作用域链中可以访问到callbacks变量
execute(callbacks['
+n]);
*'
]);
//通配符
var_name='
'
+name;
){//如果name是函数,则所有属性改变时都会调用该函数
_name='
wcb=name;
callbacks[_name]=callbacks[_name]?
callbacks[_name]:
[];
callbacks[_name].push(wcb);
varidx=callbacks[_name].indexOf(wcb);
if(idx>
-1){
callbacks[_name].splice(idx,1);
经过改变后整体代码如下:
/*,
[]*/
if(name==='
_watchCallbacks'
return;
if(this._watchCallbacks){
this._watchCallbacks(name,oldValue,value);
functionST(obj){
for(varpinobj){
_setNameValue.call(this,p,obj[p]);
object'
测试:
a.watch(function(name,ov,nv){
console.log('
*'
+ov+'
+nv);
a.set({
foo:
FOO'
goo:
GOO'
goo'
AAA+'
functionST(obj){
*fooundefinedFOO
*gooundefinedGOO
GOO
NamebechangedfromAAAtoAAA+
*NameAAAAAA+
*NameAAA+newAAA
以上代码就是dojo/Stateful的原理。
【编辑推荐】
1.史上最详细的JavaScript事件使用指南
2.一个简单的JavaScript函数式编程教程
3.现代JavaScript开发者的工具箱
4.评测:
七款JavaScriptIDE迎接全面审查
5.JavaScript客户端检测技术详细解析
6.十个JavaScript中易犯的小错误,你中了几枪?
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JavaScript中getter setter的实现 JavaScript getter setter 实现