JS的33个概念—Object.assign()和Object.create()

骑猪看日落 2021-11-26 23:22 354阅读 0赞

### 1.Object.assign ###

**定义**

> Object.assign()主要是将所有**可枚举属性**的值从一个或多个源对象复制到目标对象，同时返回目标对象

语法如下所示：

> `Object.assign(target, ...sources)`

其中 `target` 是目标对象，`sources` 是源对象，可以有多个，返回修改后的目标对象 `target`。

如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。后来的源对象的属性将类似地覆盖早先的属性。

**示例**

示例1

我们知道浅拷贝就是拷贝第一层的**基本类型值**，以及第一层的**引用类型地址**。

// 木易杨
    // 第一步
    let a = {
        name: "advanced",
        age: 18
    }
    let b = {
        name: "muyiy",
        book: {
            title: "You Don't Know JS",
            price: "45"
        }
    }
    let c = Object.assign(a, b);
    console.log(c);
    // {
    //     name: "muyiy",
    //  age: 18,
    //     book: {title: "You Don't Know JS", price: "45"}
    // } 
    console.log(a === c);
    // true
    
    // 第二步
    b.name = "change";
    b.book.price = "55";
    console.log(b);
    // {
    //     name: "change",
    //     book: {title: "You Don't Know JS", price: "55"}
    // } 
    
    // 第三步
    console.log(a);
    // {
    //     name: "muyiy",
    //  age: 18,
    //     book: {title: "You Don't Know JS", price: "55"}
    // }

1、在第一步中，使用 `Object.assign` 把源对象 b 的值复制到目标对象 a 中，这里把返回值定义为对象 c，可以看出 b 会替换掉 a 中具有相同键的值，即如果目标对象（a）中的属性具有相同的键，则属性将被源对象（b）中的属性覆盖。这里需要注意下，返回对象 c 就是 目标对象 a。

2、在第二步中，修改源对象 b 的基本类型值（name）和引用类型值（book）。

3、在第三步中，浅拷贝之后目标对象 a 的基本类型值没有改变，但是引用类型值发生了改变，因为 `Object.assign()` 拷贝的是属性值。假如源对象的属性值是一个指向对象的引用，它也**只拷贝那个引用地址**。

示例2

**`String` 类型和 `Symbol` 类型的属性都会被拷贝，而且不会跳过那些值为 `null` 或`undefined` 的源对象。**

// 木易杨
    // 第一步
    let a = {
        name: "muyiy",
        age: 18
    }
    let b = {
        b1: Symbol("muyiy"),
        b2: null,
        b3: undefined
    }
    let c = Object.assign(a, b);
    console.log(c);
    // {
    //     name: "muyiy",
    //  age: 18,
    //     b1: Symbol(muyiy),
    //     b2: null,
    //     b3: undefined
    // } 
    console.log(a === c);
    // true

**Object.assign 模拟实现**

实现一个 `Object.assign` 大致思路如下：

1、判断原生 `Object` 是否支持该函数，如果不存在的话创建一个函数 `assign`，并使用 `Object.defineProperty` 将该函数绑定到 `Object` 上。

2、判断参数是否正确（目标对象不能为空，我们可以直接设置\{\}传递进去,但必须设置值）

3、使用 `Object()` 转成对象，并保存为 to，最后返回这个对象 to

4、使用 `for..in` 循环遍历出所有可枚举的自有属性。并复制给新的目标对象(hasOwnProperty返回非原型链上的属性)

实现代码如下，这里为了验证方便，使用 `assign2` 代替 `assign`。注意此模拟实现不支持 `symbol` 属性，因为`ES5` 中根本没有 `symbol` 。

// 木易杨
    if (typeof Object.assign2 != 'function') {
      // Attention 1
      Object.defineProperty(Object, "assign2", {
        value: function (target) {
          'use strict';
          if (target == null) { // Attention 2
            throw new TypeError('Cannot convert undefined or null to object');
          }
    
          // Attention 3
          var to = Object(target);
    
          for (var index = 1; index < arguments.length; index++) {
            var nextSource = arguments[index];
    
            if (nextSource != null) {  // Attention 2
              // Attention 4
              for (var nextKey in nextSource) {
                if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
                  to[nextKey] = nextSource[nextKey];
                }
              }
            }
          }
          return to;
        },
        writable: true,
        configurable: true
      });
    }

### 2.Object.create() ###

了解

首先看一下下面的代码段，来理解一下object(o)这个函数（Object.create()只传一个参数的情况下，就是下面的原理）

控制台打印

![20190625125812410.png][]

然后画一画原型链，就明白为什么了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

**现在看一下Object.create()**

var person = {
        name: "Nicholas",
        friends: ["Shelby", "Court", "Van"]
    };
    var anotherPerson = Object.create(person);
    console.log("Object.create---------------");
    console.log(anotherPerson)

打印出来

![20190625130215872.png][]

object.create()传两个参数的情况

Object.create() 如果加上第二个参数，则会覆盖原型上的同名属性

上面代码控制台会打印，就会知道为什么说是覆盖了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]

如果只想让一个对象与另一个对象保持类似的情况下，原型式继承是完全可以胜任的。不过别忘了，包含引用类型值的属性始终都会共享相应的值，就像使用原型模式一样。看下面例子

关于这块的详细内容请移步[《面向对象（继承）--原型式继承04》][--_04]

[20190625125812410.png]: /images/20211126/4e7e1b9b01e84bc5a006ae77a61effeb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20211126/f27966a47c94415cb48c3dfe05c57fd5.png
[20190625130215872.png]: /images/20211126/2ea910558aee49f2abb85e44e37cdc4c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20211126/1145cca99ec5458da1db2eb5f57a03ce.png
[--_04]: https://blog.csdn.net/jiaojsun/article/details/82969436