共计 1521 个字符，预计需要花费 4 分钟才能阅读完成。
前言
这篇文章次要分享一些笔者在 日常开发过程中 遇到的一些乏味的知识点，心愿能帮忙大家扩大一些边缘视角。接下来让咱们来看看吧
你真的理解 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 限度
最初
这也算是笔者以前学习过程中疏漏的知识点，也同样揭示本人实际出真知，不要想当然。心愿这篇分享对大家有所帮忙～
