{"id":1023,"date":"2022-04-14T23:08:49","date_gmt":"2022-04-14T15:08:49","guid":{"rendered":"http:\/\/zhuxinyong.com\/?p=1023"},"modified":"2023-02-16T14:39:53","modified_gmt":"2023-02-16T06:39:53","slug":"5-yin-yong-lei-xing-vs-ji-ben-lei-xing","status":"publish","type":"post","link":"https:\/\/zhuxinyong.com\/?p=1023","title":{"rendered":"5 &#8211; \u5f15\u7528\u7c7b\u578b vs \u57fa\u672c\u7c7b\u578b"},"content":{"rendered":"<p><img decoding=\"async\" src=\"http:\/\/zhuxinyong.com\/wp-content\/uploads\/2022\/04\/16499523380963.jpg\" alt=\"\" \/><\/p>\n<p>\u539f\u6587\u5730\u5740\uff1a<a href=\"https:\/\/dev.to\/bhagatparwinder\/reference-vs-value-5dbg\" target=\"_blank\" rel=\"noopener\">https:\/\/dev.to\/bhagatparwinder\/reference-vs-value-5dbg<\/a><\/p>\n<p><strong>TLDR<\/strong>: \u5728 JavaScript \u4e2d\uff0c\u57fa\u672c\u6570\u636e\u7c7b\u578b\u662f\u6309\u503c\u8bbf\u95ee\uff0c\u800c Object\u3001Array\u3001Set\u3001Map \u662f\u6309\u5f15\u7528\u8bbf\u95ee\u3002<\/p>\n<h3><a id=\"%E4%BB%80%E4%B9%88%E6%98%AF%E6%8C%89%E5%80%BC%E4%BC%A0%E9%80%92%EF%BC%9F\" class=\"anchor\" aria-hidden=\"true\"><span class=\"octicon octicon-link\"><\/span><\/a>\u4ec0\u4e48\u662f\u6309\u503c\u4f20\u9012\uff1f<\/h3>\n<p>\u5728\u6211\u4e4b\u524d\u7684\u6587\u7ae0\u4e2d\u8c08\u5230\u4e86\u8bb8\u591a JavaScript \u4e2d\u7684\u7c7b\u578b\uff0cString\u3001Number \u6216\u8005\u662f Boolean \u90fd\u662f\u6309\u503c\u4f20\u9012\u3002\u90a3\u8fd9\u53c8\u4ee3\u8868\u7740\u4ec0\u4e48\u5462\uff1f<\/p>\n<pre><code class=\"language-plain_text\">let person = &quot;Parwinder&quot;;\nlet human = person;\n\nconsole.log(person); \/\/ Parwinder\nconsole.log(human); \/\/ Parwinder\n\nperson = &quot;Ricky&quot;;\n\nconsole.log(person); \/\/ Ricky\nconsole.log(human); \/\/ Parwinder\n<\/code><\/pre>\n<p>\u6211\u521b\u5efa\u4e86\u4e00\u4e2a person \u7136\u540e\u8d4b\u4e86\u4e00\u4e2a\u503c\uff0c\u4e4b\u540e\u53c8\u628a person \u8d4b\u7ed9 human \u4f46\u8fd9\u5e76\u4e0d\u610f\u5473\u7740 human \u7684\u6539\u53d8\u4f1a\u5f71\u54cd person\u3002\u5f53\u6211\u7528 person \u8d4b\u503c\u7ed9 human \u65f6\uff0c\u53ea\u662f\u628a person \u4ee3\u8868\u7684\u503c\u62f7\u8d1d\u4e00\u4efd\u8d4b\u7ed9\u4e86 person \u5b83\u4eec\u4e92\u4e0d\u76f8\u5e72\uff0c\u8fd9\u5c31\u662f\u6309\u503c\u4f20\u9012\u3002<\/p>\n<h3><a id=\"%E4%BB%80%E4%B9%88%E6%98%AF%E6%8C%89%E5%BC%95%E7%94%A8%E4%BC%A0%E9%80%92%EF%BC%9F\" class=\"anchor\" aria-hidden=\"true\"><span class=\"octicon octicon-link\"><\/span><\/a>\u4ec0\u4e48\u662f\u6309\u5f15\u7528\u4f20\u9012\uff1f<\/h3>\n<p>Object\u3001Array\u3001Set \u548c Map \u90fd\u662f\u6309\u5f15\u7528\u4f20\u9012\u800c\u975e\u6309\u503c\u3002<\/p>\n<pre><code class=\"language-plain_text\">let personObject = {\n    firstName: &quot;Parwinder&quot;,\n    lastName: &quot;Bhagat&quot;\n};\n\nlet humanObject = personObject;\n\nconsole.log(personObject.firstName); \/\/ Parwinder\nconsole.log(humanObject.firstName); \/\/ Parwinder\n\npersonObject.firstName = &quot;Ricky&quot;;\n\nconsole.log(personObject.firstName); \/\/ Ricky\nconsole.log(humanObject.firstName); \/\/ Ricky\n<\/code><\/pre>\n<p>\u6709\u6ca1\u6709\u6ce8\u610f\u5230\u4e0d\u540c\uff1f\u5bf9 personObject \u7684\u4fee\u6539\u4f1a\u5f71\u54cd humanObject \u7684 firstName\u3002\u8fd9\u662f\u56e0\u4e3a\u5f53\u6211\u7528 personObject \u8d4b\u503c\u7ed9 humanObject \u65f6\uff0c\u4e0d\u662f\u4e3a\u5bf9\u8c61\u505a\u4e86\u4e00\u4efd\u62f7\u8d1d\uff0c\u800c\u662f\u521b\u5efa\u4e86\u5bf9 personObject \u7684\u5f15\u7528\uff0c\u6240\u4ee5\u4e24\u4e2a\u5bf9\u8c61\u6307\u5411\u540c\u4e00\u4e2a\u5f15\u7528\uff0c\u4efb\u4f55\u4e00\u4e2a\u4fee\u6539\u90fd\u4f1a\u5f71\u54cd\u53e6\u4e00\u4e2a\u3002<\/p>\n<p>\u6309\u5f15\u7528\u4f20\u9012\u8fd8\u6709\u53e6\u4e00\u4e2a\u5f71\u54cd\uff0c\u4f8b\u5982\u8c03\u7528\u51fd\u6570\u65f6\uff0c\u4f60\u7528 String \u3001Number \u6216 Boolean \u4f20\u9012\u53c2\u6570\u8fd9\u5c31\u662f\u6309\u503c\u4f20\u9012\uff0c\u5bf9\u4f20\u5165\u51fd\u6570\u4e2d\u503c\u7684\u4fee\u6539\u4e0d\u4f1a\u5f71\u54cd\u539f\u6765\u7684\u503c\u3002\u7136\u800c\uff0c\u5982\u679c\u4f20\u9012\u7ed9\u51fd\u6570\u7684\u503c\u662f\u5bf9\u8c61\uff0c\u5728\u51fd\u6570\u4e2d\u5bf9\u53c2\u6570\u7684\u4fee\u6539\u4f1a\u5f71\u54cd\u539f\u6765\u7684\u503c\u3002<\/p>\n<h3><a id=\"%E5%9F%BA%E6%9C%AC%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E7%9A%84%E4%BE%8B%E5%AD%90\" class=\"anchor\" aria-hidden=\"true\"><span class=\"octicon octicon-link\"><\/span><\/a>\u57fa\u672c\u6570\u636e\u7c7b\u578b\u7684\u4f8b\u5b50<\/h3>\n<pre><code class=\"language-plain_text\">function changeValue(arg) {\n    arg = &quot;This is a new value&quot;;\n    return arg;\n}\n\nlet person = &quot;Parwinder&quot;\nconsole.log(changeValue(person)); \/\/ This is a new value\nconsole.log(person); \/\/ Parwinder\n<\/code><\/pre>\n<p>\u53ef\u4ee5\u770b\u5230\u5bf9\u51fd\u6570\u4e2d\u7684\u53d8\u91cf\/\u53c2\u6570 arg \u7684\u4fee\u6539\u5e76\u6ca1\u6709\u5f71\u54cd person\u3002<\/p>\n<h3><a id=\"%E5%BC%95%E7%94%A8%E7%B1%BB%E5%9E%8B%E7%9A%84%E4%BE%8B%E5%AD%90\" class=\"anchor\" aria-hidden=\"true\"><span class=\"octicon octicon-link\"><\/span><\/a>\u5f15\u7528\u7c7b\u578b\u7684\u4f8b\u5b50<\/h3>\n<pre><code class=\"language-plain_text\">function changeValue(arg) {\n    arg.name = &quot;Ricky&quot;;\n    return arg;\n}\n\nlet person = {\n    name: &quot;Parwinder&quot;,\n    age: 33\n}\nconsole.log(changeValue(person)); \/\/ { name: 'Ricky', age: 33 }\nconsole.log(person); \/\/ { name: 'Ricky', age: 33 }\n<\/code><\/pre>\n<p>\u5bf9 name \u7684\u4fee\u6539\u5f71\u54cd\u4e86\u539f\u6765\u503c\u7684\uff01<\/p>\n<h3><a id=\"%E5%A6%82%E4%BD%95%E6%8B%B7%E8%B4%9D%E5%AF%B9%E8%B1%A1%EF%BC%9F\" class=\"anchor\" aria-hidden=\"true\"><span class=\"octicon octicon-link\"><\/span><\/a>\u5982\u4f55\u62f7\u8d1d\u5bf9\u8c61\uff1f<\/h3>\n<p>\u82e5\u4f60\u60f3\u62f7\u8d1d\u5bf9\u8c61\u7684\u503c\u800c\u4e0d\u662f\u6309\u5f15\u7528\u4f20\u9012\uff0c\u5219\u9700\u8981\u514b\u9686\u5bf9\u8c61\u3002\u4f60\u53ef\u4ee5\u901a\u8fc7 <strong>spread(&#8230;)<\/strong> \u64cd\u4f5c\u7b26\uff1a<\/p>\n<pre><code class=\"language-plain_text\">let personObject = {\n    firstName: &quot;Parwinder&quot;,\n    lastName: &quot;Bhagat&quot;\n};\n\nlet humanObject = { ...personObject };\n\nconsole.log(personObject.firstName); \/\/ Parwinder\nconsole.log(humanObject.firstName); \/\/ Parwinder\n\npersonObject.firstName = &quot;Ricky&quot;;\n\nconsole.log(personObject.firstName); \/\/ Ricky\nconsole.log(humanObject.firstName); \/\/ Parwinder\n<\/code><\/pre>\n<p>\u4ece\u4e0a\u9762\u4ee3\u7801\u53ef\u4ee5\u770b\u51fa humanObject \u662f personObject \u7684\u62f7\u8d1d\uff0c\u539f\u56e0\u662f\u5f53\u6211\u5bf9 firstName \u5c5e\u6027\u505a\u4fee\u6539\u7684\u65f6\u5019\u53ea\u5f71\u54cd\u4e86 personObject\uff0c\u5e76\u6ca1\u6709\u5bf9 humanObject \u4ea7\u751f\u5f71\u54cd\u3002<\/p>\n<h3><a id=\"%E5%B0%B1%E9%82%A3%E4%B9%88%E7%AE%80%E5%8D%95%EF%BC%9F\" class=\"anchor\" aria-hidden=\"true\"><span class=\"octicon octicon-link\"><\/span><\/a>\u5c31\u90a3\u4e48\u7b80\u5355\uff1f<\/h3>\n<p>\u7b80\u77ed\u7684\u56de\u7b54\uff1a\u4e0d\u3002\u6211\u4eec\u4e0a\u9762\u4f7f\u7528 <strong>spread<\/strong> \u64cd\u4f5c\u7b26\u53ea\u662f\u6d45\u62f7\u8d1d\uff0c\u6d45\u62f7\u8d1d\u53ea\u662f\u8d4b\u503c\u4e86\u5bf9\u8c61\u7684\u7b2c\u4e00\u5c42\u5c5e\u6027\uff0c\u66f4\u6df1\u5c42\u7684\u5c5e\u6027\u4f9d\u65e7\u662f\u5f15\u7528\u7c7b\u578b\u3002<\/p>\n<pre><code class=\"language-plain_text\">let personObject = {\n    firstName: &quot;Parwinder&quot;,\n    lastName: &quot;Bhagat&quot;,\n    vehicles: {\n        car: &quot;Honda Civic&quot;,\n        bike: &quot;Honda Rebel&quot;\n    }\n};\n\nlet humanObject = { ...personObject };\n\nconsole.log(personObject.vehicles.car); \/\/ Honda Civic\nconsole.log(humanObject.vehicles.car); \/\/ Honda Civic\n\npersonObject.firstName = &quot;Ricky&quot;;\n\nconsole.log(personObject.firstName); \/\/ Ricky\nconsole.log(humanObject.firstName); \/\/ Parwinder\n\npersonObject.vehicles.car = &quot;BMW X5&quot;;\n\nconsole.log(personObject.vehicles.car); \/\/ BMW X5\nconsole.log(humanObject.vehicles.car); \/\/ BMW X5\n<\/code><\/pre>\n<p>\u4e0a\u9762\u7684\u4f8b\u5b50\uff0c\u6211\u53ea\u505a\u4e86\u6d45\u62f7\u8d1d\u6240\u4ee5\u5f53\u5bf9\u5176\u4e2d\u4e00\u4e2a\u5bf9\u8c61\u7684 name \u505a\u4fee\u6539\u65f6\u5e76\u6ca1\u6709\u5f71\u54cd\u53e6\u4e00\u4e2a\uff0c\u4f46\u5f53\u6211\u4fee\u6539 car \u65f6\u5219\u4f1a\u5f71\u54cd\u53e6\u4e00\u4e2a\u3002\u8bb0\u4f4f\uff0c\u6d45\u62f7\u8d1d\u53ea\u4f1a\u62f7\u8d1d\u7b2c\u4e00\u5c42\u5c5e\u6027\u66f4\u6df1\u5c42\u7684\u4f9d\u65e7\u662f\u5f15\u7528\u7c7b\u578b\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u539f\u6587\u5730\u5740\uff1ahttps:\/\/dev.to\/bhagatparwinder\/reference-vs-v&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[249,2,20,3],"tags":[6,91,93],"class_list":["post-1023","post","type-post","status-publish","format-standard","hentry","category-javascript","category-all","category-frontend","category-tech","tag-javascript","tag-object","tag-reference"],"_links":{"self":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/1023","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1023"}],"version-history":[{"count":1,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/1023\/revisions"}],"predecessor-version":[{"id":1024,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/1023\/revisions\/1024"}],"wp:attachment":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1023"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1023"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1023"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}