{"id":606,"date":"2019-11-12T19:53:20","date_gmt":"2019-11-12T11:53:20","guid":{"rendered":"http:\/\/blog.xrhoujie.com\/?p=606"},"modified":"2019-11-12T19:53:20","modified_gmt":"2019-11-12T11:53:20","slug":"object-assign-%e5%8e%9f%e7%90%86%e5%8f%8a%e5%85%b6%e5%ae%9e%e7%8e%b0%e8%bd%ac","status":"publish","type":"post","link":"http:\/\/blog.xrhoujie.com\/?p=606","title":{"rendered":"Object.assign \u539f\u7406\u53ca\u5176\u5b9e\u73b0(\u8f6c)"},"content":{"rendered":"

\u672c\u7bc7\u6587\u7ae0\u4f1a\u5148\u4ecb\u7ecd\u6d45\u62f7\u8d1d\u00a0Object.assign<\/code>\u00a0\u7684\u5b9e\u73b0\u539f\u7406\uff0c\u7136\u540e\u5e26\u4f60\u624b\u52a8\u5b9e\u73b0\u4e00\u4e2a\u6d45\u62f7\u8d1d<\/p>\n

 <\/p>\n

\n
\n

\u6d45\u62f7\u8d1d Object.assign<\/code><\/h2>\n

\u4e0a\u7bc7\u6587\u7ae0\u4ecb\u7ecd\u4e86\u5176\u5b9a\u4e49\u548c\u4f7f\u7528\uff0c\u4e3b\u8981\u662f\u5c06\u6240\u6709\u53ef\u679a\u4e3e\u5c5e\u6027<\/strong>\u7684\u503c\u4ece\u4e00\u4e2a\u6216\u591a\u4e2a\u6e90\u5bf9\u8c61\u590d\u5236\u5230\u76ee\u6807\u5bf9\u8c61\uff0c\u540c\u65f6\u8fd4\u56de\u76ee\u6807\u5bf9\u8c61\u3002\uff08\u6765\u81ea MDN\uff09<\/p>\n

\u8bed\u6cd5\u5982\u4e0b\u6240\u793a\uff1a<\/p>\n

Object.assign(target, ...sources)<\/code><\/p><\/blockquote>\n

\u5176\u4e2d target<\/code> \u662f\u76ee\u6807\u5bf9\u8c61\uff0csources<\/code> \u662f\u6e90\u5bf9\u8c61\uff0c\u53ef\u4ee5\u6709\u591a\u4e2a\uff0c\u8fd4\u56de\u4fee\u6539\u540e\u7684\u76ee\u6807\u5bf9\u8c61 target<\/code>\u3002<\/p>\n

\u5982\u679c\u76ee\u6807\u5bf9\u8c61\u4e2d\u7684\u5c5e\u6027\u5177\u6709\u76f8\u540c\u7684\u952e\uff0c\u5219\u5c5e\u6027\u5c06\u88ab\u6e90\u5bf9\u8c61\u4e2d\u7684\u5c5e\u6027\u8986\u76d6\u3002\u540e\u6765\u7684\u6e90\u5bf9\u8c61\u7684\u5c5e\u6027\u5c06\u7c7b\u4f3c\u5730\u8986\u76d6\u65e9\u5148\u7684\u5c5e\u6027\u3002<\/p>\n

\u793a\u4f8b1<\/h3>\n

\u6211\u4eec\u77e5\u9053\u6d45\u62f7\u8d1d\u5c31\u662f\u62f7\u8d1d\u7b2c\u4e00\u5c42\u7684\u57fa\u672c\u7c7b\u578b\u503c<\/strong>\uff0c\u4ee5\u53ca\u7b2c\u4e00\u5c42\u7684\u5f15\u7528\u7c7b\u578b\u5730\u5740<\/strong>\u3002<\/p>\n

\/\/ \u6728\u6613\u6768<\/span>\r\n\/\/ \u7b2c\u4e00\u6b65<\/span>\r\nlet<\/span> a = {\r\n    name<\/span>: \"advanced\"<\/span>,\r\n    age<\/span>: 18<\/span>\r\n}\r\nlet<\/span> b = {\r\n    name<\/span>: \"muyiy\"<\/span>,\r\n    book<\/span>: {\r\n        title<\/span>: \"You Don't Know JS\"<\/span>,\r\n        price<\/span>: \"45\"<\/span>\r\n    }\r\n}\r\nlet<\/span> c = Object<\/span>.assign(a, b);\r\nconsole<\/span>.log(c);\r\n\/\/ {<\/span>\r\n\/\/ \tname: \"muyiy\",<\/span>\r\n\/\/  age: 18,<\/span>\r\n\/\/ \tbook: {title: \"You Don't Know JS\", price: \"45\"}<\/span>\r\n\/\/ } <\/span>\r\nconsole<\/span>.log(a === c);\r\n\/\/ true<\/span>\r\n\r\n\/\/ \u7b2c\u4e8c\u6b65<\/span>\r\nb.name = \"change\"<\/span>;\r\nb.book.price = \"55\"<\/span>;\r\nconsole<\/span>.log(b);\r\n\/\/ {<\/span>\r\n\/\/ \tname: \"change\",<\/span>\r\n\/\/ \tbook: {title: \"You Don't Know JS\", price: \"55\"}<\/span>\r\n\/\/ } <\/span>\r\n\r\n\/\/ \u7b2c\u4e09\u6b65<\/span>\r\nconsole<\/span>.log(a);\r\n\/\/ {<\/span>\r\n\/\/ \tname: \"muyiy\",<\/span>\r\n\/\/  age: 18,<\/span>\r\n\/\/ \tbook: {title: \"You Don't Know JS\", price: \"55\"}<\/span>\r\n\/\/ } <\/span>\r\n\u590d\u5236\u4ee3\u7801<\/span><\/code><\/pre>\n
1\u3001\u5728\u7b2c\u4e00\u6b65\u4e2d\uff0c\u4f7f\u7528 Object.assign<\/code> \u628a\u6e90\u5bf9\u8c61 b \u7684\u503c\u590d\u5236\u5230\u76ee\u6807\u5bf9\u8c61 a \u4e2d\uff0c\u8fd9\u91cc\u628a\u8fd4\u56de\u503c\u5b9a\u4e49\u4e3a\u5bf9\u8c61 c\uff0c\u53ef\u4ee5\u770b\u51fa b \u4f1a\u66ff\u6362\u6389 a \u4e2d\u5177\u6709\u76f8\u540c\u952e\u7684\u503c\uff0c\u5373\u5982\u679c\u76ee\u6807\u5bf9\u8c61\uff08a\uff09\u4e2d\u7684\u5c5e\u6027\u5177\u6709\u76f8\u540c\u7684\u952e\uff0c\u5219\u5c5e\u6027\u5c06\u88ab\u6e90\u5bf9\u8c61\uff08b\uff09\u4e2d\u7684\u5c5e\u6027\u8986\u76d6\u3002\u8fd9\u91cc\u9700\u8981\u6ce8\u610f\u4e0b\uff0c\u8fd4\u56de\u5bf9\u8c61 c \u5c31\u662f \u76ee\u6807\u5bf9\u8c61 a\u3002<\/p>\n
2\u3001\u5728\u7b2c\u4e8c\u6b65\u4e2d\uff0c\u4fee\u6539\u6e90\u5bf9\u8c61 b \u7684\u57fa\u672c\u7c7b\u578b\u503c\uff08name\uff09\u548c\u5f15\u7528\u7c7b\u578b\u503c\uff08book\uff09\u3002<\/p>\n
3\u3001\u5728\u7b2c\u4e09\u6b65\u4e2d\uff0c\u6d45\u62f7\u8d1d\u4e4b\u540e\u76ee\u6807\u5bf9\u8c61 a \u7684\u57fa\u672c\u7c7b\u578b\u503c\u6ca1\u6709\u6539\u53d8\uff0c\u4f46\u662f\u5f15\u7528\u7c7b\u578b\u503c\u53d1\u751f\u4e86\u6539\u53d8\uff0c\u56e0\u4e3a Object.assign()<\/code> \u62f7\u8d1d\u7684\u662f\u5c5e\u6027\u503c\u3002\u5047\u5982\u6e90\u5bf9\u8c61\u7684\u5c5e\u6027\u503c\u662f\u4e00\u4e2a\u6307\u5411\u5bf9\u8c61\u7684\u5f15\u7528\uff0c\u5b83\u4e5f\u53ea\u62f7\u8d1d\u90a3\u4e2a\u5f15\u7528\u5730\u5740<\/strong>\u3002<\/p>\n
\u793a\u4f8b2<\/h3>\n
String<\/code> \u7c7b\u578b\u548c Symbol<\/code> \u7c7b\u578b\u7684\u5c5e\u6027\u90fd\u4f1a\u88ab\u62f7\u8d1d\uff0c\u800c\u4e14\u4e0d\u4f1a\u8df3\u8fc7\u90a3\u4e9b\u503c\u4e3a null<\/code> \u6216 undefined<\/code> \u7684\u6e90\u5bf9\u8c61\u3002<\/p>\n
\/\/ \u6728\u6613\u6768<\/span>\r\n\/\/ \u7b2c\u4e00\u6b65<\/span>\r\nlet<\/span> a = {\r\n    name<\/span>: \"muyiy\"<\/span>,\r\n    age<\/span>: 18<\/span>\r\n}\r\nlet<\/span> b = {\r\n    b1<\/span>: Symbol<\/span>(\"muyiy\"<\/span>),\r\n    b2<\/span>: null<\/span>,\r\n    b3<\/span>: undefined<\/span>\r\n}\r\nlet<\/span> c = Object<\/span>.assign(a, b);\r\nconsole<\/span>.log(c);\r\n\/\/ {<\/span>\r\n\/\/ \tname: \"muyiy\",<\/span>\r\n\/\/  age: 18,<\/span>\r\n\/\/ \tb1: Symbol(muyiy),<\/span>\r\n\/\/ \tb2: null,<\/span>\r\n\/\/ \tb3: undefined<\/span>\r\n\/\/ } <\/span>\r\nconsole<\/span>.log(a === c);\r\n\/\/ true<\/span>\r\n\u590d\u5236\u4ee3\u7801<\/span><\/code><\/pre>\n
Object.assign<\/code> \u6a21\u62df\u5b9e\u73b0<\/h2>\n
\u5b9e\u73b0\u4e00\u4e2a Object.assign<\/code> \u5927\u81f4\u601d\u8def\u5982\u4e0b\uff1a<\/p>\n
1\u3001\u5224\u65ad\u539f\u751f Object<\/code> \u662f\u5426\u652f\u6301\u8be5\u51fd\u6570\uff0c\u5982\u679c\u4e0d\u5b58\u5728\u7684\u8bdd\u521b\u5efa\u4e00\u4e2a\u51fd\u6570 assign<\/code>\uff0c\u5e76\u4f7f\u7528 Object.defineProperty<\/code> \u5c06\u8be5\u51fd\u6570\u7ed1\u5b9a\u5230 Object<\/code> \u4e0a\u3002<\/p>\n
2\u3001\u5224\u65ad\u53c2\u6570\u662f\u5426\u6b63\u786e\uff08\u76ee\u6807\u5bf9\u8c61\u4e0d\u80fd\u4e3a\u7a7a\uff0c\u6211\u4eec\u53ef\u4ee5\u76f4\u63a5\u8bbe\u7f6e{}\u4f20\u9012\u8fdb\u53bb,\u4f46\u5fc5\u987b\u8bbe\u7f6e\u503c\uff09\u3002<\/p>\n
3\u3001\u4f7f\u7528 Object()<\/code> \u8f6c\u6210\u5bf9\u8c61\uff0c\u5e76\u4fdd\u5b58\u4e3a to\uff0c\u6700\u540e\u8fd4\u56de\u8fd9\u4e2a\u5bf9\u8c61 to\u3002<\/p>\n
4\u3001\u4f7f\u7528 for..in<\/code> \u5faa\u73af\u904d\u5386\u51fa\u6240\u6709\u53ef\u679a\u4e3e\u7684\u81ea\u6709\u5c5e\u6027\u3002\u5e76\u590d\u5236\u7ed9\u65b0\u7684\u76ee\u6807\u5bf9\u8c61\uff08\u4f7f\u7528 hasOwnProperty<\/code> \u83b7\u53d6\u81ea\u6709\u5c5e\u6027\uff0c\u5373\u975e\u539f\u578b\u94fe\u4e0a\u7684\u5c5e\u6027\uff09\u3002<\/p>\n
\u5b9e\u73b0\u4ee3\u7801\u5982\u4e0b\uff0c\u8fd9\u91cc\u4e3a\u4e86\u9a8c\u8bc1\u65b9\u4fbf\uff0c\u4f7f\u7528 assign2<\/code> \u4ee3\u66ff assign<\/code>\u3002\u6ce8\u610f\u6b64\u6a21\u62df\u5b9e\u73b0\u4e0d\u652f\u6301 symbol<\/code> \u5c5e\u6027\uff0c\u56e0\u4e3aES5<\/code> \u4e2d\u6839\u672c\u6ca1\u6709 symbol<\/code> \u3002<\/p>\n
\/\/ \u6728\u6613\u6768<\/span>\r\nif<\/span> (typeof<\/span> Object<\/span>.assign2 != 'function'<\/span>) {\r\n  \/\/ Attention 1<\/span>\r\n  Object<\/span>.defineProperty(Object<\/span>, \"assign2\"<\/span>, {\r\n    value<\/span>: function<\/span> (target<\/span>) <\/span>{\r\n      'use strict'<\/span>;\r\n      if<\/span> (target == null<\/span>) { \/\/ Attention 2<\/span>\r\n        throw<\/span> new<\/span> TypeError<\/span>('Cannot convert undefined or null to object'<\/span>);\r\n      }\r\n\r\n      \/\/ Attention 3<\/span>\r\n      var<\/span> to = Object<\/span>(target);\r\n        \r\n      for<\/span> (var<\/span> index = 1<\/span>; index < arguments<\/span>.length; index++) {\r\n        var<\/span> nextSource = arguments<\/span>[index];\r\n\r\n        if<\/span> (nextSource != null<\/span>) {  \/\/ Attention 2<\/span>\r\n          \/\/ Attention 4<\/span>\r\n          for<\/span> (var<\/span> nextKey in<\/span> nextSource) {\r\n            if<\/span> (Object<\/span>.prototype.hasOwnProperty.call(nextSource, nextKey)) {\r\n              to[nextKey] = nextSource[nextKey];\r\n            }\r\n          }\r\n        }\r\n      }\r\n      return<\/span> to;\r\n    },\r\n    writable<\/span>: true<\/span>,\r\n    configurable<\/span>: true<\/span>\r\n  });\r\n}\r\n\u590d\u5236\u4ee3\u7801<\/span><\/code><\/pre>\n
\u6d4b\u8bd5\u4e00\u4e0b<\/p>\n
\/\/ \u6728\u6613\u6768<\/span>\r\n\/\/ \u6d4b\u8bd5\u7528\u4f8b<\/span>\r\nlet<\/span> a = {\r\n    name<\/span>: \"advanced\"<\/span>,\r\n    age<\/span>: 18<\/span>\r\n}\r\nlet<\/span> b = {\r\n    name<\/span>: \"muyiy\"<\/span>,\r\n    book<\/span>: {\r\n        title<\/span>: \"You Don't Know JS\"<\/span>,\r\n        price<\/span>: \"45\"<\/span>\r\n    }\r\n}\r\nlet<\/span> c = Object<\/span>.assign2(a, b);\r\nconsole<\/span>.log(c);\r\n\/\/ {<\/span>\r\n\/\/ \tname: \"muyiy\",<\/span>\r\n\/\/  age: 18,<\/span>\r\n\/\/ \tbook: {title: \"You Don't Know JS\", price: \"45\"}<\/span>\r\n\/\/ } <\/span>\r\nconsole<\/span>.log(a === c);\r\n\/\/ true<\/span><\/code><\/pre>\n<\/div>\n
\u4f5c\u8005\uff1a\u6728\u6613\u6768\u8bf4
\n\u94fe\u63a5\uff1ahttps:\/\/juejin.im\/post\/5c31e5c4e51d45524975d05a
\n\u6765\u6e90\uff1a\u6398\u91d1
\n\u8457\u4f5c\u6743\u5f52\u4f5c\u8005\u6240\u6709\u3002\u5546\u4e1a\u8f6c\u8f7d\u8bf7\u8054\u7cfb\u4f5c\u8005\u83b7\u5f97\u6388\u6743\uff0c\u975e\u5546\u4e1a\u8f6c\u8f7d\u8bf7\u6ce8\u660e\u51fa\u5904\u3002<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"
\u672c\u7bc7\u6587\u7ae0\u4f1a\u5148\u4ecb\u7ecd\u6d45\u62f7\u8d1d\u00a0Object.assign\u00a0\u7684\u5b9e\u73b0\u539f\u7406\uff0c\u7136\u540e\u5e26\u4f60\u624b\u52a8\u5b9e\u73b0\u4e00\u4e2a\u6d45\u62f7\u8d1d   \u6d45\u62f7 […]<\/p>\n","protected":false},"author":1,"featured_media":180,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[10],"tags":[19],"_links":{"self":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/606"}],"collection":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=606"}],"version-history":[{"count":1,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/606\/revisions"}],"predecessor-version":[{"id":607,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/606\/revisions\/607"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/media\/180"}],"wp:attachment":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=606"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=606"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=606"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}