什么是 Inherit?
在 CSS 和 JavaScript 中,“inherit” 是一个关键概念,用于表示某个属性应从其父元素继承值。
在 CSS 中,inherit 是一个全局关键字,可用于任何属性;在 JavaScript(尤其是面向对象编程)中,
继承允许子类复用父类的方法和属性。
CSS 中的 inherit
默认情况下,许多 CSS 属性是可继承的(如 color、font-family),但有些不是(如 margin、padding)。
使用 inherit 可以强制非继承属性也从父级获取值。
示例:让边框颜色继承父元素文字颜色
<div style="color: blue;">
<p style="border: 2px solid; border-color: inherit;">
这段文字的边框颜色将继承父 div 的文字颜色(蓝色)
</p>
</div>
JavaScript 中的继承
在 JavaScript 中,通过原型链(Prototype Chain)或 ES6 的 class 语法,可以实现类之间的继承。
子类可以使用 super() 调用父类构造函数,并继承其方法。
示例:使用 class 实现继承
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a sound.`);
}
}
class Dog extends Animal {
speak() {
console.log(`${this.name} barks!`);
}
}
const dog = new Dog("Buddy");
dog.speak(); // 输出: Buddy barks!
为什么使用 inherit?
- 减少重复代码,提升样式一致性
- 增强组件的灵活性和可复用性
- 使代码逻辑更清晰,便于维护
- 在主题切换、响应式设计中发挥重要作用