关于defineGetter 和defineSetter的说明_应用技巧

最新推荐文章于 2021-08-24 13:46:28 发布

转载最新推荐文章于 2021-08-24 13:46:28 发布 · 924 阅读

文章标签：

#getter #setter #mozilla #firefox #function #object

本文介绍了JavaScript中的Getter和Setter方法的使用方法，并演示了如何在Mozilla浏览器中利用这些方法为对象添加新属性。同时，文章还提供了一个示例，展示了如何在Firefox浏览器中实现与IE相同的innerText属性。

源:http://anbutu.javaeye.com/blog/post/194276
关键字: JavaScript Mozilla __defineGetter__ __defineSetter__

说明：__defineGetter__ 和__defineSetter__方法只有在Mozilla浏览器中有效

Getter是一种获取一个属性的值的方法，Setter是一种设置一个属性的值的方法。可以为任何预定义的核心对象或用户自定义对象定义getter和setter方法，从而为现有的对象添加新的属性。
有两种方法来定义Getter或Setter方法：
在对象初始化时定义
在对象定义后通过Object的__defineGetter__、__defineSetter__方法来追加定义
在使用对象初始化过程来定义Getter和Setter方法时唯一要做的事情就是在getter方法前面加上“get”，在setter方法前面加上“set”。
还有一点要注意的就是getter方法没有参数，setter方法必须有一个参数，也就是要设置的属性的新值。
例如：
[复制此代码]CODE:
var Obj= {
value:9,
get b() {return this.value;},
set setter(x) {this.value = x;}
}

alert(Obj.value);//输出值为9
Obj.value=20;
alert(Obj.value);//输入值为20

在对象定义后给对象添加getter或setter方法要通过两个特殊的方法__defineGetter__和__defineSetter__。这两个函数要求第一个是getter或setter的名称，以string给出，第二个参数是作为getter或setter的函数。
例如我们给Date对象添加一个year属性：
[复制此代码]CODE:
Date.prototype.__defineGetter__('currentyear', function() {return this.getFullYear();});
Date.prototype.__defineSetter__('currentyear', function(y) {this.setFullYear(y)});
var now = new Date;
alert(now.currentyear);
now.currentyear= 2006;
alert(now);

至于采用哪种形式主要取决于个人的编程风格，采用第一种形式结构紧凑，更容易理解。但是假如你想在对象定义以后再添加Getter或Setter，或者这个对象的原型不是你写的或是内置对象，那么只好采用第二种方式了。

在IE和Opera下，DOM对象支持innerText属性，可以很方便的去除HTML标签。
但在Firefox不支持该属性，下面我们来实现FireFox下的innerText属性。

下面代码在IE和FireFox中都能运行正常

<html>
<head>
<script type="text/javascript">
if(document.implementation && document.implementation.createDocument)
{

//document.implementation && document.implementation.createDocument是作为鉴别Mozilla浏览器

//HTMLElement换成Element也可以
HTMLElement.prototype.__defineGetter__
(
"innerText",function()
//define a getter method to get the value of innerText,
//so you can read it now!
{
var textRange = this.ownerDocument.createRange();
//Using range to retrieve the content of the object
textRange.selectNodeContents(this);
//only get the content of the object node
return textRange.toString();
// give innerText the value of the node content
}
)
}

function test(){
alert(document.getElementById("test").innerText);
}
window.onload=test;//IE,FF下都能输出结果
</script>
</head>
<body>
<div id="test">tttttttttttttt</div>
</body>
</html>