JavaScript Accessor实现说明

标签:新闻动态    日期:2018-03-20 10:28    录入:汇盛国际平台    浏览:

  

[JavaScript,Accessor]JavaScript Accessor实现说明

  第一种算是比较常见了,通过闭包Store Value从而实现accessor,适用于所有浏览器.

  
代码如下:

  
function Sandy(val){  
var value = val;  
this.getValue = function(){  
return value;  
};  
this.setValue = function(val){  
value = val;  
};  
}  
//usage  
var sandy = new Sandy("test");  
sandy.value  
// => undefined  
sandy.setValue("test2")  
sandy.getValue  
  
下面是JavaScript权威指南(中文第五版)中P152页使用闭包的一个例子.

  
代码如下:

  
function makeProperty(o, name, predicate) {  
var value; //This is property value;  
  
//The setter method simply returns the value  
o['get' + name] = function() { return value;};  
  
//The getter method stores the value or throws an exception if  
//the predicate rejects the value  
o['set' + name] = function(v) {  
if (predicate && !predicate(v) {  
throw 'set' + name + ': invalid value ' + v;  
} else {  
value = y;  
}  
}  
}  
  
//The following code demenstrates the makeProperty() method  
var o = {}; // Here is an empty object  
  
//Add property accessor methods getName and setName  
//Ensure that only string values are allowed  
makeProperty(o, 'Name', function(x) { return typeof x == 'string'; });  
  
o.setName('Frank');   //Set the property value;  
print(o.getName());   //Get the property value  
o.setName(0); //Try to set a value of the wrong type  
  
第二种方法是使用__defineSetter__与__defineGetter__来实现accessor,看下划线就知道它们并非标准,适用于Firefox 2.0+, Safari 3.0+, Google Chrome 1.0+ 和 Opera 9.5+ ,方法使用见MDN.

  
代码如下:

  
function Sandy(val){  
var value = val,  
_watch = function(newVal) {  
console.log('val is Changed to : ' + newVal);  
}  
  
this.__defineGetter__("value", function(){  
return value;  
});  
  
this.__defineSetter__("value", function(val){  
value = val;  
_watch(val);  
});  
}  
  
var sandy = new Sandy("test");  
sandy.value  
// => test  
sandy.value = "test2";  
// => 'val is Changed to : test2'  
sandy.value  
// => "test2"  
  
 除了__defineG/Setter__外, 你还可以使用'set'、'get'关键字在在原型对象上定义accessor,对于单个对象同样适用, 适用于Firefox 2.0+, Safari 3.0+, Google Chrome 1.0+ 和 Opera 9.5+.

  
代码如下:

  
function Sandy(val){  
this.value = val;  
}  
  
Sandy.prototype = {  
get value(){  
return this._value;  
},  
set value(val){  
this._value = val;  
}  
};  
  
//Or  
  
var sandy = {  
'_value' : 'sandy',  
get value() {  
  return this._value;  
},  
set value(val) {  
  this._value = val;  
}  
}  
  
最后一种方法,用到了Object的静态方法defineProperty,作用于单个对象,该方法应该属于ES5的范畴了,目前似乎只有Chrome 支持这种方法,其实Ie8也支持,但操作对象仅限于Dom节点(Dom node),见IEBlog,该方法的使用见MDN.

  
代码如下:

  
var sandy = {}, rValue;  
Object.defineProperty(sandy, 'value' ,  
{  
'set' : function(val) {  
rValue = val;  
},  
'get' : function() {  
return rValue;  
},  
'enumerable' : true,  
'configurable' : true  
}  
)  
//Ie8+  
Object.defineProperty(document.body, "description", {  
get : function () {  
return this.desc;  
},  
set : function (val) {  
this.desc = val;  
}  
});  
document.body.description = "Content container";  
// document.body.description will now return "Content container"  
  
‘enumerable','configuralbe' 属于ES5规范中的Property Attributes(属性特性),在这里就不做讨论了,有兴趣的Google或者直接去看ES5的文档. ^ ^

★★★小编:汇盛国际注册 整理文章,欢迎大家转载 ★★★
上一篇:jQuery判断当前点击的是第几个li的代码
下一篇:汇盛国际平台:关于IE浏览器以及Firefox下的javasc
相关文章阅读
点击右上角的分享按钮即可收藏汇盛国际平台注册 随时随地与好友一起分享精彩内容噢
最近更新
热门排行