理解Object.assign

Object.assign()方法用于从一个或多个源对象（sources）中拷贝所有可枚举的自有属性到目标对象（target），并返回目标对象。拷贝过程中将调用源对象的getter方法，并在target对象上使用setter方法实现目标对象的拷贝。

1
Object.assign(target, ...sources)

不过，采用这种方法克隆，只能克隆原始对象自身的值，不能克隆它继承的值。如果想要保持继承链，可以采用下面的代码。

原文：Both String and Symbol properties are copied.

String和Symbol类型都可被直接分配。

1
2
3
4
function clone(origin) {
	let originProto = Object.getPrototypeOf(origin);
    return Object.assign(Object.create(originProto), origin);
}

注意：如果属性是只读的，那将会抛出异常，目标对象将会停止改变（而之前的改变会保留）。但是对于null或者undefind会直接忽略。

简单克隆对象

1
2
3
4
var obj = {a: 1};
var copy = Object.assign({}, obj);
console.log(copy); //Object {a: 1}

合并对象

1
2
3
4
5
6
var a = {x: 1};
var b = {y: 2};
var c = {x: 4, z: 3};
var obj = Object.assign(a, b, c);
console.log(obj); //Object {x: 4, y: 2, z: 3}

拷贝Symbol属性

1
2
3
4
5
var a = {x: 1};
var b = {[Symbol('y')]: 2};
var obj = Object.assign(a, b);
console.log(obj); //Object {x: 1, Symbol(y): 2}

继承的属性和不可枚举的属性不会被拷贝

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var obj = Object.create({foo: 1}, //继承的对象, obj.__proto__ == {foo: 1}
	{
		a: { //不可枚举的
			value: 2
		},
		b: {
			value: 3,
			enumerable: true //可枚举的
		}
	}
);
var copy = Object.assign({}, obj);
console.log(copy); //Object {b: 3}

字符串会被转成object

1
2
3
4
5
6
7
8
9
10
11
12
13
var str = 'hejx';
var obj = Object.assign({}, str);
console.log(obj); //Object {0: "h", 1: "e", 2: "j", 3: "x"}
var a = "123";
var b = false;
var c = 123;
var d = Symbol('sy');
var e = Object.assign({}, a, b, c, d, null, undefined);
//null和undefined会被忽略，在这里只有a（字符串）可以被枚举并被转成对象，如果存在2个字符串，将会报错
console.log(e); //Object {0: "1", 1: "2", 2: "3"}

只读属性不能被拷贝

1
2
3
4
5
6
7
8
9
10
11
12
13
var target = Object.defineProperty({}, 'foo', {
	value: 1,
 	writable: false
}); // target.foo是只读属性
Object.assign(target, { bar: 2 }, { foo2: 3, foo: 3, foo3: 3 }, { baz: 4 });
// 这里会抛出异常，但是在错误之前，目标对象的部分属性已经被改变或者新增，而后续的将不会再进行拷贝
console.log(target.bar);  // 2
console.log(target.foo2); // 3
console.log(target.foo);  // 1
console.log(target.foo3); // undefined
console.log(target.baz);  // undefined

拷贝属性的赋值器（setter）和取值器（getter）

1
2
3
4
5
6
7
8
9
10
11
12
var obj = {
	a: 1,
	get b(){
		return 2;
	},
	someMethod(){ //同样会被拷贝，可以用于为对象添加方法
		//someMethod
	}
};
var copy = Object.assign({}, obj);
console.log(copy); // Object {a: 1, b: 2, someMethod: function(){}}

es5版本的Object.assign

不支持Symbol属性，因为es5压根没有Symbol

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
if (typeof Object.assign != 'function') { //判断是否支持
  (function () {
    Object.assign = function (target) {
      'use strict';
      if (target === undefined || target === null) {
        throw new TypeError('Cannot convert undefined or null to object');
      }
      var output = Object(target);
      for (var index = 1; index < arguments.length; index++) {
        var source = arguments[index];
        if (source !== undefined && source !== null) {
          for (var nextKey in source) {
            if (source.hasOwnProperty(nextKey)) { //判断一个属性是定义在对象本身而不是继承自原型链
              output[nextKey] = source[nextKey];
            }
          }
        }
      }
      return output; //最终输出
    };
  })();
}

不支持深度拷贝

1
2
3
4
var target = { a: { b: 'c', d: 'e' } }
var source = { a: { b: 'hello' } }
Object.assign(target, source)
// { a: { b: 'hello' } }

深度拷贝

拷贝数组

1
2
3
4
var arr = [1, 2, 3]; //会被当成对象
var str = "4567";
var copy = Object.assign({}, arr, str);
console.log(copy); // Object {0: "4", 1: "5", 2: "6", 3: "7"}

兼容性

属于es6规范，然而兼容性并不好，pc端除了ie，其他都支持。移动端目前就Firefox Mobile 支持。

文献

摘自developer.mozilla.org

es6.ruanyifeng.com

ES2015系列(二) 理解Object.assign