js 实现extend
实现 JavaScript 的 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 extendedObj = extend(obj1, obj2);
console.log(extendedObj); // { a: 1, b: 2 }使用展开运算符（Spread Operator）
ES6 的展开运算符也可以用于合并对象。
const extend = (target, ...sources) => {
return { ...target, ...sources };
};
// 示例
const obj1 = { a: 1 };
const obj2 = { b: 2 };
const extendedObj = extend(obj1, obj2);
console.log(extendedObj); // { a: 1, b: 2 }手动实现 extend
如果需要兼容旧版浏览器或需要更复杂的逻辑，可以手动实现 extend。
const extend = (target, source) => {
for (const 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 }深拷贝实现
如果需要进行深拷贝（嵌套对象的拷贝），可以使用以下方法：
const deepExtend = (target, source) => {
for (const key in source) {
if (source.hasOwnProperty(key)) {
if (typeof source[key] === 'object' && source[key] !== null) {
target[key] = Array.isArray(source[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 extendedObj = $.extend(obj1, obj2);
console.log(extendedObj); // { a: 1, b: 2 }注意事项
- 浅拷贝只会复制对象的顶层属性，嵌套对象仍然是引用。
- 深拷贝会递归复制所有嵌套对象，但可能会遇到循环引用的问题。
- 使用
Object.assign或展开运算符时，目标对象的原型链不会被复制。
根据实际需求选择合适的实现方式。
