element源码阅读之对象拷贝

最新推荐文章于 2025-04-23 17:48:22 发布

小菜101

最新推荐文章于 2025-04-23 17:48:22 发布

阅读量302

点赞数

文章标签： javascript 前端开发语言 elementui

本文链接：https://blog.youkuaiyun.com/github_36091081/article/details/128016455

版权

这篇博客探讨了JavaScript中对象拷贝的方法，通过`merge`函数展示了如何合并多个对象。同时，文章详细解释了`for...in`循环如何遍历对象的所有可枚举属性，包括继承自原型链的属性。通过`hasOwnProperty`方法，可以过滤掉继承的属性，只保留对象自身的属性。示例代码展示了如何在遍历时使用该方法排除继承属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

看了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