js实现覆盖
实现对象属性覆盖
使用Object.assign()方法可以将一个或多个源对象的属性复制到目标对象。该方法会修改目标对象并返回它。
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const result = Object.assign(target, source);
console.log(result); // { a: 1, b: 4, c: 5 }使用展开运算符覆盖属性
ES6的展开运算符提供了一种简洁的方式来合并对象，后面的属性会覆盖前面的同名属性。
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const merged = { ...obj1, ...obj2 };
console.log(merged); // { a: 1, b: 3, c: 4 }深度合并对象
对于嵌套对象，需要进行深度合并。可以使用递归函数或第三方库如lodash的_.merge()。
function deepMerge(target, source) {
for (const key in source) {
if (source[key] instanceof Object && target[key]) {
deepMerge(target[key], source[key]);
} else {
target[key] = source[key];
}
}
return target;
}
const objA = { a: { b: 1 } };
const objB = { a: { c: 2 } };
console.log(deepMerge(objA, objB)); // { a: { b: 1, c: 2 } }数组元素覆盖
使用splice()方法可以替换数组中的元素。
const arr = [1, 2, 3, 4];
arr.splice(1, 2, 'a', 'b');
console.log(arr); // [1, 'a', 'b', 4]使用数组展开运算符覆盖
可以通过展开运算符和slice方法实现数组部分替换。
const original = [1, 2, 3, 4, 5];
const replacement = ['a', 'b'];
const result = [
...original.slice(0, 1),
...replacement,
...original.slice(3)
];
console.log(result); // [1, 'a', 'b', 4, 5]原型方法覆盖
可以修改对象的原型方法来实现方法覆盖。
function Person() {}
Person.prototype.greet = function() {
return "Hello";
};
const person = new Person();
person.greet = function() {
return "Hi";
};
console.log(person.greet()); // "Hi"使用Proxy实现属性访问控制
Proxy可以拦截对象操作，实现自定义的属性访问逻辑。
const target = {};
const handler = {
get: function(obj, prop) {
return prop in obj ? obj[prop] : 'default';
}
};
const proxy = new Proxy(target, handler);
proxy.test = 'value';
console.log(proxy.test); // "value"
console.log(proxy.nonExistent); // "default"CSS样式覆盖
在JavaScript中操作DOM元素的样式。
const element = document.getElementById('myElement');
Object.assign(element.style, {
color: 'red',
fontSize: '16px'
});
