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>