您的位置:首页 > Web前端 > JavaScript

Javascript Getter/Setter and prototype(extend dom)

2011-10-20 17:27 483 查看
I learn it while I'm investigating a bug of exchange2010 owa.

Now, IE9 doesn't support __defineGetter__ or __defineSetter__ , so owa need to be updated using defineProperty instead.

Seemed how to extend dom is to add properties/methods to proper, when you add a extended properties/methods, the sub object can derive it either.

One thing to be mentioned that is: when you extend the object, you add the properties/methods to *.prototype.New_Property_1, but when you call it, you just need to call *.New_Property_1.

Related link and my test html/script
https://developer.mozilla.org/en/JavaScript-DOM_Prototypes_in_Mozilla http://perfectionkills.com/whats-wrong-with-extending-the-dom/
<!doctype html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Getter_Settter</title>

<script type="text/javascript">

// test defineProperty
function test_defineProperty()
{

Object.defineProperty(document,"b",{
get: function(){return "defineProperty"}

});

alert(document.b);

};

// test __defineGetter__
function test__defineGetter__()
{

document.__defineGetter__("c",function()
{
return "__defineGetter__"
});

alert(document.c)

}

// test prototype
function Object_define()
{
//Node.prototype.defineProperty(Node.prototype, "test",
Object.defineProperty(Element.prototype, "test",
{
get: function(){return "Object_define"}
})

var demo=document.getElementById("demo")
alert(demo.test)

}

function Node_prototype_define()
{

Node.prototype.defineProperty(Node.prototype, "test",
{
get: function(){return "Node_prototype_define"}
})

var demo=document.getElementById("demo")
alert(demo.test)

}

</script>

</head>

<body>

<p id="demo">This is the demo</p>

<button type="button" onclick="test_defineProperty()">test_defineProperty</button>

<button type="button" onclick="test__defineGetter__()">test __defineGetter__</button>

<button type="button" onclick="Object_define()">Object_define</button>
<button type="button" onclick="Node_prototype_define()">Node_prototype_define</button>
</body>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: