你不知道的前端冷知识

前言

这篇文章主要分享一些笔者在 日常开发过程中 遇到的一些有趣的知识点，希望能帮助大家扩展一些边缘视角。接下来让我们来看看吧

你真的了解 undefined 吗

相信在各位的前端学习之路上，对 undefined 的学习就如同刚开始学习数学时的 1 + 1 = 2 一样，作为了一个 定义 铭记在心，然后飘过～

没错，俺也一样，在笔者曾经的认知里

• undefined 和 null 一样是 javascript 的一个关键字
• 是一个已声明但未被赋值的变量的默认值
• 在隐式类型转换下等于 null，即 undefined == null

直到有一天，笔者在 MDN 的搜索栏输入了 undefined（ -> 传送门），映入眼帘的第一句话直接颠覆了笔者多年以来默认脑补的认知，让我们看看原文的描述

全局属性 undefined 表示原始值 undefined，它是一个 JavaScript 的原始数据类型。

鄙人大为震惊，undefined 竟不是一个关键字，而是一个全局属性。秉持着怀疑者的态度，笔者反手 F12 进行了验证

Ok，那可以说是无fuck说，事实证明再简单的知识点也有不为人知的一面。知道了这一点，可能会有同学已经意识到了，作为全局变量的 undefined，如果被恶意修改，那么 前端的应用 岂不是就危险了？

其实这一点到不必担心，window.undefined 的属性描述符 writable 为 false，是不可修改的

但即使如此，我们任然需要防止以下代码

• 给变量赋默认值时，尽量不要使用 undefined

  const undefined = 'foo';
  
  function bar() {
  // 给变量赋默认值时，不要使用 undefined
  const serie = undefined;
  console.log(serie); // foo
  }
  
  bar()

可能有同学说，正常谁会显式的去定义一个 undefined 的变量？但试想，当我们的代码的构建产物上线使用时，如果被恶意篡改呢，攻击者通过包裹一层 IIFE，利用词法作用域注入一个 undefined，那我们的前端应用不就岌岌可危了？

((undefined) => {

// 我们的代码
(() => {
    let work;

  class Work {
    // ...
  }
  
    function beginWork() {
    if (work !== undefined) {
      return;
    }

    work = new Work();
    // ...
    console.log('running');
  }
  
  beginWork()
})()
// ...
  
})('foo')

可以看到，当被注入了一个值为 foo 的 undefined 变量后，原本可以正常启动的程序就无法工作了。看到这里，你还能相信 undefined吗

CSS 怪异盒模型 不为人知的一面

相信学习过 css 的同学都知道，在 css 的布局方式中存在多种盒模型，比如 标准盒模型，怪异盒模型（IE盒模型），弹性盒子等等。

今天我们着重来聊聊 怪异盒模型。众所周知，怪异盒模型的 宽高 = border + padding + content，即我们给元素设置的宽高其实是包含了 border 和 padding ，因此真正的内容区往往会比给定的宽高小

一个偶然的机会，有一天笔者在调试一个组件时发现，当 content 宽高被 border + padding 压榨为 0时，整个盒子的宽高将突破给定的 宽高，最终以 border + padding 为准。

比如这样一个盒子

可以看到，按照我们给定的宽高进行展示的话，这将是一个宽 500px，高 300px 的盒子，但实际渲染的结果却是一个 520 x 520 的盒子。简单分析一下我们就会得到答案，怪异盒模型的 渲染宽高 并不完全受给定的 width 和 height 限制

最后

这也算是笔者以前学习过程中疏漏的知识点，也同样提醒自己实践出真知，不要想当然。希望这篇分享对大家有所帮助～