{"id":2091,"date":"2025-02-27T23:35:41","date_gmt":"2025-02-27T15:35:41","guid":{"rendered":"https:\/\/www.laixuexila.com\/?p=2091"},"modified":"2025-02-27T23:35:41","modified_gmt":"2025-02-27T15:35:41","slug":"javascript-%e5%87%bd%e6%95%b0%e8%b0%83%e7%94%a8","status":"publish","type":"post","link":"https:\/\/www.laixuexila.com\/index.php\/2025\/02\/27\/javascript-%e5%87%bd%e6%95%b0%e8%b0%83%e7%94%a8\/","title":{"rendered":"JavaScript \u51fd\u6570\u8c03\u7528"},"content":{"rendered":"\n<p>\u5728 JavaScript \u4e2d\uff0c\u51fd\u6570\u8c03\u7528\u662f\u6307\u5728\u4ee3\u7801\u7684\u67d0\u4e2a\u5730\u65b9\u6267\u884c\u4e00\u4e2a\u5df2\u7ecf\u5b9a\u4e49\u7684\u51fd\u6570\u3002\u5f53\u51fd\u6570\u88ab\u8c03\u7528\u65f6\uff0cJavaScript \u4f1a\u8df3\u8f6c\u5230\u51fd\u6570\u4f53\u5185\u6267\u884c\u5176\u4ee3\u7801\uff0c\u5e76\u5c06\u8fd4\u56de\u503c\u8fd4\u56de\u7ed9\u8c03\u7528\u8005\u3002\u51fd\u6570\u8c03\u7528\u6709\u4e0d\u540c\u7684\u65b9\u5f0f\uff0c\u8fd9\u4e9b\u65b9\u5f0f\u5404\u6709\u4e0d\u540c\u7684\u884c\u4e3a\u548c\u7528\u6cd5\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. \u57fa\u672c\u51fd\u6570\u8c03\u7528<\/strong><\/h3>\n\n\n\n<p>\u6700\u5e38\u89c1\u7684\u51fd\u6570\u8c03\u7528\u65b9\u5f0f\u662f\u901a\u8fc7\u51fd\u6570\u540d\u540e\u9762\u52a0\u5706\u62ec\u53f7\u6765\u8c03\u7528\u3002\u5706\u62ec\u53f7\u5185\u53ef\u4ee5\u4f20\u5165\u53c2\u6570\uff0c\u4f20\u5165\u7684\u53c2\u6570\u5c06\u4f5c\u4e3a\u51fd\u6570\u7684\u8f93\u5165\u3002<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>\u8bed\u6cd5\uff1a<\/strong><\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>functionName(arguments);<\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>\u793a\u4f8b\uff1a<\/strong><\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>function greet(name) {\n  console.log(\"Hello, \" + name + \"!\");\n}\n\ngreet(\"Alice\");  \/\/ \u8f93\u51fa: Hello, Alice!\ngreet(\"Bob\");    \/\/ \u8f93\u51fa: Hello, Bob!<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. \u901a\u8fc7\u51fd\u6570\u8868\u8fbe\u5f0f\u8c03\u7528<\/strong><\/h3>\n\n\n\n<p>\u9664\u4e86\u51fd\u6570\u58f0\u660e\uff0c\u51fd\u6570\u8fd8\u53ef\u4ee5\u901a\u8fc7\u51fd\u6570\u8868\u8fbe\u5f0f\u6765\u5b9a\u4e49\u3002\u8fd9\u79cd\u65b9\u5f0f\u5c06\u51fd\u6570\u8d4b\u503c\u7ed9\u4e00\u4e2a\u53d8\u91cf\uff0c\u4e4b\u540e\u901a\u8fc7\u8be5\u53d8\u91cf\u6765\u8c03\u7528\u51fd\u6570\u3002<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>\u8bed\u6cd5\uff1a<\/strong><\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>const functionName = function(arguments) {\n  \/\/ \u51fd\u6570\u4f53\n};<\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>\u793a\u4f8b\uff1a<\/strong><\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>const add = function(a, b) {\n  return a + b;\n};\n\nconsole.log(add(3, 4));  \/\/ \u8f93\u51fa: 7<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. \u7acb\u5373\u6267\u884c\u51fd\u6570\u8868\u8fbe\u5f0f\uff08IIFE\uff09<\/strong><\/h3>\n\n\n\n<p>\u7acb\u5373\u6267\u884c\u51fd\u6570\u8868\u8fbe\u5f0f\uff08IIFE\uff0cImmediately Invoked Function Expression\uff09\u662f\u5728\u5b9a\u4e49\u51fd\u6570\u540e\u7acb\u5373\u8c03\u7528\u5b83\u7684\u4e00\u4e2a\u6280\u5de7\u3002IIFE \u5728 JavaScript \u4e2d\u5e38\u7528\u4e8e\u521b\u5efa\u79c1\u6709\u4f5c\u7528\u57df\u3002<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>\u8bed\u6cd5\uff1a<\/strong><\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>(function() {\n  \/\/ \u51fd\u6570\u4f53\n})();<\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>\u793a\u4f8b\uff1a<\/strong><\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>(function() {\n  console.log(\"This function runs immediately after being defined.\");\n})();  \/\/ \u8f93\u51fa: This function runs immediately after being defined.<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u6ce8\u610f<\/strong>\uff1aIIFE \u4f7f\u7528\u4e86\u51fd\u6570\u8868\u8fbe\u5f0f\u7684\u8bed\u6cd5\uff0c\u5e76\u4e14\u7acb\u5373\u52a0\u4e0a\u5706\u62ec\u53f7 <code>()<\/code> \u6765\u6267\u884c\u3002<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>4. \u4f7f\u7528 <code>call<\/code> \u548c <code>apply<\/code> \u8c03\u7528\u51fd\u6570<\/strong><\/h3>\n\n\n\n<p><code>call()<\/code> \u548c <code>apply()<\/code> \u662f JavaScript \u4e2d\u51fd\u6570\u5bf9\u8c61\u7684\u4e24\u4e2a\u65b9\u6cd5\u3002\u5b83\u4eec\u7528\u4e8e\u6307\u5b9a\u51fd\u6570\u7684\u6267\u884c\u4e0a\u4e0b\u6587\uff08\u5373\u51fd\u6570\u5185 <code>this<\/code> \u6307\u5411\u7684\u5bf9\u8c61\uff09\uff0c\u5e76\u8c03\u7528\u8be5\u51fd\u6570\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><code>call()<\/code> \u8bed\u6cd5\uff1a<\/strong><\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>functionName.call(thisContext, arg1, arg2, ...);<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><code>apply()<\/code> \u8bed\u6cd5\uff1a<\/strong><\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>functionName.apply(thisContext, &#91;arg1, arg2, ...]);<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>call<\/code><\/strong>\uff1a\u63a5\u53d7\u53c2\u6570\u4e00\u4e00\u5217\u4e3e\u3002<\/li>\n\n\n\n<li><strong><code>apply<\/code><\/strong>\uff1a\u63a5\u53d7\u4e00\u4e2a\u53c2\u6570\u6570\u7ec4\u3002<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\u793a\u4f8b\uff1a<\/strong><\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>function sayHello() {\n  console.log(`Hello, ${this.name}`);\n}\n\nconst person = { name: \"Alice\" };\n\nsayHello.call(person);  \/\/ \u8f93\u51fa: Hello, Alice\nsayHello.apply(person); \/\/ \u8f93\u51fa: Hello, Alice<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u6ce8\u610f<\/strong>\uff1a<code>call()<\/code> \u548c <code>apply()<\/code> \u53ef\u4ee5\u6539\u53d8\u51fd\u6570\u5185 <code>this<\/code> \u7684\u6307\u5411\uff0c\u5e76\u4e14\u5728 <code>call<\/code> \u4e2d\u4f20\u9012\u53c2\u6570\u65f6\u662f\u9010\u4e2a\u4f20\u9012\u7684\uff0c\u800c <code>apply<\/code> \u4f20\u9012\u7684\u662f\u4e00\u4e2a\u6570\u7ec4\u3002<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>5. \u4f7f\u7528 <code>bind<\/code> \u521b\u5efa\u4e00\u4e2a\u65b0\u7684\u51fd\u6570<\/strong><\/h3>\n\n\n\n<p><code>bind()<\/code> \u65b9\u6cd5\u521b\u5efa\u4e00\u4e2a\u65b0\u51fd\u6570\uff0c\u8be5\u51fd\u6570\u4f1a\u5728\u8c03\u7528\u65f6\u5c06 <code>this<\/code> \u8bbe\u7f6e\u4e3a\u6307\u5b9a\u7684\u503c\uff0c\u5e76\u4e14\u53ef\u4ee5\u9884\u8bbe\u90e8\u5206\u53c2\u6570\u3002<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>\u8bed\u6cd5\uff1a<\/strong><\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>const newFunction = functionName.bind(thisContext, arg1, arg2, ...);<\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>\u793a\u4f8b\uff1a<\/strong><\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>function greet() {\n  console.log(\"Hello, \" + this.name);\n}\n\nconst person = { name: \"Bob\" };\n\nconst greetPerson = greet.bind(person);\ngreetPerson();  \/\/ \u8f93\u51fa: Hello, Bob<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u6ce8\u610f<\/strong>\uff1a<code>bind()<\/code> \u8fd4\u56de\u7684\u662f\u4e00\u4e2a\u65b0\u7684\u51fd\u6570\uff0c\u539f\u51fd\u6570\u4e0d\u4f1a\u88ab\u4fee\u6539\u3002<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>6. \u901a\u8fc7\u6784\u9020\u51fd\u6570\u8c03\u7528<\/strong><\/h3>\n\n\n\n<p>\u5f53\u51fd\u6570\u4f5c\u4e3a\u6784\u9020\u51fd\u6570\u4f7f\u7528\u65f6\uff0c\u901a\u8fc7 <code>new<\/code> \u64cd\u4f5c\u7b26\u53ef\u4ee5\u521b\u5efa\u4e00\u4e2a\u65b0\u7684\u5bf9\u8c61\uff0c\u5e76\u8c03\u7528\u51fd\u6570\u3002\u6784\u9020\u51fd\u6570\u7528\u4e8e\u521b\u5efa\u548c\u521d\u59cb\u5316\u5bf9\u8c61\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\u8bed\u6cd5\uff1a<\/strong><\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>const obj = new ConstructorFunction(arguments);<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\u793a\u4f8b\uff1a<\/strong><\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>function Person(name, age) {\n  this.name = name;\n  this.age = age;\n}\n\nconst person1 = new Person(\"Alice\", 25);\nconsole.log(person1.name);  \/\/ \u8f93\u51fa: Alice\nconsole.log(person1.age);   \/\/ \u8f93\u51fa: 25<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u6ce8\u610f<\/strong>\uff1a\u4f7f\u7528 <code>new<\/code> \u8c03\u7528\u6784\u9020\u51fd\u6570\u65f6\uff0c\u4f1a\u521b\u5efa\u4e00\u4e2a\u65b0\u7684\u5bf9\u8c61\uff0c\u5e76\u5c06 <code>this<\/code> \u6307\u5411\u8be5\u5bf9\u8c61\u3002<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>7. \u7bad\u5934\u51fd\u6570\u8c03\u7528<\/strong><\/h3>\n\n\n\n<p>\u7bad\u5934\u51fd\u6570\u662f JavaScript \u4e2d\u4e00\u79cd\u7b80\u6d01\u7684\u51fd\u6570\u5b9a\u4e49\u65b9\u5f0f\u3002\u7bad\u5934\u51fd\u6570\u7684\u8c03\u7528\u4e0e\u666e\u901a\u51fd\u6570\u76f8\u540c\uff0c\u4f46\u662f\u7bad\u5934\u51fd\u6570\u6ca1\u6709\u81ea\u5df1\u7684 <code>this<\/code>\uff0c<code>this<\/code> \u4f1a\u7ee7\u627f\u81ea\u5916\u90e8\u4f5c\u7528\u57df\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\u8bed\u6cd5\uff1a<\/strong><\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>const functionName = (arguments) =&gt; {\n  \/\/ \u51fd\u6570\u4f53\n};<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\u793a\u4f8b\uff1a<\/strong><\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>const greet = (name) =&gt; {\n  console.log(\"Hello, \" + name);\n};\n\ngreet(\"Charlie\");  \/\/ \u8f93\u51fa: Hello, Charlie<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u6ce8\u610f<\/strong>\uff1a\u7bad\u5934\u51fd\u6570\u6ca1\u6709\u81ea\u5df1\u7684 <code>this<\/code>\uff0c\u5b83\u4f1a\u7ee7\u627f\u5916\u90e8\u51fd\u6570\u7684 <code>this<\/code>\u3002<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>8. \u51fd\u6570\u9012\u5f52\u8c03\u7528<\/strong><\/h3>\n\n\n\n<p>\u9012\u5f52\u51fd\u6570\u662f\u6307\u51fd\u6570\u5728\u5176\u5185\u90e8\u8c03\u7528\u81ea\u5df1\u3002\u9012\u5f52\u8c03\u7528\u901a\u5e38\u7528\u4e8e\u5904\u7406\u53ef\u4ee5\u88ab\u5206\u89e3\u4e3a\u5b50\u95ee\u9898\u7684\u95ee\u9898\uff0c\u5982\u9636\u4e58\u8ba1\u7b97\u3001\u6590\u6ce2\u90a3\u5951\u6570\u5217\u7b49\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\u793a\u4f8b\uff1a<\/strong><\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>function factorial(n) {\n  if (n === 0) return 1;\n  return n * factorial(n - 1);\n}\n\nconsole.log(factorial(5));  \/\/ \u8f93\u51fa: 120<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u6ce8\u610f<\/strong>\uff1a\u9012\u5f52\u8c03\u7528\u65f6\uff0c\u9700\u8981\u6709\u7ec8\u6b62\u6761\u4ef6\uff0c\u5426\u5219\u53ef\u80fd\u4f1a\u5bfc\u81f4\u6808\u6ea2\u51fa\u3002<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u603b\u7ed3<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u57fa\u672c\u8c03\u7528<\/strong>\uff1a\u6700\u5e38\u89c1\u7684\u8c03\u7528\u65b9\u5f0f\uff0c\u901a\u8fc7\u51fd\u6570\u540d\u548c\u62ec\u53f7\u8c03\u7528\u3002<\/li>\n\n\n\n<li><strong>\u51fd\u6570\u8868\u8fbe\u5f0f<\/strong>\uff1a\u51fd\u6570\u4f5c\u4e3a\u503c\u8d4b\u7ed9\u53d8\u91cf\uff0c\u901a\u8fc7\u53d8\u91cf\u8c03\u7528\u3002<\/li>\n\n\n\n<li><strong>IIFE<\/strong>\uff1a\u7acb\u5373\u6267\u884c\u51fd\u6570\u8868\u8fbe\u5f0f\uff0c\u5b9a\u4e49\u540e\u7acb\u523b\u8c03\u7528\u3002<\/li>\n\n\n\n<li><strong>call \u548c apply<\/strong>\uff1a\u901a\u8fc7\u8fd9\u4e24\u4e2a\u65b9\u6cd5\u6539\u53d8\u51fd\u6570\u7684 <code>this<\/code> \u6307\u5411\u5e76\u8c03\u7528\u51fd\u6570\u3002<\/li>\n\n\n\n<li><strong>bind<\/strong>\uff1a\u521b\u5efa\u4e00\u4e2a\u65b0\u7684\u51fd\u6570\uff0c\u5e76\u56fa\u5b9a\u51fd\u6570\u7684 <code>this<\/code> \u548c\u9884\u8bbe\u53c2\u6570\u3002<\/li>\n\n\n\n<li><strong>\u6784\u9020\u51fd\u6570<\/strong>\uff1a\u901a\u8fc7 <code>new<\/code> \u5173\u952e\u5b57\u8c03\u7528\u6784\u9020\u51fd\u6570\u521b\u5efa\u5bf9\u8c61\u3002<\/li>\n\n\n\n<li><strong>\u7bad\u5934\u51fd\u6570<\/strong>\uff1a\u51fd\u6570\u5b9a\u4e49\u7b80\u6d01\uff0c<code>this<\/code> \u4ece\u5916\u90e8\u4f5c\u7528\u57df\u7ee7\u627f\u3002<\/li>\n\n\n\n<li><strong>\u9012\u5f52\u8c03\u7528<\/strong>\uff1a\u51fd\u6570\u8c03\u7528\u81ea\u8eab\uff0c\u901a\u5e38\u7528\u4e8e\u5206\u6cbb\u7b97\u6cd5\u6216\u6570\u5b66\u95ee\u9898\u3002<\/li>\n<\/ul>\n\n\n\n<p>\u4e86\u89e3\u8fd9\u4e9b\u4e0d\u540c\u7684\u51fd\u6570\u8c03\u7528\u65b9\u5f0f\uff0c\u53ef\u4ee5\u8ba9\u4f60\u5728\u7f16\u5199 JavaScript \u65f6\u66f4\u52a0\u7075\u6d3b\u548c\u9ad8\u6548\u3002\u66f4\u5835\u8be6\u7ec6\u5185\u5bb9\u8bf7\u5173\u6ce8\u5176\u4ed6\u76f8\u5173\u6587\u7ae0\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u5728 JavaScript \u4e2d\uff0c\u51fd\u6570\u8c03\u7528\u662f\u6307\u5728\u4ee3\u7801\u7684\u67d0\u4e2a\u5730\u65b9\u6267\u884c\u4e00\u4e2a\u5df2\u7ecf\u5b9a\u4e49\u7684\u51fd\u6570\u3002\u5f53\u51fd\u6570\u88ab\u8c03\u7528\u65f6\uff0cJavaSc [&hellip;]<\/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-2091","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts\/2091","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=2091"}],"version-history":[{"count":1,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts\/2091\/revisions"}],"predecessor-version":[{"id":2092,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts\/2091\/revisions\/2092"}],"wp:attachment":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/media?parent=2091"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/categories?post=2091"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/tags?post=2091"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}