javascript系列--Object.assign实现浅拷贝的原理以及实现

时间  2020-05-22
标签 javascript 系列 object.assign object assign 实现 拷贝 原理 以及 栏目 JavaScript 繁體版
原文   原文链接

1、前言html

以前在前面一篇学习了赋值，浅拷贝和深拷贝。介绍了这三者的相关知识和区别。node

传送门：https://www.mwcxs.top/page/592.html数组

本文会介绍浅拷贝Object.assign()的实现原理，而后我们试着实现一个浅拷贝。函数

 

2、浅拷贝Object.assign()学习

什么是浅拷贝？浅拷贝就是建立一个新对象，这个对象有着原始对象属性值的一份精确拷贝。测试

浅拷贝Object.assign()是什么？主要将全部可枚举属性的值从一个或者多个数据源对象复制到目标对象，同时返回目标对象。es5

语法规则：prototype

Object.assign(target,...sources)

其中target是目标对象，source是源对象，能够是多个，修改返回的是目标对象target。3d

一、若是目标对象中的属性具备相同的属性键，则属性将被源对象中的属性覆盖；code

二、源对象的属相将相似覆盖早先的属性。

强调两点：

一、可枚举的属性（自有属性）

二、string或者symbol类型是能够被直接分配的

 

2.1栗子1

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

// saucxs
// 第一步
let a = {
    name: "advanced",
    age: 18
}
let b = {
    name: "saucxs",
    book: {
        title: "You Don't Know JS",
        price: "45"
    }
}
let c = Object.assign(a, b);
console.log(c);
// {
// name: "saucxs",
// 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: "saucxs",
// age: 18,
// book: {title: "You Don't Know JS", price: "55"}
// }

分析：

一、第一步中，使用Object.assign把源对象b的值复制到目标对象a中，这里把返回值定义为对象c，能够看出b会替换掉a中具备相同键的值，即若是目标对象a中的属性具备相同的键，则属相将被源对象b中的属性覆盖。返回的对象c就是目标对象a。

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

三、第三步中，浅拷贝以后目标对象a的基本类型值没有改变，可是引用类型值发生了改变，由于Object.assign()拷贝的是属性值。加入源对象的属性值是一个指向对象的引用，只拷贝那个引用地址。

 

2.2栗子2

string类型和symbol类型的属性都会被拷贝，并且不会跳过那些值为null或undefined的源对象。

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

 

3、Object.assign模拟实现

实现Object.assign模拟实现大体思路：

一、判断原生的Object是否支持assign这个函数，若是不存在的话就会建立一个assign函数，并使用Object.defineProperty将函数绑定到Object上。

二、判断参数是否正确（目标参数不能为空，能够直接设置{}传递进去，可是必须有值）。

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

四、使用for in 循环遍历出全部的可枚举的自有属性，并复制给新的目标对象（使用hasOwnProperty获取自有属性，即非原型链上的属性）

参考原生，实现代码以下，使用assign2代替assign。此处的模拟不支持symbol属性，由于es5中没有symbol。

// saucxs
if (typeof Object.assign2 != 'function') {
  // 注意 1
  Object.defineProperty(Object, "assign2", {
    value: function (target) {
      'use strict';
      if (target == null) { // 注意 2
        throw new TypeError('Cannot convert undefined or null to object');
      }

      // 注意 3
      var to = Object(target);
        
      for (var index = 1; index < arguments.length; index++) {
        var nextSource = arguments[index];

        if (nextSource != null) {  // 注意 2
          // 注意 4
          for (var nextKey in nextSource) {
            if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
              to[nextKey] = nextSource[nextKey];
            }
          }
        }
      }
      return to;
    },
    writable: true,
    configurable: true
  });
}

测试一下：

// saucxs
// 测试用例
let a = {
    name: "advanced",
    age: 18
}
let b = {
    name: "saucxs",
    book: {
        title: "You Don't Know JS",
        price: "45"
    }
}
let c = Object.assign2(a, b);
console.log(c);
// {
// name: "saucxs",
// age: 18,
// book: {title: "You Don't Know JS", price: "45"}
// } 
console.log(a === c);
// true

 

3.1 注意1：可枚举性

原生状况下挂载在Object上的属性时不可枚举的，可是直接在Object上挂载属性a以后就能够枚举的，因此必须使用Object.defineProperty，并设置`enumerable: false` 以及 `writable: true`，`configurable: true`。

// saucxs
for(var i in Object) {
    console.log(Object[i]);
}
// 无输出

Object.keys( Object );
// []

上面说明，原生的Object上的属性不可枚举。

咱们可使用2种方法查看Object.assign是否可枚举，使用Object.getOwnPropertyDescriptor或者Object.propertyIsEnumberable均可以，其中propertyIsEnumerable(..)会检查给定的属性名是否直接存在于对象中（而不是在原型链上）而且知足enumerable:true。具体用法以下：

// saucxs
Object.getOwnPropertyDescriptor(Object, "assign");
// {
// value: ƒ, 
// writable: true, // 可写
// enumerable: false, // 不可枚举，注意这里是 false
// configurable: true // 可配置
// }
// saucxs
Object.propertyIsEnumerable("assign");
// false

说明Object.assign是不可枚举的。

 

直接在Object上挂载属性a以后是能够枚举的。咱们来看一下代码：

// saucxs
Object.a = function () {
    console.log("log a");
}

Object.getOwnPropertyDescriptor(Object, "a");
// {
// value: ƒ, 
// writable: true, 
// enumerable: true, // 注意这里是 true
// configurable: true
// }

Object.propertyIsEnumerable("a");
// true

 

因此要实现 `Object.assign` 必须使用 `Object.defineProperty`，并设置 `writable: true, enumerable: false, configurable: true`，固然默认状况下不设置就是 `false`。

// saucxs
Object.defineProperty(Object, "b", {
    value: function() {
        console.log("log b");
    }
});

Object.getOwnPropertyDescriptor(Object, "b");
// {
// value: ƒ, 
// writable: false, // 注意这里是 false
// enumerable: false, // 注意这里是 false
// configurable: false // 注意这里是 false
// }

 

模拟实现涉及到代码

// saucxs
// 判断原生 Object 中是否存在函数 assign2
if (typeof Object.assign2 != 'function') {
  // 使用属性描述符定义新属性 assign2
  Object.defineProperty(Object, "assign2", {
    value: function (target) { 
      ...
    },
    // 默认值是 false，即 enumerable: false
    writable: true,
    configurable: true
  });
}

 

3.2 注意2：判断参数是否正确

有些文章判断参数是否正确是这样的。

// saucxs
if (target === undefined || target === null) {
	throw new TypeError('Cannot convert undefined or null to object');
}

这样确定没问题，可是这样写没有必要，由于 `undefined` 和 `null` 是相等的（高程 3 P52 ），即 `undefined == null` 返回 `true`，只须要按照以下方式判断就行了。

// saucxs
if (target == null) { // TypeError if undefined or null
	throw new TypeError('Cannot convert undefined or null to object');
}

 

3.3 注意3：原始类型被包装为对象

// saucxs
var v1 = "abc";
var v2 = true;
var v3 = 10;
var v4 = Symbol("foo");

var obj = Object.assign({}, v1, null, v2, undefined, v3, v4); 
// 原始类型会被包装，null 和 undefined 会被忽略。
// 注意，只有字符串的包装对象才可能有自身可枚举属性。
console.log(obj); 
// { "0": "a", "1": "b", "2": "c" }

上面代码中的源对象 v二、v三、v4 实际上被忽略了，缘由在于他们自身**没有可枚举属性**。

 

// saucxs var v1 = "abc";
var v2 = true;
var v3 = 10;
var v4 = Symbol("foo");
var v5 = null;

// Object.keys(..) 返回一个数组，包含全部可枚举属性
// 只会查找对象直接包含的属性，不查找[[Prototype]]链
Object.keys( v1 ); // [ '0', '1', '2' ]
Object.keys( v2 ); // []
Object.keys( v3 ); // []
Object.keys( v4 ); // []
Object.keys( v5 ); // TypeError: Cannot convert undefined or null to object

上面代码说明：Object.keys(..)返回一个数组，包含全部可枚举的属性，只会查找对象直接包含的属性，而不会查找[[prototype]]链。

 

// Object.getOwnPropertyNames(..) 返回一个数组，包含全部属性，不管它们是否可枚举
// 只会查找对象直接包含的属性，不查找[[Prototype]]链
Object.getOwnPropertyNames( v1 ); // [ '0', '1', '2', 'length' ]
Object.getOwnPropertyNames( v2 ); // []
Object.getOwnPropertyNames( v3 ); // []
Object.getOwnPropertyNames( v4 ); // []
Object.getOwnPropertyNames( v5 ); 
// TypeError: Cannot convert undefined or null to object

上面代码说明：Object.getOwnPropertyNames(..)返回一个数组，保护焊全部属性，不管他们是否能够枚举，只会查找对象直接包含的属性，不查找[[prototype]]链。

 

可是这样是能够执行的：

// saucxs
var a = "abc";
var b = {
    v1: "def",
    v2: true,
    v3: 10,
    v4: Symbol("foo"),
    v5: null,
    v6: undefined
}

var obj = Object.assign(a, b); 
console.log(obj);
// { 
// [String: 'abc']
// v1: 'def',
// v2: true,
// v3: 10,
// v4: Symbol(foo),
// v5: null,
// v6: undefined 
// }

为何？由于undefined，true等不适做为对象，而是做为对象b的属性值，对象b是可枚举的。

// saucxs
// 接上面的代码
Object.keys( b ); // [ 'v1', 'v2', 'v3', 'v4', 'v5', 'v6' ]

 

这里其实又能够看出一个问题来，那就是目标对象是原始类型，会包装成对象，对应上面的代码就是目标对象 a 会被包装成 `[String: 'abc']`，那模拟实现时应该如何处理呢？很简单，使用 `Object(..)` 就能够了。

// saucxs
var a = "abc";
console.log( Object(a) );
// {0: 'a', 1: 'b', 2: 'c'}

 

咱们再来看看下面代码能不能执行：

// saucxs
var a = "abc";
var b = "def";
Object.assign(a, b); // TypeError: Cannot assign to read only property '0' of object '[object String]'

仍是会报错的，缘由在于：Object('abc')时候，其属性描述符writable为不可写，即writeable: false。

// saucxs
var myObject = Object( "abc" );

Object.getOwnPropertyNames( myObject );
// [ '0', '1', '2', 'length' ]

Object.getOwnPropertyDescriptor(myObject, "0");
// { 
// value: 'a',
// writable: false, // 注意这里
// enumerable: true,
// configurable: false 
// }

 

3.4 注意4：存在性

如何在不访问属性值的状况下判断对象中是否存在某个属性，看下面代码：

// saucxs
var anotherObject = {
    a: 1
};

// 建立一个关联到 anotherObject 的对象
var myObject = Object.create( anotherObject );
myObject.b = 2;

("a" in myObject); // true
("b" in myObject); // true

myObject.hasOwnProperty( "a" ); // false
myObject.hasOwnProperty( "b" ); // true

使用in和hasOwnProperty方法，区别以下:

一、in 操做符会检查属性是否在对象及其[[propertype]]原型链中；

二、hasOwnProperty(..)只会检查是否在myObject对象中，不会检查[[prototype]]原型链中。

Object.assign方法确定是不会拷贝原型链上的属性，因此模拟实现时须要用hasOwnProperty(..)判断处理下，可是直接使用myObject.hasOwnProperty(..)是有问题的，由于有的对象可能没有链接到Object.prototype上（经过Object.create(null)来建立），这种状况下，使用myObject.hasOwnProperty(..)就会失败。

// saucxs
var myObject = Object.create( null );
myObject.b = 2;

("b" in myObject); 
// true

myObject.hasOwnProperty( "b" );
// TypeError: myObject.hasOwnProperty is not a function

解决办法，使用call就能够了，以下：

// saucxs
var myObject = Object.create( null );
myObject.b = 2;

Object.prototype.hasOwnProperty.call(myObject, "b");
// true

因此具体到本次模拟实现中，相关代码以下。

// saucxs
// 使用 for..in 遍历对象 nextSource 获取属性值
// 此处会同时检查其原型链上的属性
for (var nextKey in nextSource) {
    // 使用 hasOwnProperty 判断对象 nextSource 中是否存在属性 nextKey
    // 过滤其原型链上的属性
    if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
        // 赋值给对象 to,并在遍历结束后返回对象 to
        to[nextKey] = nextSource[nextKey];
    }
}

 

4、参考

一、MDN的Object.assign()

二、理解Object.assign()

原文出处：https://www.cnblogs.com/chengxs/p/10788579.html

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程