{"id":2165,"date":"2025-03-01T10:31:04","date_gmt":"2025-03-01T02:31:04","guid":{"rendered":"https:\/\/www.laixuexila.com\/?p=2165"},"modified":"2025-03-01T10:31:04","modified_gmt":"2025-03-01T02:31:04","slug":"javascript-%e6%b5%8b%e8%af%95-prototype","status":"publish","type":"post","link":"https:\/\/www.laixuexila.com\/index.php\/2025\/03\/01\/javascript-%e6%b5%8b%e8%af%95-prototype\/","title":{"rendered":"JavaScript – \u6d4b\u8bd5 Prototype"},"content":{"rendered":"\n

\u6d4b\u8bd5 Prototype<\/strong> \u5e93\u65f6\uff0c\u53ef\u4ee5\u901a\u8fc7\u521b\u5efa\u4e00\u4e2a\u7b80\u5355\u7684 HTML \u9875\u9762\uff0c\u52a0\u8f7d Prototype \u5e93\uff0c\u5e76\u7f16\u5199\u4e00\u4e9b JavaScript \u4ee3\u7801\u6765\u6f14\u793a\u5b83\u7684\u529f\u80fd\u3002Prototype \u5e93\u4e3a JavaScript \u63d0\u4f9b\u4e86\u5f88\u591a\u589e\u5f3a\u529f\u80fd\uff0c\u7279\u522b\u662f\u5728 DOM \u64cd\u4f5c\u3001\u4e8b\u4ef6\u5904\u7406\u3001AJAX \u8bf7\u6c42\u548c\u7c7b\u7ee7\u627f\u7b49\u65b9\u9762\u3002<\/p>\n\n\n\n

\u4e0b\u9762\u662f\u51e0\u4e2a\u57fa\u4e8e Prototype \u5e93\u7684\u5e38\u89c1\u529f\u80fd\u6d4b\u8bd5\u793a\u4f8b\u3002<\/p>\n\n\n\n

1. \u57fa\u672c\u7684 Prototype \u6d4b\u8bd5\u9875\u9762<\/strong><\/h3>\n\n\n\n

\u793a\u4f8b HTML \u6587\u4ef6\uff1a<\/h4>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Prototype \u6d4b\u8bd5<\/title>\n    <!-- \u5f15\u5165 Prototype \u5e93 -->\n    <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/prototype\/1.7.3.0\/prototype.js\"><\/script>\n    <style>\n        #message {\n            display: none;\n            padding: 20px;\n            background-color: lightblue;\n            border: 2px solid blue;\n        }\n        #button {\n            padding: 10px 20px;\n            background-color: #4CAF50;\n            color: white;\n            border: none;\n            cursor: pointer;\n        }\n    <\/style>\n<\/head>\n<body>\n\n    <!-- \u6d4b\u8bd5\u7528\u7684\u6309\u94ae\u548c\u6587\u672c -->\n    <button id=\"button\">\u70b9\u51fb\u663e\u793a\u6d88\u606f<\/button>\n    <div id=\"message\">\u8fd9\u662f\u901a\u8fc7 Prototype \u663e\u793a\u7684\u6d88\u606f\uff01<\/div>\n\n    <script>\n        \/\/ Prototype \u6d4b\u8bd5\u4ee3\u7801\n        document.observe('dom:loaded', function() {\n            \/\/ \u7ed1\u5b9a\u70b9\u51fb\u4e8b\u4ef6\n            $('button').observe('click', function() {\n                \/\/ \u4f7f\u7528 Prototype \u5e93\u4e2d\u7684 Effect.FadeIn \u65b9\u6cd5\u663e\u793a\u6d88\u606f\n                new Effect.Fade('message', { duration: 1.0 });\n            });\n        });\n    <\/script>\n\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
\u89e3\u91ca\uff1a<\/h4>\n\n\n\n
    \n
  1. \u5f15\u5165 Prototype<\/strong>\uff1a<\/li>\n<\/ol>\n\n\n\n
      \n
    • \u4f7f\u7528 <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/prototype\/1.7.3.0\/prototype.js\"><\/script><\/code> \u5f15\u5165\u4e86 Prototype \u5e93\u3002<\/li>\n<\/ul>\n\n\n\n
        \n
      1. DOM \u64cd\u4f5c\u548c\u4e8b\u4ef6\u5904\u7406<\/strong>\uff1a<\/li>\n<\/ol>\n\n\n\n
          \n
        • \u4f7f\u7528 document.observe('dom:loaded', ...)<\/code> \u786e\u4fdd DOM \u5b8c\u5168\u52a0\u8f7d\u540e\u6267\u884c\u4ee3\u7801\u3002<\/li>\n\n\n\n
        • $('button').observe('click', ...)<\/code> \u5c06\u4e00\u4e2a\u70b9\u51fb\u4e8b\u4ef6\u7ed1\u5b9a\u5230\u6309\u94ae\uff0c\u5f53\u70b9\u51fb\u65f6\u4f7f\u7528 Prototype \u7684 Effect.Fade<\/code> \u52a8\u753b\u6548\u679c\u663e\u793a\u9690\u85cf\u7684\u6d88\u606f\u3002<\/li>\n<\/ul>\n\n\n\n
            \n
          1. \u52a8\u753b\u6548\u679c<\/strong>\uff1a<\/li>\n<\/ol>\n\n\n\n
              \n
            • Effect.Fade<\/code> \u662f Prototype \u5e93\u63d0\u4f9b\u7684\u4e00\u4e2a\u52a8\u753b\u6548\u679c\uff0c\u7528\u4e8e\u663e\u793a\u6216\u9690\u85cf\u5143\u7d20\u3002<\/li>\n<\/ul>\n\n\n\n
              2. \u8fdb\u4e00\u6b65\u7684\u6d4b\u8bd5\uff1a\u7c7b\u7ee7\u627f<\/strong><\/h3>\n\n\n\n
              Prototype \u5e93\u589e\u5f3a\u4e86 JavaScript \u5bf9\u8c61\u7684\u7ee7\u627f\u673a\u5236\uff0c\u53ef\u4ee5\u65b9\u4fbf\u5730\u521b\u5efa\u7c7b\u548c\u5b9e\u4f8b\u3002\u4f60\u53ef\u4ee5\u6d4b\u8bd5\u5982\u4f55\u4f7f\u7528 Prototype \u6765\u8fdb\u884c\u7c7b\u7ee7\u627f\u3002<\/p>\n\n\n\n
              \u793a\u4f8b\u4ee3\u7801\uff1a<\/h4>\n\n\n\n
              <!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Prototype \u7c7b\u7ee7\u627f\u6d4b\u8bd5<\/title>\n    <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/prototype\/1.7.3.0\/prototype.js\"><\/script>\n<\/head>\n<body>\n\n    <script>\n        \/\/ \u4f7f\u7528 Prototype \u5e93\u7684\u7ee7\u627f\u529f\u80fd\n        function Animal(name) {\n            this.name = name;\n        }\n\n        Animal.prototype.sayHello = function() {\n            alert('Hello, I am ' + this.name);\n        };\n\n        \/\/ \u4f7f\u7528 Prototype \u6269\u5c55\u7c7b\u7ee7\u627f\n        function Dog(name, breed) {\n            Animal.call(this, name);  \/\/ \u8c03\u7528\u7236\u7c7b\u7684\u6784\u9020\u51fd\u6570\n            this.breed = breed;\n        }\n\n        \/\/ \u7ee7\u627f Animal \u7c7b\u7684\u65b9\u6cd5\n        Dog.prototype = Object.extend({}, Animal.prototype);\n        Dog.prototype.constructor = Dog;\n\n        \/\/ \u65b0\u589e Dog \u7c7b\u7684\u7279\u6709\u65b9\u6cd5\n        Dog.prototype.bark = function() {\n            alert(this.name + ' says Woof!');\n        };\n\n        \/\/ \u521b\u5efa Dog \u7c7b\u7684\u5b9e\u4f8b\n        var dog = new Dog('Buddy', 'Golden Retriever');\n        dog.sayHello();  \/\/ \u8c03\u7528\u7236\u7c7b\u65b9\u6cd5\n        dog.bark();      \/\/ \u8c03\u7528\u5b50\u7c7b\u65b9\u6cd5\n    <\/script>\n\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
              \u89e3\u91ca\uff1a<\/h4>\n\n\n\n
                \n
              1. \u521b\u5efa\u7236\u7c7b Animal<\/code><\/strong>\uff1a<\/li>\n<\/ol>\n\n\n\n
                  \n
                • Animal<\/code> \u662f\u4e00\u4e2a\u666e\u901a\u7684 JavaScript \u51fd\u6570\uff0c\u5b83\u6709\u4e00\u4e2a\u6784\u9020\u51fd\u6570\u548c\u4e00\u4e2a sayHello<\/code> \u65b9\u6cd5\u3002<\/li>\n<\/ul>\n\n\n\n
                    \n
                  1. \u521b\u5efa\u5b50\u7c7b Dog<\/code><\/strong>\uff1a<\/li>\n<\/ol>\n\n\n\n
                      \n
                    • Dog<\/code> \u7c7b\u901a\u8fc7\u8c03\u7528 Animal.call(this, name)<\/code> \u7ee7\u627f\u7236\u7c7b\u6784\u9020\u51fd\u6570\uff0c\u5229\u7528 Object.extend()<\/code> \u590d\u5236\u7236\u7c7b\u7684\u539f\u578b\u65b9\u6cd5\u5230\u5b50\u7c7b\u3002<\/li>\n<\/ul>\n\n\n\n
                        \n
                      1. \u7ee7\u627f\u548c\u91cd\u5199<\/strong>\uff1a<\/li>\n<\/ol>\n\n\n\n
                          \n
                        • Dog.prototype = Object.extend({}, Animal.prototype);<\/code> \u4f7f\u5f97 Dog<\/code> \u7c7b\u7684\u539f\u578b\u7ee7\u627f\u4e86 Animal<\/code> \u7c7b\u7684\u65b9\u6cd5\u3002<\/li>\n\n\n\n
                        • \u901a\u8fc7 Dog.prototype.constructor = Dog;<\/code> \u4fee\u590d\u6784\u9020\u51fd\u6570\u3002<\/li>\n<\/ul>\n\n\n\n
                            \n
                          1. \u521b\u5efa\u5b9e\u4f8b\u5e76\u8c03\u7528\u65b9\u6cd5<\/strong>\uff1a<\/li>\n<\/ol>\n\n\n\n
                              \n
                            • \u521b\u5efa Dog<\/code> \u7684\u5b9e\u4f8b dog<\/code>\uff0c\u8c03\u7528\u7236\u7c7b\u548c\u5b50\u7c7b\u7684\u5b9e\u4f8b\u65b9\u6cd5\uff0c\u5206\u522b\u662f sayHello<\/code> \u548c bark<\/code>\u3002<\/li>\n<\/ul>\n\n\n\n
                              3. \u8fdb\u4e00\u6b65\u6d4b\u8bd5\uff1aPrototype \u7684 AJAX \u529f\u80fd<\/strong><\/h3>\n\n\n\n
                              Prototype \u8fd8\u63d0\u4f9b\u4e86 Ajax.Request<\/code>\uff0c\u53ef\u4ee5\u7b80\u5316 AJAX \u8bf7\u6c42\u3002\u4f60\u53ef\u4ee5\u4f7f\u7528\u5b83\u6765\u6d4b\u8bd5\u5982\u4f55\u901a\u8fc7 Prototype \u53d1\u8d77 AJAX \u8bf7\u6c42\u3002<\/p>\n\n\n\n
                              \u793a\u4f8b\u4ee3\u7801\uff1a<\/h4>\n\n\n\n
                              <!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Prototype AJAX \u6d4b\u8bd5<\/title>\n    <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/prototype\/1.7.3.0\/prototype.js\"><\/script>\n<\/head>\n<body>\n\n    <button id=\"loadData\">\u52a0\u8f7d\u6570\u636e<\/button>\n    <div id=\"data\"><\/div>\n\n    <script>\n        document.observe('dom:loaded', function() {\n            $('loadData').observe('click', function() {\n                \/\/ \u4f7f\u7528 Prototype \u53d1\u8d77 AJAX \u8bf7\u6c42\n                new Ajax.Request('https:\/\/jsonplaceholder.typicode.com\/posts\/1', {\n                    method: 'get',\n                    onSuccess: function(response) {\n                        \/\/ \u6210\u529f\u65f6\uff0c\u663e\u793a\u8fd4\u56de\u7684\u6570\u636e\n                        var jsonResponse = response.responseJSON;\n                        $('data').update('<h3>' + jsonResponse.title + '<\/h3><p>' + jsonResponse.body + '<\/p>');\n                    },\n                    onFailure: function() {\n                        \/\/ \u5931\u8d25\u65f6\uff0c\u663e\u793a\u9519\u8bef\u4fe1\u606f\n                        $('data').update('\u8bf7\u6c42\u5931\u8d25\uff01');\n                    }\n                });\n            });\n        });\n    <\/script>\n\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
                              \u89e3\u91ca\uff1a<\/h4>\n\n\n\n
                                \n
                              1. \u4f7f\u7528 Ajax.Request<\/code> \u53d1\u8d77\u8bf7\u6c42<\/strong>\uff1a<\/li>\n<\/ol>\n\n\n\n
                                  \n
                                • new Ajax.Request(url, options)<\/code> \u7528\u6765\u53d1\u8d77 AJAX \u8bf7\u6c42\uff0curl<\/code> \u662f\u8bf7\u6c42\u7684\u76ee\u6807\u5730\u5740\uff0coptions<\/code> \u5305\u542b\u65b9\u6cd5\u3001\u6210\u529f\u56de\u8c03 (onSuccess<\/code>) \u548c\u5931\u8d25\u56de\u8c03 (onFailure<\/code>)\u3002<\/li>\n<\/ul>\n\n\n\n
                                    \n
                                  1. \u663e\u793a\u8bf7\u6c42\u6570\u636e<\/strong>\uff1a<\/li>\n<\/ol>\n\n\n\n
                                      \n
                                    • \u8bf7\u6c42\u6210\u529f\u65f6\uff0c\u4f7f\u7528 response.responseJSON<\/code> \u83b7\u53d6\u8fd4\u56de\u7684 JSON \u6570\u636e\uff0c\u5e76\u5c06\u6807\u9898\u548c\u6b63\u6587\u663e\u793a\u5728\u9875\u9762\u4e2d\u3002<\/li>\n<\/ul>\n\n\n\n
                                        \n
                                      1. \u5931\u8d25\u56de\u8c03<\/strong>\uff1a<\/li>\n<\/ol>\n\n\n\n
                                          \n
                                        • \u8bf7\u6c42\u5931\u8d25\u65f6\uff0c\u663e\u793a\u9519\u8bef\u4fe1\u606f\u3002<\/li>\n<\/ul>\n\n\n\n
                                          4. \u66f4\u591a\u6d4b\u8bd5\uff1aPrototype \u7684\u6269\u5c55\u65b9\u6cd5<\/strong><\/h3>\n\n\n\n
                                          Prototype \u5e93\u63d0\u4f9b\u4e86\u4e00\u4e9b\u975e\u5e38\u6709\u7528\u7684\u6269\u5c55\u65b9\u6cd5\uff0c\u5982 Array.prototype<\/code>, String.prototype<\/code>, Function.prototype<\/code> \u7b49\u3002<\/p>\n\n\n\n
                                          \u793a\u4f8b\u4ee3\u7801\uff1a\u6269\u5c55 Array \u539f\u578b<\/h4>\n\n\n\n
                                          <!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Prototype \u6570\u7ec4\u6269\u5c55\u6d4b\u8bd5<\/title>\n    <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/prototype\/1.7.3.0\/prototype.js\"><\/script>\n<\/head>\n<body>\n\n    <script>\n        \/\/ \u6269\u5c55 Array \u539f\u578b\uff0c\u589e\u52a0\u4e00\u4e2a\u65b9\u6cd5 reverseAndDouble\n        Array.prototype.reverseAndDouble = function() {\n            return this.reverse().map(function(num) {\n                return num * 2;\n            });\n        };\n\n        \/\/ \u6d4b\u8bd5\u6269\u5c55\u65b9\u6cd5\n        var numbers = [1, 2, 3, 4];\n        var result = numbers.reverseAndDouble();\n        alert(result);  \/\/ \u8f93\u51fa [8, 6, 4, 2]\n    <\/script>\n\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
                                          \u89e3\u91ca\uff1a<\/h4>\n\n\n\n
                                            \n
                                          • \u901a\u8fc7 Array.prototype.reverseAndDouble<\/code> \u6269\u5c55\u4e86\u6570\u7ec4\u7684\u539f\u578b\uff0c\u589e\u52a0\u4e86\u4e00\u4e2a\u65b0\u65b9\u6cd5 reverseAndDouble()<\/code>\uff0c\u5b83\u4f1a\u5148\u53cd\u8f6c\u6570\u7ec4\uff0c\u518d\u5c06\u6570\u7ec4\u4e2d\u7684\u6bcf\u4e2a\u6570\u5b57\u4e58\u4ee5 2\u3002<\/li>\n\n\n\n
                                          • \u4f7f\u7528\u8be5\u65b9\u6cd5\u5bf9\u6570\u7ec4\u8fdb\u884c\u64cd\u4f5c\u5e76\u8f93\u51fa\u7ed3\u679c\u3002<\/li>\n<\/ul>\n\n\n\n
                                            \n\n\n\n
                                            \u603b\u7ed3<\/h3>\n\n\n\n
                                            \u901a\u8fc7\u8fd9\u4e9b\u793a\u4f8b\uff0c\u4f60\u53ef\u4ee5\u6d4b\u8bd5 Prototype<\/strong> \u5e93\u7684\u4e00\u4e9b\u6838\u5fc3\u529f\u80fd\uff0c\u5305\u62ec\uff1a<\/p>\n\n\n\n
                                              \n
                                            1. DOM \u64cd\u4f5c\u548c\u4e8b\u4ef6\u7ed1\u5b9a<\/strong>\uff1a\u4f7f\u7528 observe<\/code> \u65b9\u6cd5\u7ed1\u5b9a\u4e8b\u4ef6\u3002<\/li>\n\n\n\n
                                            2. \u52a8\u753b\u6548\u679c<\/strong>\uff1a\u4f7f\u7528 Effect.Fade<\/code> \u7b49\u52a8\u753b\u6548\u679c\u6765\u63a7\u5236\u9875\u9762\u5143\u7d20\u7684\u663e\u793a\u4e0e\u9690\u85cf\u3002<\/li>\n\n\n\n
                                            3. \u7c7b\u7ee7\u627f<\/strong>\uff1a\u901a\u8fc7 Object.extend<\/code> \u548c call()<\/code> \u65b9\u6cd5\u5b9e\u73b0 JavaScript \u7c7b\u7684\u7ee7\u627f\u3002<\/li>\n\n\n\n
                                            4. AJAX \u8bf7\u6c42<\/strong>\uff1a\u4f7f\u7528 Ajax.Request<\/code> \u53d1\u8d77\u5f02\u6b65\u8bf7\u6c42\u3002<\/li>\n\n\n\n
                                            5. \u539f\u578b\u6269\u5c55<\/strong>\uff1a\u6269\u5c55 JavaScript \u5185\u5efa\u5bf9\u8c61\u7684\u539f\u578b\u65b9\u6cd5\u3002<\/li>\n<\/ol>\n\n\n\n
                                              \u8fd9\u4e9b\u529f\u80fd\u5c55\u793a\u4e86 Prototype \u5e93\u5728\u589e\u5f3a JavaScript \u7684\u8868\u73b0\u529b\u548c\u5f00\u53d1\u6548\u7387\u65b9\u9762\u7684\u5f3a\u5927\u80fd\u529b\u3002\u66f4\u591a\u8be6\u7ec6\u5185\u5bb9\u8bf7\u5173\u6ce8\u5176\u4ed6\u76f8\u5173\u6587\u7ae0\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
                                              \u6d4b\u8bd5 Prototype \u5e93\u65f6\uff0c\u53ef\u4ee5\u901a\u8fc7\u521b\u5efa\u4e00\u4e2a\u7b80\u5355\u7684 HTML \u9875\u9762\uff0c\u52a0\u8f7d Prototype \u5e93\uff0c\u5e76\u7f16\u5199\u4e00 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[46],"tags":[],"class_list":["post-2165","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts\/2165","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/comments?post=2165"}],"version-history":[{"count":1,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts\/2165\/revisions"}],"predecessor-version":[{"id":2166,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts\/2165\/revisions\/2166"}],"wp:attachment":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/media?parent=2165"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/categories?post=2165"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/tags?post=2165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}