每个JavaScript对象都有一个内置的属性,名为prototype。prototype属性保存着对另一个JavaScript对象的引用,这个 对象作为当前对象的父对象。
当通过点记法引用对象的一个函数或属性时,倘若对象上没有这个函数或属性,此时就会使用对象的prototype属性。当出现这种情况时,将检查对象 prototype属性所引用的对象,查看是否有所请求的属性或函数。如果prototype属性引用的对象也没有所需的函数或属性,则会进一步检查这个 对象(prototype属性引用的对象)的prototype属性,依次沿着链向上查找,直到找到所请求的函数或属性,或者到达链尾,如果已经到达链尾 还没有找到,则返回undefined。从这个意义上讲,这种继承结构更应是一种“has a”关系,而不是“is a”关系。
(注意:JavaScript所有的固有数据类型都具有只读的prototype属性(这是可以理解的:因为如果修改了这些类型的prototype属性,则哪些 预定义的方法就消失了), 但是我们可以向其中添加自己的扩展方法。)
下面举一个例子,在JQuery中使用 扩展一个类(函数)的Prototype属性:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>JQuery AJAX</title>
<script type="text/javascript" language="javascript" src="JS/jquery-1.3.1-vsdoc.js"></script>
<script type="text/javascript" language="javascript" src="JS/jquery-1.3.1.js"></script>
<script type="text/javascript" language="javascript">
var SearchJs = function() { }
//SearchJs类(函数)的prototype属性扩展一个方法ShowSearchKeyTip
SearchJs. prototype. ShowSearchKeyTip = function(o) {
var t;
if (o.value == "") {
$("#searchResult").css("display", "none");
return;
}
$("#searchResult").css("display", "block");
$.get("SearchHandler.ashx?key=" + encodeURIComponent(o.value), function(data) {
var arr = data.split("|");
$("#searchResult").empty();
for (var i = 0; i < arr.length; i++) {
t = setTimeout('searchJsHelper.HiddenSearchKeyTip()', 10000);
var d = document.createElement("DIV");
d.style.cursor = "hand";
d.id = "div" + i;
d.className = "divTip";
d.innerText = arr[i];
$("#" + d.id).mouseover(function() {
clearTimeout(t);
$("#" + d.id).css("display", "block");
});
$("#" + d.id).mouseout(function() {
t = setTimeout('searchJsHelper.HiddenSearchKeyTip()', 10000);
});
$("#searchResult").append(d);
}
});
$("#searchResult").mouseover(function() {
clearTimeout(t);
$("#searchResult").css("display", "block");
});
$("#searchResult").mouseout(function() {
t = setTimeout('searchJsHelper.HiddenSearchKeyTip()', 10000);
});
}
SearchJs.prototype.HiddenSearchKeyTip = function(o) {
$("#searchResult").css("display", "none");
}
//建立SearchJs类的一个实例对象,供全局使用(比如在事件处理中调用).
var searchJsHelper = new SearchJs();
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="main">
<input id="searchBox" type="text" onpropertychange=" searchJsHelper.ShowSearchKeyTip(this)" οninput=" searchJsHelper.ShowSearchKeyTip(this)" />
<div id="searchResult">
请输入要查询的姓名
</div>
</div>
</div>
</form>
</body>
</html>
当通过点记法引用对象的一个函数或属性时,倘若对象上没有这个函数或属性,此时就会使用对象的prototype属性。当出现这种情况时,将检查对象 prototype属性所引用的对象,查看是否有所请求的属性或函数。如果prototype属性引用的对象也没有所需的函数或属性,则会进一步检查这个 对象(prototype属性引用的对象)的prototype属性,依次沿着链向上查找,直到找到所请求的函数或属性,或者到达链尾,如果已经到达链尾 还没有找到,则返回undefined。从这个意义上讲,这种继承结构更应是一种“has a”关系,而不是“is a”关系。
如果你习惯于基于类的继承机制,那么可能要花一些时间来熟悉这种prototype机制。prototype机制是动态的,可以根据需要在运行时配 置,而无需重新编译。你可以只在需要时才向对象增加属性和函数,而且能动态地把单独的函数合并在一起,来创建动态、全能的对象。对prototype机制 的这种高度动态性可谓褒贬不一,因为这种机制学习和应用起来很不容易,但是一旦正确地加以应用,这种机制则相当强大而且非常健壮。
这种动态性与基于类的继承机制中的多态概念异曲同工。两个对象可以有相同的属性和函数,但是函数方法(实 现)可以完全不同,而且属性可以支持完全不同的数据类型。这种多态性使得JavaScript对象能够由其他脚本和函数以统一的方式处理。
(注意:JavaScript所有的固有数据类型都具有只读的prototype属性(这是可以理解的:因为如果修改了这些类型的prototype属性,则哪些 预定义的方法就消失了), 但是我们可以向其中添加自己的扩展方法。)
下面举一个例子,在JQuery中使用 扩展一个类(函数)的Prototype属性:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>JQuery AJAX</title>
<script type="text/javascript" language="javascript" src="JS/jquery-1.3.1-vsdoc.js"></script>
<script type="text/javascript" language="javascript" src="JS/jquery-1.3.1.js"></script>
<script type="text/javascript" language="javascript">
var SearchJs = function() { }
//SearchJs类(函数)的prototype属性扩展一个方法ShowSearchKeyTip
SearchJs. prototype. ShowSearchKeyTip = function(o) {
var t;
if (o.value == "") {
$("#searchResult").css("display", "none");
return;
}
$("#searchResult").css("display", "block");
$.get("SearchHandler.ashx?key=" + encodeURIComponent(o.value), function(data) {
var arr = data.split("|");
$("#searchResult").empty();
for (var i = 0; i < arr.length; i++) {
t = setTimeout('searchJsHelper.HiddenSearchKeyTip()', 10000);
var d = document.createElement("DIV");
d.style.cursor = "hand";
d.id = "div" + i;
d.className = "divTip";
d.innerText = arr[i];
$("#" + d.id).mouseover(function() {
clearTimeout(t);
$("#" + d.id).css("display", "block");
});
$("#" + d.id).mouseout(function() {
t = setTimeout('searchJsHelper.HiddenSearchKeyTip()', 10000);
});
$("#searchResult").append(d);
}
});
$("#searchResult").mouseover(function() {
clearTimeout(t);
$("#searchResult").css("display", "block");
});
$("#searchResult").mouseout(function() {
t = setTimeout('searchJsHelper.HiddenSearchKeyTip()', 10000);
});
}
SearchJs.prototype.HiddenSearchKeyTip = function(o) {
$("#searchResult").css("display", "none");
}
//建立SearchJs类的一个实例对象,供全局使用(比如在事件处理中调用).
var searchJsHelper = new SearchJs();
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="main">
<input id="searchBox" type="text" onpropertychange=" searchJsHelper.ShowSearchKeyTip(this)" οninput=" searchJsHelper.ShowSearchKeyTip(this)" />
<div id="searchResult">
请输入要查询的姓名
</div>
</div>
</div>
</form>
</body>
</html>
转载于:https://blog.51cto.com/liweibird/275816