js继承,闭包和css继承

JavaScript继承

继承是一种面向对象编程的重要概念,JavaScript中可以通过原型链实现继承。闭包是一种特殊的函数,它可以访问其外部函数作用域中的变量。

下面是一个使用原型链实现继承的示例代码:

javascript 复制代码
// 父类
function Animal(name) {
  this.name = name;
}

Animal.prototype.sayHello = function() {
  console.log("Hello, I'm " + this.name);
}

// 子类
function Dog(name, breed) {
  Animal.call(this, name); // 调用父类构造函数
  this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype); // 设置子类的原型为父类的实例
Dog.prototype.constructor = Dog; // 修复子类的构造函数

Dog.prototype.bark = function() {
  console.log("Woof, I'm a " + this.breed + " named " + this.name);
}

// 使用示例
var dog = new Dog("Buddy", "Labrador");
dog.sayHello(); // 输出:Hello, I'm Buddy
dog.bark(); // 输出:Woof, I'm a Labrador named Buddy

在上面的代码中,Animal是一个父类,Dog是一个子类。通过调用Animal.call(this, name)来在子类的构造函数中调用父类的构造函数,以继承父类的属性。然后,通过Object.create(Animal.prototype)将子类的原型设置为父类的实例,以继承父类的方法。最后,修复子类的构造函数,使其指向正确的构造函数。

CSS继承:

在CSS中,继承是指子元素可以继承父元素的某些属性值。一些常见的可继承属性包括font-familyfont-sizecolor等。

下面是一个使用CSS继承的示例代码:

html 复制代码
<!DOCTYPE html>
<html>
<head>
  <style>
    .parent {
      font-family: Arial, sans-serif;
      font-size: 16px;
      color: blue;
    }

    .child {
      /* 子元素继承父元素的字体和颜色 */
      font-family: inherit;
      color: inherit;
      /* 子元素自定义字体大小 */
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div class="parent">
    <p class="child">This is a child element.</p>
  </div>
</body>
</html>

在上面的代码中,.parent类定义了一些字体和颜色的样式,.child类继承了.parent类的字体和颜色属性,同时自定义了字体大小。这样,子元素<p>继承了父元素<div>的字体和颜色,但使用了自己的字体大小。

需要注意的是,并非所有的CSS属性都可继承,只有特定的属性才支持继承。可以查阅CSS规范以了解哪些属性是可继承的。

CSS继承的多个场景

当我们谈论CSS继承时,我们通常是指子元素继承父元素的某些属性值。下面是一些常见的CSS属性,它们可以被子元素继承:

  1. font-family:子元素继承父元素的字体系列。
css 复制代码
.parent {
  font-family: Arial, sans-serif;
}

.child {
  /* 子元素继承父元素的字体系列 */
  font-family: inherit;
}
  1. font-size:子元素继承父元素的字体大小。
css 复制代码
.parent {
  font-size: 16px;
}

.child {
  /* 子元素继承父元素的字体大小 */
  font-size: inherit;
}
  1. color:子元素继承父元素的文本颜色。
css 复制代码
.parent {
  color: blue;
}

.child {
  /* 子元素继承父元素的文本颜色 */
  color: inherit;
}
  1. line-height:子元素继承父元素的行高。
css 复制代码
.parent {
  line-height: 1.5;
}

.child {
  /* 子元素继承父元素的行高 */
  line-height: inherit;
}
  1. text-align:子元素继承父元素的文本对齐方式。
css 复制代码
.parent {
  text-align: center;
}

.child {
  /* 子元素继承父元素的文本对齐方式 */
  text-align: inherit;
}

需要注意的是,并非所有的CSS属性都可继承,只有特定的属性才支持继承。可以查阅CSS规范以了解哪些属性是可继承的。

闭包说明

当我们在一个函数内部定义另一个函数时,内部函数可以访问外部函数的变量和参数,即使外部函数已经执行完毕。这种函数和其相关变量的组合被称为闭包。

下面是一个使用闭包的示例代码:

javascript 复制代码
function outerFunction() {
  var outerVariable = 'I am from outer function';

  function innerFunction() {
    console.log(outerVariable);
  }

  return innerFunction;
}

var closure = outerFunction();
closure(); // 输出:I am from outer function

在上面的代码中,outerFunction是外部函数,它定义了一个变量outerVariable和一个内部函数innerFunction。内部函数innerFunction可以访问外部函数的变量outerVariable,即使外部函数已经执行完毕。通过调用outerFunction(),我们将内部函数innerFunction作为闭包返回,并将其赋值给变量closure。然后,我们可以通过closure()调用闭包函数,从而访问外部函数的变量。

闭包的一个重要应用是创建私有变量。通过在外部函数中定义变量,然后在内部函数中进行操作和访问,我们可以实现对变量的封装和保护,避免外部的直接访问和修改。

javascript 复制代码
function counter() {
  var count = 0;

  function increment() {
    count++;
    console.log(count);
  }

  function decrement() {
    count--;
    console.log(count);
  }

  return {
    increment: increment,
    decrement: decrement
  };
}

var counterObj = counter();
counterObj.increment(); // 输出:1
counterObj.increment(); // 输出:2
counterObj.decrement(); // 输出:1

在上面的代码中,我们使用闭包创建了一个计数器对象。counter函数返回一个包含两个方法incrementdecrement的对象。这两个方法可以访问和修改外部函数中的私有变量count。通过调用counter(),我们得到一个计数器对象counterObj,然后可以通过counterObj.increment()counterObj.decrement()来增加和减少计数器的值。由于私有变量count只能通过内部函数访问,外部无法直接修改它,从而实现了对变量的保护。

相关推荐
User:你的影子1 分钟前
WPF ItemsControl 绑定
开发语言·前端·javascript
野生的编程萌新30 分钟前
【C++深学日志】从0开始的C++生活
c语言·开发语言·c++·算法
咔咔一顿操作1 小时前
【CSS 3D 交互】实现精美翻牌效果:从原理到实战
前端·css·3d·交互·css3
知识分享小能手1 小时前
React学习教程,从入门到精通,React 构造函数(Constructor)完整语法知识点与案例详解(16)
前端·javascript·学习·react.js·架构·前端框架·vue
※※冰馨※※1 小时前
【c#】 使用winform如何将一个船的图标(ship.png)添加到资源文件
开发语言·windows·c#
召摇1 小时前
NodeBB 深度解析:现代论坛系统的架构设计与实践指南
前端·javascript
flower_tomb2 小时前
对浏览器事件机制的理解
前端·javascript·vue.js
超人不会飛2 小时前
仿豆包 H5应用核心模板:用Vue快速复刻大模型对话体验
前端·javascript·vue.js
程序张2 小时前
Vue3+Vite 现代化前端框架👊打破 Chrome 83 内核限制
前端·javascript·vue.js
蜀中廖化2 小时前
bash:trtexec:command not found
开发语言·bash