当前位置: 首页 > 图文教程 > 网络编程 > Javascript > prototype 学习笔记整理

Javascript
有趣的script标签用getAttribute方法来自脚本吧
学习YUI.Ext 第二天
学习YUI.Ext 第三天
学习YUI.Ext第五日--做拖放Darg&Drop
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
学习YUI.Ext 第七天--关于View&JSONView
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
对YUI扩展的Gird组件 Part-2
Gird事件机制初级读本
为Yahoo! UI Extensions Grid增加内置的可编辑器
如何简单地用YUI做JavaScript动画
(function(){})()的用法与优点
JS层移支示例代码
如何在Web页面上直接打开、编辑、创建Office文档
网页中实现浏览器的最大,最小化和关闭按钮
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
图片自动缩小的js代码,用以防止图片撑破页面
收藏一些不常用,但是有用的代码
解决 firefox 不支持 document.all的方法
用ajax实现的自动投票的代码

Javascript 中的 prototype 学习笔记整理


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 394 ::
收藏到网摘: n/a

prototype 学习笔记整理,学习prototype的朋友可以参考下。 var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
定义了一个class函数作为创建类的模版或者说是原型
使用方法
复制代码 代码如下:

<html>
<title>Test Class.create()</title>
<head>
<script language="JavaScript" type="text/javascript" src="prototype.js"></script>
<script>
var llinzzi= Class.create();
llinzzi.prototype = {
initialize:function(){
document.writeln('This is create when initialize');
},
fuv:function(){document.writeln('This is inline method');}
}
var linChild = new llinzzi();
</script>
</head>
<body>
<script>
//window.onload(linChild);
window.onload(linChild.fuv());
</script>;
</body>
</html>

////
This is create when initialize This is inline method ;
/////
就是当采用了prototype的Class.create();方法创建对象的时候,initialize作为特殊的方法,在创建实例的时候被执行,用以初始化.
继承
Object.extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}
此方法将拷贝所有的source object的属性和方法到destination object.
Prototype 对Object类进行的扩展主要通过一个静态函数Object.extend (destination, source)实现了JavaScript 中的继承。 从语义的角度, Object.extend (destination, source)方法有些不和逻辑, 因为它事实上仅仅实现了从源对象到目标对象的全息拷贝。不过你也可以这样认为:由于目标对象拥有了所有源对象所拥有的特性, 所以看上去就像目标对象继承了源对象(并加以扩展)一样.
// make a (shallow) copy of obj1
var obj1 = {
method : "post",
args : ""
};
var obj2 = Object.extend({}, obj1);
使用 例子:
复制代码 代码如下:

<html>
<title>Test Object.extend</title>
<head>
<script language="JavaScript" type="text/javascript" src="prototype.js"></script>
<script>
function log(message) {
document.writeln(" >>>>>: " +message);
}
var obj1= {
method : "post",
args : ""
};
var obj2 = Object.extend({}, obj1);
log(obj2.method);
log(obj1 == obj2);
log(obj1.method);
log(obj2 == obj1);
</script>
</head>
<body>
</body>
</html>

// merges in the given options object to the default options object
Object.extend(options, {
args : "data=454",
onComplete : function() { alert("done!"); }
});
options.method // "post"
options.args // "ata=454"
options.onComplete // function() { alert("done!"); }
使用例子:
复制代码 代码如下:

<html>
<title>Test Object.extend</title>
<head>
<script language="JavaScript" type="text/javascript" src="prototype.js"></script>
<script>
function log(message) {
document.writeln(" >>>>>: " +message);
}
var options= {
method : "post",
args : ""
};
Object.extend(options, {
args : "data=454",
onComplete : function() { alert("done!");}
});
options.method // "post"
options.args // "ata=454"
options.onComplete // function() { alert("done!"); }
log(options.method);
log(options.args);
log(options.onComplete);
</script>
</head>
<body>
</body>
</html>