当前位置：首页 > JavaScript

js实现extend

2026-02-01 06:58:10JavaScript

实现 extend 功能

在 JavaScript 中实现 extend 功能通常指将一个对象的属性和方法扩展到另一个对象上。以下是几种常见的实现方式：

使用 Object.assign

Object.assign 是 ES6 提供的方法，用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。

const extend = (target, ...sources) => {
  return Object.assign(target, ...sources);
};

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const extended = extend(obj1, obj2);
console.log(extended); // { a: 1, b: 2 }

手动实现浅拷贝

如果需要在没有 Object.assign 的环境中实现 extend，可以手动遍历源对象的属性并复制到目标对象。

const extend = (target, ...sources) => {
  sources.forEach(source => {
    for (let key in source) {
      if (source.hasOwnProperty(key)) {
        target[key] = source[key];
      }
    }
  });
  return target;
};

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const extended = extend(obj1, obj2);
console.log(extended); // { a: 1, b: 2 }

实现深拷贝

如果需要深拷贝（嵌套对象的属性也被复制），可以使用递归的方式实现。

const extendDeep = (target, source) => {
  for (let key in source) {
    if (source.hasOwnProperty(key)) {
      if (typeof source[key] === 'object' && source[key] !== null) {
        target[key] = Array.isArray(source[key]) ? [] : {};
        extendDeep(target[key], source[key]);
      } else {
        target[key] = source[key];
      }
    }
  }
  return target;
};

const obj1 = { a: { b: 1 } };
const obj2 = { a: { c: 2 } };
const extended = extendDeep(obj1, obj2);
console.log(extended); // { a: { b: 1, c: 2 } }

使用 jQuery 的 extend 方法

如果项目中已经引入了 jQuery，可以直接使用其提供的 $.extend 方法。

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const extended = $.extend(obj1, obj2);
console.log(extended); // { a: 1, b: 2 }

使用 Lodash 的 extend 方法

Lodash 也提供了 _.extend 方法，功能类似于 Object.assign。

js实现extend

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const extended = _.extend(obj1, obj2);
console.log(extended); // { a: 1, b: 2 }

注意事项

浅拷贝只会复制对象的顶层属性，嵌套对象会被共享。
深拷贝会递归复制所有嵌套对象，但可能会遇到循环引用的问题。
使用 Object.assign 或 $.extend 时，目标对象会被修改。如果需要保留原对象，可以传递一个空对象作为目标。

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const extended = Object.assign({}, obj1, obj2);
console.log(extended); // { a: 1, b: 2 }
console.log(obj1); // { a: 1 } (未被修改)