乐趣区

关于前端:你不知道的前端冷知识

jiezi

前言

这篇文章次要分享一些笔者在 日常开发过程中 遇到的一些乏味的知识点，心愿能帮忙大家扩大一些边缘视角。接下来让咱们来看看吧

你真的理解 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 限度

最初

这也算是笔者以前学习过程中疏漏的知识点，也同样揭示本人实际出真知，不要想当然。心愿这篇分享对大家有所帮忙～

退出移动版