深入剖析 ES6 和 ES7 中的 Object.assign

在 JavaScript 中,Object.assign 是一个非常有用的方法,它可以将多个对象合并成一个对象。在 ES6 和 ES7 中,Object.assign 得到了进一步的加强和扩展,本文将深入剖析这个方法。

ES6 中的 Object.assign

在 ES6 中,Object.assign 的基本用法如下:

----- ------ - - -- - --
----- ------ - - -- - --
----- ------ - --------------------- --------
-------------------- -- - -- -- -- - -

在这个例子中,我们定义了两个对象 target 和 source,使用 Object.assign 将 source 对象的属性合并到 target 对象中,并将合并后的结果赋值给 result 对象。最终输出的结果是 { a: 1, b: 2 }。

需要注意的是,Object.assign 是浅拷贝,如果被合并的对象中存在引用类型的属性,那么只会将引用复制到目标对象中,而不会复制引用对象本身。例如:

----- ------ - ---
----- ------ - - ---- - -- - - --
----- ------ - --------------------- --------
------------ - --
-------------------- -- - ---- - -- - - -

在这个例子中,source 对象中的 obj 属性是一个对象,我们将其合并到 target 对象中,然后修改 source.obj.a 的值为 2。最终输出的结果是 { obj: { a: 2 } },说明 target 对象中的 obj 属性和 source 对象中的 obj 属性引用的是同一个对象。

ES7 中的 Object.assign

在 ES7 中,Object.assign 得到了进一步的加强和扩展。在 ES7 中,Object.assign 不仅可以合并对象,还可以合并类中的属性和方法。例如:

----- ------ -
  ----------------- ---- -
    --------- - -----
    -------- - ----
  -

  ---------- -
    ------------------- -- ---- -- ------------- --- ----------- ----- -------
  -
-

----- ------ - ----------------- --- ------------- -----
-------------------- -- - ----- ------ ---- -- -
------------------ -- ------ -- ---- -- ---- --- -- ----- ----

在这个例子中,我们定义了一个 Person 类,使用 Object.assign 将其实例化后的对象合并到一个空对象中,最终输出的结果是 { name: 'Tom', age: 18 },并且我们还可以通过合并后的对象调用 Person 类中的方法 sayHello。

需要注意的是,如果合并的对象中存在同名属性,后面的属性会覆盖前面的属性。例如:

----- ------ - - -- - --
----- ------- - - -- - --
----- ------- - - -- -- -- - --
----- ------ - --------------------- -------- ---------
-------------------- -- - -- -- -- - -

在这个例子中,我们定义了三个对象 target、source1 和 source2,其中 source1 和 source2 都有一个属性 a,而 source2 还有一个属性 b。使用 Object.assign 将这三个对象合并到 target 对象中,最终输出的结果是 { a: 3, b: 4 },说明 source2 中的属性 a 覆盖了 source1 中的属性 a。

总结

Object.assign 是一个非常有用的方法,它可以将多个对象合并成一个对象,并且在 ES7 中还可以合并类中的属性和方法。需要注意的是,Object.assign 是浅拷贝,如果被合并的对象中存在引用类型的属性,那么只会将引用复制到目标对象中,而不会复制引用对象本身。同时,如果合并的对象中存在同名属性,后面的属性会覆盖前面的属性。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/6603d68ad10417a222052823