给对象添加方法和属性
2014-05-04 00:28
274 查看
为了减少所写JS代码对全局环境的污染, 可以采用对象写法来实现命名空间技术,
以使得局部变量和函数都在对象中作为属性存在,它们组成某个主题(对象名称体现)的相关属性和方法的集合。
如下例:
对象定义中每个属性的定义相对对象松散,优化下:
如何给已有对象添加属性和方法?
优化后的代码是类库的一般写法,直接修改不是合适的,库的内容也不容易修改,修改了也不符合开闭法则;
使用优化前的方法 MyLib.xxx = yyy 来实现,可以满足单实例对象, 但是对于多个实例情况,并且多个属性和方法需要添加,
每个实例的待添加的属性和方法又是一致的,方法定义为公共函数, 每个实例都设置一遍所需的属性和方法,着实显得笨重。
查阅 apply 和 call 的用法(http://sjolzy.cn/Understanding-JavaScript-in-argumentscalleecallerapply.html),
可以构造一个属性和方法定义函数, 属性和方法的前缀为this., 然后使用call将this绑定到具体对象上,就实现了对象扩展。
不仅仅对于普通的对象生效, 对于DOM对象也是生效的, 且对于已经绑定过的DOM对象,其克隆仍然具备扩展的特性。
下面给出完整测试代码:
以使得局部变量和函数都在对象中作为属性存在,它们组成某个主题(对象名称体现)的相关属性和方法的集合。
如下例:
var MyLib = {}; // global Object cointainer MyLib.value = 1; MyLib.increment = function() { MyLib.value++; } MyLib.show = function() { alert(MyLib.value); } MyLib.value=6; MyLib.increment(); MyLib.show(); // alerts 7
对象定义中每个属性的定义相对对象松散,优化下:
var MyLib = { value:1, increment:function() {this.value++; }, show: function() { alert(this.value); } };
如何给已有对象添加属性和方法?
优化后的代码是类库的一般写法,直接修改不是合适的,库的内容也不容易修改,修改了也不符合开闭法则;
使用优化前的方法 MyLib.xxx = yyy 来实现,可以满足单实例对象, 但是对于多个实例情况,并且多个属性和方法需要添加,
每个实例的待添加的属性和方法又是一致的,方法定义为公共函数, 每个实例都设置一遍所需的属性和方法,着实显得笨重。
查阅 apply 和 call 的用法(http://sjolzy.cn/Understanding-JavaScript-in-argumentscalleecallerapply.html),
可以构造一个属性和方法定义函数, 属性和方法的前缀为this., 然后使用call将this绑定到具体对象上,就实现了对象扩展。
function base() { this.member =" dnnsun_Member"; this.method =function() { window.alert(this.value); } }
var extObj = { value: 2 } base.call(extObj); extObj.method(); // alert 2
不仅仅对于普通的对象生效, 对于DOM对象也是生效的, 且对于已经绑定过的DOM对象,其克隆仍然具备扩展的特性。
下面给出完整测试代码:
<html>
<head>
</head>
<body>
<input id="button" type="button" value="I am a button"/>
<script type='text/javascript'>
// 待扩展函数
function base() { this.member =" dnnsun_Member"; this.method =function() { window.alert(this.value); } }
/************ Plain OBJECT *******************/
var extObj = {
value: 2
}
base.call(extObj);
extObj.method();
/************ Plain OBJECT *******************/
/************ DOM OBJECT *******************/
base.call(document.getElementById("button"));
document.getElementById("button").method()
var node = document.getElementById("button").cloneNode(true);
document.getElementsByTagName("body")[0].appendChild(node);
document.getElementById("button").value += "(clone)";
document.getElementById("button").method();
/************ DOM OBJECT *******************/
</script>
</body>
</html>
相关文章推荐
- IceHe的技术博客自述
- jquery 序列化表单进行提交笔记
- POJ 1324 Holedox Moving(状态压缩BFS)
- Vmware kernel headers 3.12-kali-686-pae找不到问题
- lambda calculus语言解释器
- HashMap与HashCode()、equals()的关系---在HashMap中实现以对象为键(key)
- 寄存器及七种寻址方式
- boost::tie()和boost::variant()讲解
- HDU 1227 Fast Food (DP)
- BOOST_CLASS_EXPORT
- Careercup - Google面试题 - 4857362737266688
- [C/C++标准库]_[初级]_[优先队列priority_queue的使用]
- 【雷电】源码分析(一)-- 进入游戏开始界面
- [C/C++标准库]_[初级]_[优先队列priority_queue的使用]
- UVaOJ 494 - Kindergarten Counting Game
- 23web app实现上下左右滑动
- SSD固态存储大观(一)
- UVaOJ 458 - The Decoder
- UVaOJ 10300 - Ecological Premium
- 用C语言实现面向对象之封装