element源码阅读之对象拷贝
看了element源码里的对象拷贝的方法如下：
function merge(target) { // arguments 收集所有的参数 for (let i = 1, j = arguments.length; i < j; i++) { let source = arguments[i] || {}; for (let prop in source) { if (source.hasOwnProperty(prop)) { let value = source[prop]; if (value !== undefined) { target[prop] = value; } } } } return target; }; var a = { name: 'csx', } const b = { age: 18 } var ab = merge({}, a,b); console.log(ab) // {name: 'csx', age: 18}
涉及到了for in、hasOwnProperty知识点
for in 变量对象可枚举属性，包括继承来的
const triangle = { a: 1, b: 2, c: 3 }; function ColoredTriangle() { this.color = "red"; } ColoredTriangle.prototype = triangle; const obj = new ColoredTriangle(); for (const prop in obj) { console.log(`obj.${prop} = ${obj[prop]}`); /* 打印内容如下，将继承来的 a b c属性也遍历出来了 obj.color = red obj.a = 1 obj.b = 2 obj.c = 3 */ }
for in 遍历属性时如何排除继承来的属性
const triangle = { a: 1, b: 2, c: 3 }; function ColoredTriangle() { this.color = "red"; } ColoredTriangle.prototype = triangle; const obj = new ColoredTriangle(); for (const prop in obj) { // if (Object.hasOwn(obj, prop)) { if (obj.hasOwnProperty(prop)) { console.log(`obj.${prop} = ${obj[prop]}`); // obj.color = red 只有自身的color属性，a b c 继承来的排除掉了 } }
hasOwnProperty 判断是自身属性而不是继承的
const triangle = { a: 1, b: 2, c: 3 }; function ColoredTriangle() { this.color = "red"; } ColoredTriangle.prototype = triangle; const obj = new ColoredTriangle(); console.log(obj.hasOwnProperty('color')) // true color是自身属性 console.log(obj.hasOwnProperty('a')) // false console.log(obj.hasOwnProperty('b')) // false console.log(obj.hasOwnProperty('c')) // false
