每天一道面试题

smile_逸仙
297 阅读4分钟

前言

心血来潮整个活儿，每日一更，欢迎掘友们捧场指正共勉。另外也可以评论区留题，如果我能比较完整的盘出来，就会在后面更上去与大家讨论。

第一题：js 数据类型

第一类：基本数据类型 Number，String，Boolean，Undefined，Null，Symbol

第二类：Object 对象类型。常用的 Array，Function 都是特殊的对象，是 Object 的子类型

第二题：怎么判断 js 数据类型

typeof

可以比较准确的判断出下面几种基本数据类型

typeof 'one goal each day' // 'string'
typeof 1 // 'number'
typeof false // 'boolean'
typeof Symbol() // 'symbol'
typeof undefined // 'undefined'

// 另外
const a = function () {}
typeof a // 'function'
// 但是下面这么写就会报错
function a () {}
typeof a // 报错

它的问题是：

typeof null // 'object'
typeof [] // 'object'
typeof {} // 'object'

instanceof

用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上（摘自MDN）

[] instanceof Array // true
new Date() instanceof Date // true
function a {}; a instanceof Function // true

// 它的问题
[] instanceof Object // true
new Date() instanceof Object // true
function a {}; a instanceof Object // true

这个问题跟 JS 的原型链特性相关，即当在判断 Object 类型时会出现混乱，因为实质上这些引用型实例都属于对象类型

toString

每一个引用类型都有 toString 方法，默认情况下，toString 方法被每个 Object 对象继承，如果此方法在自定义对象中未被覆盖，调用 toString 将返回 "[object type]"，其中，type 是对象的类型（摘自MDN）

也就是说，构造函数 Object 上有一个原型方法 toString，这个方法可以用来输出实例的构造函数类型，也就是实例的对象类型

Object.prototype.toString.call(true) // [object Boolean]
Object.prototype.toString.call(1) // [object Number]
Object.prototype.toString.call('a') // [object String]
Object.prototype.toString.call(null) // [object Null]
Object.prototype.toString.call(undefined) // [object Undefined]
Object.prototype.toString.call(function () {}) // [object Function]
Object.prototype.toString.call({}) // [object Object]
...

第三题：new 运算符都干了啥

var obj = {}
obj._proto_ = Func.prototype
Func.call(obj)

第四题：css 权重

  • 第一优先级 !important
  • 内联样式：style = 'color: salmon'，权值 1000
  • ID 选择器，权值 0100
  • 类（.foo），伪类（:first-child），属性选择器（div[class="foo"]），权值 0010
  • 标签（div），伪元素选择器（div::first-line），权值 0001
  • 通配符，子类选择器，兄弟选择器 *, >, +，权值 0000
  • 继承样式，最低优先级

第五题：BFC

首先，来看看官家话：

BFC（ block formatting context ）块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则，它决定了元素如何对齐内容进行布局，以及与其他元素的关系和相互作用。 当涉及到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定规则进行布局

阅读理解，看文解意的时间了。第一个要点，它是一块渲染区域，记好了老铁们，它是一块区域，区域我们能联想到什么？一个公司算不算？

一个公司，它要管辖这一块区域，它是不是得出规定？规定公司里面的人，事，物的运转流程？BFC 也有，只是它规定的是它里面的元素的渲染规则，布局规则。

然后，公司与其他公司之间，有合作，有竞争吧，合作也好竞争也好，必须在法律的约束下，不能搞垄断吧？所以，公司对外，也得有规定。同样，BFC 与外部其他元素的相互作用也需要遵循一定的规则。

最后，这样一个对内对外都按一定规则运转的，拥有明确规定界线的区域，就形成了一个独特的集成体，我们叫它 BFC。

上面我们也说了，它是一个区块，它都有些啥？它有内部规则，有外部规则，有明确界定线。

怎么界定？

  1. 根元素 html
  2. float 不为 none
  3. display 为 inline-block、table-cell、table-caption
  4. position 为 absolute、fixed
  5. overflow 不为 visible

内部规则

  1. 内部的 Box 会在垂直方向上一个接一个的放置
  2. 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠（塌陷），与方向无关
  3. 常规流和浮动流布局环境下，每个元素的左外边距与包含块的左边界相接触（从左向右），绝对定位流除外
  4. 计算 BFC 的高度时，内部浮动子元素也参与计算，即不会发生高度塌陷

外部规则

  1. BFC 区域不会与外部 float 元素区域发生重叠
  2. BFC 是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。即 BFC 与外部块级元素不存在 margin 重叠问题
avatar
文章
阅读
粉丝