都2022年了，你不会还觉得undefined是关键字吧？接下来，我们一起来看看吧。你真的了解undefined吗？相信在你的前端学习之旅中，undefined的学习就像刚开始学习数学时的1+1=2一样。记在心里就是一个定义，然后Floating~是的，我也是，在笔者之前的认知中，undefined和null是javascript的一个关键字。一个已经声明但没有赋值的变量在隐式类型转换下默认值等于null，即undefined==null直到有一天，笔者在MDN的搜索栏中输入了undefined(->传送门)，而映入眼帘的第一句话，直接颠覆了作者多年默认的脑补认知。看原文描述全局属性undefined代表原始值undefined，它是一种JavaScript原始数据类型。我很震惊undefined不是关键字，而是全局属性。秉承怀疑论者的态度，笔者反手F12验证Ok，可以说是没有他妈的，事实证明再简单的知识点也有不为人知的一面。知道了这些，可能有同学意识到，如果undefined这个全局变量被恶意修改，前端应用岂不是很危险？其实这个大可不必担心。window.undefined的属性描述符writable为false，不可修改。但即便如此，我们还是需要防止下面的代码给变量赋默认值。尽量不要使用undefinedconstundefined='foo';functionbar(){//给变量赋默认值时，不要使用undefinedletserie=undefined;控制台日志（系列）；//foo}bar()可能有同学会说，正常情况下，谁会显式定义一个变量Undefinedvariables？但是试想一下，当我们的codebuild产品在线上使用的时候，如果被恶意篡改，攻击者包裹一层IIFE，利用词法作用域注入一个undefined，那我们的前端应用不就岌岌可危了吗？((undefined)=>{//我们的代码(()=>{letwork;classWork{//...}functionbeginWork(){if(work!==undefined){return;}work=newWork();//...console.log('running');}beginWork()})()//...})('foo')可以看到当注入了一个foo的值后undefined变量，可以正常启动的程序将无法运行。看到这里，你是不是还相信undefinedCSS怪异盒模型不为人知的一面相信学过CSS的同学都知道CSS布局方式中的盒模型有很多种，比如标准盒模型、怪异盒模型（IE盒子模型）、弹性盒子等等。今天我们将重点介绍奇怪的盒子模型。众所周知，怪异盒模型的宽高=border+padding+content，也就是我们给元素设置的宽高其实是包含了border和padding的，所以真实的content区域往往比给定的要小宽度和高度是偶然的。有一天在调试一个组件的时候，发现当内容的宽高被border+padding压缩到0时，整个盒子的宽高会超过给定的宽高，最后border+padding为准。例如，可以看到这样一个盒子。如果按照我们给定的宽高显示，会是一个宽500px，高300px的盒子，但实际渲染结果是一个520x520的盒子，简单分析一下，我们会得到回答。怪异盒模型的宽高并不完全受给定的宽高限制。最后，这也是笔者在之前的学习过程中忽略的一个知识点。也提醒自己修真知。理所当然。希望这次分享对大家有所帮助~
