当前位置:首页 > 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实现文件下载

使用 a 标签下载文件 通过动态创建 a 标签并设置 download 属性实现文件下载。适用于已知文件 URL 或 Blob 数据的情况。 function downloadFile(url, f…

js实现下拉菜单

js实现下拉菜单

使用HTML和CSS创建基础结构 HTML部分需要包含一个触发下拉的按钮和隐藏的下拉菜单内容: <div class="dropdown"> <button class="dr…

js实现显示隐藏

js实现显示隐藏

显示隐藏的实现方法 在JavaScript中,实现元素的显示和隐藏可以通过多种方式完成。以下是几种常见的方法: 修改CSS的display属性 通过改变元素的display属性可以在none(隐藏)…

js 实现图片 放大

js 实现图片 放大

使用 CSS transform 实现图片放大 通过 CSS 的 transform: scale() 属性可以实现图片的平滑放大效果。结合 JavaScript 监听鼠标事件控制放大状态: con…

js 实现图片轮播

js 实现图片轮播

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

js 实现验证码

js 实现验证码

实现验证码的 JavaScript 方法 生成随机验证码 验证码通常由随机字符(数字、字母或混合)组成。以下代码生成一个 6 位随机验证码(数字和字母混合): function generateCa…