面试题系列均来自鱼皮的知识星球——编程导航

什么是 CSS 盒子模型？

CSS 盒子模型（CSS box model）指的是用于布局和设计网页的 CSS 样式规范。CSS 盒子模型将每个 HTML 元素表示为一个矩形的盒子，这个盒子包括内容（content）、内边距（padding）、边框（border）和外边距（margin）四个部分。

具体来说，盒子模型中各个部分的含义如下：

  • 内容（content）：元素的实际内容，由 width 和 height 属性决定。
  • 内边距（padding）：内容和边框之间的空间，由 padding 属性决定。
  • 边框（border）：内容和外边距之间的边框，由 border 属性决定。
  • 外边距（margin）：盒子边缘和其它元素之间的空间，由 margin 属性决定。

CSS 盒子模型中，盒子的总大小由这四个部分加起来决定，即 width + padding + border + margin。需要注意的是，CSS 盒子模型有两种，分别是标准盒子模型和怪异盒子模型。

  • 标准盒子模型中，盒子的大小 = width + padding + border + margin
  • 怪异盒子模型中，盒子的大小 = width + margin，因为 width 已经包含了 padding + border

ES5 中的类和 ES6 中的 class 有什么区别？

在 ES5 中，我们通常使用构造函数来创建对象和实现继承，而在 ES6 中，引入了类（class）的概念来简化对象创建和继承的过程。下面是 ES5 中类和 ES6 中的 class 的一些区别：

  • 语法不同：ES5 中使用构造函数来定义类，而 ES6 中使用 class 关键字来定义类。
  • 继承方式不同：ES5 中使用原型链继承来实现继承，而 ES6 中使用 extends 关键字和 super 函数来实现继承。
  • 类方法的定义方式不同：ES5 中类方法定义在构造函数的原型对象上，而 ES6 中类方法定义在类的内部。
  • 类属性的定义方式不同：ES5 中类属性定义在构造函数的原型对象上，而 ES6 中类属性定义在类的内部，并且需要使用 static 关键字来定义静态属性。
  • 类的调用方式不同：ES5 中需要使用 new 关键字来创建类的实例，而 ES6 中类的调用方式更加简单，只需要像函数一样调用即可。

需要注意的是，虽然 ES6 中引入了类的概念，但在底层实现上仍然是基于原型链的。因此，理解原型链继承和类的继承是理解 JavaScript 面向对象编程的关键。

说说你对 TypeScript 的理解？与 JavaScript 的区别？

TypeScript是一种开源的编程语言，它是JavaScript的一个超集，支持静态类型、类、接口等特性，并且在编译时进行类型检查。TypeScript的设计目标是提高代码的可维护性和可读性，并且可以在大型项目中提供更好的代码组织和重用。

相比于JavaScript，TypeScript具有以下特点：

  • 支持类型：TypeScript支持静态类型，在编译时进行类型检查，能够在代码编写阶段发现类型错误，减少运行时错误。
  • 支持面向对象编程：TypeScript支持类、接口、泛型等面向对象编程特性，可以更好地组织代码和重用代码。
  • 支持ES6+特性：TypeScript支持ES6+的语法和特性，可以使用最新的语言特性来提高代码质量和可读性。
  • 更好的编辑器支持：TypeScript 提供了更好的编辑器支持，包括类型检查、代码补全、重构等功能，可以提高开发效率。
  • 更好的可维护性：TypeScript 的类型系统和面向对象特性可以提高代码的可维护性和可读性，使得代码更加易于维护和扩展。

总之，TypeScript 可以看作是 JavaScript 的一个超集，它扩展了 JavaScript 的功能，提供了更好的类型检查和面向对象编程特性，可以提高代码的可维护性和可读性。