Javascript Getter/Setter and prototype(extend dom)

最新推荐文章于 2024-07-23 17:08:00 发布

原创最新推荐文章于 2024-07-23 17:08:00 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#prototype #javascript #function #object #button #exchange

脚本类同时被 2 个专栏收录

13 篇文章

订阅专栏

java

5 篇文章

订阅专栏

本文介绍了如何在Internet Explorer 9中使用`Object.defineProperty`来扩展DOM对象，替代不被支持的`__defineGetter__`和`__defineSetter__`方法。通过实例演示了如何为DOM元素增加自定义属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>