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