JS-ES2015-Object

[yaofly2012]

Object.assign

通过React源码里Object.assign的polyfill来了解：

1. Object.assign实现细节；
2. 何时使用Object.assign的polyfill。

1. Object.assign实现细节

能做的：

Object.assign(target, ...sources)

1. 通过浅复制的方式将多个sources对象合并到target对象里；
2. 只copysources对象的可枚举的对象本身的属性；

var p = {
    say: () => { 
        console.log('hi~')
    }
}
var a = Object.create(p)
a.name = 'a';
Object.defineProperty(a, 'age', { 
    enumerable: false, 
    value: 12
})

var b = Object.assign({}, a)
console.log(b) // {name: "a"}

3. 字符串属性和Symbol属性都支持。
4. 会自动将sources参数转成对象，如果sources参数为null/undefined，则忽略。
5. 如果target参数为null/undefined, 则抛异常。

不能做的

1. 不copy属性的特性；
   可以借助库merge-descriptors
2. 不支持深copy；
3. 不会过滤取值为null或则undefined的属性

2. 何时该使用polyfill

不能简单的判断Object.assign是否存在，奉上React的实现：

function shouldUseNative() {
	try {
		if (!Object.assign) {
			return false;
		}

		// Detect buggy property enumeration order in older V8 versions.

		// https://bugs.chromium.org/p/v8/issues/detail?id=4118
		var test1 = new String('abc');  // eslint-disable-line no-new-wrappers
		test1[5] = 'de';
		if (Object.getOwnPropertyNames(test1)[0] === '5') {
			return false;
		}

		// https://bugs.chromium.org/p/v8/issues/detail?id=3056
		var test2 = {};
		for (var i = 0; i < 10; i++) {
			test2['_' + String.fromCharCode(i)] = i;
		}
		var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
			return test2[n];
		});
		if (order2.join('') !== '0123456789') {
			return false;
		}

		// https://bugs.chromium.org/p/v8/issues/detail?id=3056
		var test3 = {};
		'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
			test3[letter] = letter;
		});
		if (Object.keys(Object.assign({}, test3)).join('') !==
				'abcdefghijklmnopqrst') {
			return false;
		}

		return true;
	} catch (err) {
		// We don't expect any of the above to throw, but better to be safe.
		return false;
	}
}

• 不明白bug4118 跟Object.assign有什么关系 ？
• 如果不考虑顺序问题，可以忽略bug4118和3056 ？

[yaofly2012]

getOwnPropertyNames

返回属性名列表的顺序

• 一直没关注过返回的属性名列表的顺序，直到看到React代码里提到：Issue 4118: Object.getOwnPropertyNames returns names in wrong order。
  MDN里这样说的：

1. The ordering of the enumerable properties in the array is consistent with the ordering exposed by a for...in loop (or by Object.keys()) over the properties of the object.
2. The ordering of the non-enumerable properties in the array and the ordering among the enumerable properties is not defined.

即可枚举的属性顺序同 Object.keys(), for...in，不可枚举的属性没有定义顺序。

• 关于Object.keys()返回值顺序MDN这样描述的：

The ordering of the properties is the same as that given by looping over the properties of the object manually.

• 关于 for...in顺序顺序描述是：

A for...in loop iterates over the properties of an object in an arbitrary order

即跟对象的遍历顺序是一致的，即：

1. 对于数组/字符串对象：属性顺序就是下标顺序

Object.keys('foo') //  ["0", "1", "2"]
Object.keys(['name', 'age']) // ["0", "1"]

2. 对于对象：无序 ?也不对吧
   ecma-262 OwnPropertyKeys

When the [[OwnPropertyKeys]] internal method of O is called the following steps are taken:

1. Let keys be a new empty List.
2. For each own property key P of O that is an integer index, in ascending numeric index order

• Add P as the last element of keys.

3. For each own property key P of O that is a String but is not an integer index, in property creation order

• Add P as the last element of keys.

4. For each own property key P of O that is a Symbol, in property creation order

• Add P as the last element of keys.

5. Return keys.

var a = {    
    b: 2, 
    a: 1,
    [Symbol('name')]: 'join',
    [Symbol('age')]: 12,
    1: 3, 
    2: 3,
    name: 'join',
    age: '20'
};

// ["1", "2", "b", "a", "1.1", "name", "age"]
console.log(Object.getOwnPropertyNames(a));

// [Symbol(name), Symbol(age)]
console.log(Object.getOwnPropertySymbols(a));