JavaScript 类（函数）的Prototype属性的使用

时间 2019-12-18

标签 javascript 函数 prototype 属性使用栏目 JavaScript 繁體版

原文原文链接

每一个JavaScript对象都有一个内置的属性，名为prototype。prototype属性保存着对另外一个JavaScript对象的引用，这个对象做为当前对象的父对象。

当经过点记法引用对象的一个函数或属性时，假若对象上没有这个函数或属性，此时就会使用对象的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)" oninput=" searchJsHelper.ShowSearchKeyTip(this)" />         <div id="searchResult">             请输入要查询的姓名         </div>     </div>     </div>     </form> </body> </html>