【javascript基础】之【__defineGetter__ 跟 __defineSetter__】
2012-04-24 15:34 sniper007 阅读(4318) 评论(1) 编辑 收藏 举报Getter是一种获取一个属性的值的方法,Setter是一种设置一个属性的值的方法。可以为任何预定义的核心对象或用户自定义对象定义getter和setter方法,从而为现有的对象添加新的属性。
有两种方法来定义Getter或Setter方法:
- 在对象初始化时定义
- 在对象定义后通过Object的__defineGetter__、__defineSetter__方法来追加定义
在使用对象初始化过程来定义Getter和Setter方法时唯一要做的事情就是在getter方法前面加上“get”,在setter方法前面加上“set”。
还有一点要注意的就是getter方法没有参数,setter方法必须有一个参数,也就是要设置的属性的新值。
例如:
1 o = { 2 value:9, 3 get b() {return this.value;}, 4 set setter(x) {this.value = x;} 5 }
例如我们给Date对象添加一个year属性:
1 Date.prototype.__defineGetter__('year', function() {return this.getFullYear();}); 2 Date.prototype.__defineSetter__('year', function(y) {this.setFullYear(y)}); 3 4 var now = new Date; 5 alert(now.year); 6 now.year = 2006; 7 alert(now);
至于采用哪种形式主要取决于个人的编程风格,采用第一种形式结构紧凑,更容易理解。但是假如你想在对象定义以后再添加Getter或Setter,或者这个对象的原型不是你写的或是内置对象,那么只好采用第二种方式了。
下面是一个为Mozilla浏览器添加innerText属性的实现:
1 HTMLElement.prototype.__defineGetter__ 2 ( 3 "innerText",function() 4 //define a getter method to get the value of innerText, 5 //so you can read it now! 6 { 7 var textRange = this.ownerDocument.createRange(); 8 //Using range to retrieve the content of the object 9 textRange.selectNodeContents(this); 10 //only get the content of the object node 11 return textRange.toString(); 12 // give innerText the value of the node content 13 } 14 );
demo1
{
document.__defineGetter__("readOnlyProp", function()
{
return "read only";
}
} catch(e)
{ alert( "getter not supported: " + e.message); }
// Displays "read only" in IE8 and "undefined"
// in earlier versions.
alert( document.readOnlyProp );
try
{
// The next line generates a script error in IE8
document.readOnlyProp = "value";
// In IE7, the next line displays "value"
alert(document.readOnlyProp);
} catch(e)
{ alert( "Sorry, this property cannot be changed." ); }
Getter是一种获取一个属性的值的方法,Setter是一种设置一个属性的值的方法。可以为任何预定义的核心对象或用户自定义对象定义 getter和setter方法,从而为现有的对象添加新的属性。 有两种方法来定义Getter或Setter方法: 在对象初始化时 定义 ,在对象定义后通过Object的__defineGetter__、__defineSetter__方法来追加定义
要注意的就是getter方法没有参数,setter方法必须有一个参数,也就是要设置的属性的新值。__defineGetter__和__defineSetter__是标准浏览器的方法的特有方法,可以利用来它自定义对象的方法。众所周知,IE 和FF中的JS很多区别:例如IE中的innerText方法和FF中的textContent方法对应,IE中的srcElement和FF中 target对象等。以及一些IE的专有特性:outerHTML,canHaveChildren等。
demo2
<input id="msgBtn" value="click me" type="button" />*/
HTMLElement.prototype.__defineGetter__("html", function(){
return this.innerHTML;
});
HTMLElement.prototype.__defineSetter__("html", function( m ){
this.innerHTML = m;
//return this;
});
window.onload = function(){
var m = document.querySelector("#msg");
var b = document.querySelector("#msgBtn");
b.onclick = function(){
m.html = 4444444444444444;
console.log(m.html);
};
};