当前位置:首页 > JavaScript

js 实现extend

2026-04-06 03:49:24JavaScript

实现 JavaScript 的 extend 功能

在 JavaScript 中,extend 通常用于将一个对象的属性复制到另一个对象,实现继承或混合功能。以下是几种常见的实现方式:

使用 Object.assign

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

function extend(target, ...sources) {
  return Object.assign(target, ...sources);
}

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

手动实现浅拷贝

如果需要在非 ES6 环境中实现 extend,可以手动遍历源对象的属性并复制到目标对象。

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

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

实现深拷贝

浅拷贝无法处理嵌套对象,深拷贝会递归复制所有嵌套属性。

function deepExtend(target, source) {
  for (let key in source) {
    if (source.hasOwnProperty(key)) {
      if (typeof source[key] === 'object' && source[key] !== null) {
        target[key] = target[key] || {};
        deepExtend(target[key], source[key]);
      } else {
        target[key] = source[key];
      }
    }
  }
  return target;
}

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

使用 jQuery 的 $.extend

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

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

使用 Lodash 的 _.extend_.assign

Lodash 提供了类似的工具函数 _.extend_.assign

js 实现extend

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

注意事项

  • 浅拷贝只复制对象的顶层属性,嵌套对象会被共享。
  • 深拷贝会递归复制所有嵌套对象,但可能影响性能。
  • 使用现成库(如 jQuery 或 Lodash)可以避免手动实现中的潜在问题。

标签: jsextend
分享给朋友:

相关文章

js实现图表

js实现图表

在JavaScript中实现图表通常使用流行的图表库,以下是几种常见的方法和工具: 使用Chart.js Chart.js是一个简单灵活的库,适合快速生成响应式图表。安装方式包括CDN引入或npm安…

js类实现

js类实现

使用类实现 JavaScript 功能 在 JavaScript 中,类(Class)是一种语法糖,基于原型继承机制。通过 class 关键字可以更直观地定义对象模板。 基本类定义 class…

js进度条实现

js进度条实现

使用HTML和CSS创建基础结构 在HTML中创建一个容器元素用于显示进度条,通常使用<div>元素。CSS用于设置进度条的样式,包括宽度、高度、颜色和圆角等属性。 <div cl…

js实现删除

js实现删除

使用 splice 方法删除数组元素 splice 方法可以删除数组中的元素,并返回被删除的元素。它接受两个参数:起始索引和要删除的元素数量。 const array = [1, 2, 3, 4…

js 实现图片轮播

js 实现图片轮播

基础实现方案 使用HTML、CSS和JavaScript创建一个简单的图片轮播。HTML部分定义轮播容器和图片,CSS负责样式布局,JavaScript处理轮播逻辑。 <div class="…

js实现表单验证提交表单提交表单提交

js实现表单验证提交表单提交表单提交

表单验证与提交的实现 在JavaScript中实现表单验证并提交表单,可以通过监听表单的提交事件,进行验证后决定是否提交。以下是实现方法: 基础表单验证 通过监听表单的submit事件,阻止默认提交…