当前位置：首页 > article >正文

小哆啦探秘《JavaScript高级程序设计》

article 2025/2/10 22:43:55

前几天小哆啦去参加了一场超有挑战性的面试，本以为凭借自己的聪明才智和平时积累的小本事，肯定能轻松应对。可没想到，面试官抛出的一些关于 JavaScript 的深入问题，让小哆啦有点招架不住。面试结束后，面试官人特别好，他看着小哆啦渴望知识的眼神，语重心长地建议小哆啦可以好好研究研究《JavaScript 高级程序设计》这本书，说里面的知识能帮小哆啦在编程的道路上突飞猛进。小哆啦一听，立马来了精神，下定决心要好好研读这本书，还开启了每日读书总结，打算把学到的知识都分享给大家。

第一章：神奇的 JavaScript 诞生啦

你们知道吗？1995 年，有个叫 Brendan Eich 的超级厉害的家伙，就像开了挂一样，只用 10 天就搞出了 JavaScript 的雏形！它一开始叫 Mocha，小哆啦还以为是喜欢的铜锣烧口味呢，后来又改成 LiveScript，最后才定名为 JavaScript。虽然名字里有 Java，但它们俩可没什么关系。JavaScript 一诞生就肩负着给网页 “变魔术” 的使命，让网页能和用户互动起来，比如验证表单、搞点动态显示效果啥的，就像小哆啦从口袋里掏出道具一样神奇，谁能想到它后来在前端开发界混得风生水起，成了 “顶流” 呢！

1.2 JavaScript 的秘密武器库

ECMAScript：幕后大管家：这可是 JavaScript 的 “最强大脑”，由 ECMA - 262 标准定义。它就像小哆啦家那个严格的管家，规定了语法、类型、语句这些 “家里的规矩”。不同版本像 ES5、ES6（ES2015）还会时不时带来新 “玩法”，就像小哆啦神奇口袋里的道具，总能给人惊喜。比如 ES6 引入的块级作用域、箭头函数，就像是给 JavaScript 换上了一套更酷炫的装备。有了块级作用域，变量就不会到处 “捣乱” 啦，就像这样：

{
    let num = 10;
    console.log(num); // 10
}
// console.log(num); // 报错，num超出了它的“地盘”

箭头函数也超厉害，让函数的写法更简洁，像这样：

// 普通函数
function add(a, b) {
    return a + b;
}
// 箭头函数
const add = (a, b) => a + b;

DOM：网页的超级变形金刚：文档对象模型（DOM）是个独立于语言的 API，它把网页当成一个节点树，就像小哆啦把各种道具分类整理一样。你可以把它想象成一个能随意变形的超级英雄，用它的方法就能给网页 “改头换面”。比如用document.getElementById这个神奇的 “魔法棒”，就能精准获取指定 ID 的元素，想怎么改造就怎么改造。假如网页上有个
哆啦A梦的小窝
，小哆啦就能这样获取它：

const doraemonDiv = document.getElementById('doraemon');
// 然后就可以修改它的内容
doraemonDiv.innerHTML = '欢迎来到哆啦A梦的神奇世界';

BOM：浏览器的遥控器：浏览器对象模型（BOM）是用来控制浏览器窗口和框架的，它的核心window对象就像一个万能遥控器。用window.location可以随意切换网页 “频道”，比如小哆啦想跳到自己的官方网站：

window.location.href = 'https://doraemon.com';

用window.alert还能弹出个小提示框，就像小哆啦在和用户 “唠唠嗑”，比如：

window.alert('大家好呀，我是哆啦A梦！');

1.3 JavaScript 的十八般武艺

给 HTML 页面加料：JavaScript 能像个贴心小厨师一样，把动态文本 “塞” 进 HTML 页面里。比如用document.getElementById(‘time’).innerHTML = new Date().toLocaleTimeString()就能实时显示时间，给页面加点 “新鲜热乎” 的内容。要是在小哆啦的网页上，就可以显示 “现在是哆啦 A 梦陪伴你的美好时光：[具体时间]”，想想就觉得很温馨呢！

用户的超级跟屁虫：它可太会 “察言观色” 了，用户一有动作，像点击个按钮，它马上就能用事件处理程序 “接住”。比如有个按钮召唤哆啦A梦，小哆啦可以这样写：

const doraemonButton = document.getElementById('doraemonButton');
doraemonButton.addEventListener('click', function () {
    window.alert('我来啦！');
});

用户一点击，小哆啦就会蹦出来和大家打招呼啦！

HTML 元素的造型师：对 HTML 元素，它能像个时尚造型师一样随意摆弄，改属性、换样式、变内容，无所不能。改变图片src属性切换图片，就像给小哆啦换了身漂亮衣服。比如有个小哆啦的图片<img id="doraemonImage" src="doraemon1.jpg">，当用户点击按钮时，就可以切换成小哆啦的另一个造型：

const doraemonButton = document.getElementById('doraemonButton');
const doraemonImage = document.getElementById('doraemonImage');
doraemonButton.addEventListener('click', function () {
    doraemonImage.src = 'doraemon2.jpg';
});

数据的严格小卫士：在数据提交到服务器前，它会像个严格的小卫士一样检查输入格式。用function validateEmail(email) { return /^[a-zA - Z0 - 9_.+-]+@[a-zA - Z0 - 9 -]+\.[a-zA - Z0 - 9 -]+$/.test(email); }就能轻松验证邮箱格式。要是小哆啦的粉丝想给小哆啦发邮件，就可以用这个函数检查邮箱格式对不对，这样小哆啦就能更快收到大家的来信啦！

cookie 的神奇魔法师：用document.cookie这个神奇的魔法咒语，它就能对 cookie 进行创建、修改等操作。比如设置 cookie document.cookie = “username=小哆啦; expires=Thu, 18 Dec 2024 12:00:00 UTC; path=/”，就可以给用户来点个性化的小设置，记录小哆啦的登录状态或者大家的喜好。

第二章：JavaScript 在 HTML 里的奇妙冒险

2.1 悄悄潜入 HTML 的 JavaScript

<script> 元素：神秘的魔法入口：<script>元素就像是一个通往 JavaScript 世界的神秘入口，有两种 “打开方式”。内部脚本就像是在这个入口里直接施展魔法，把代码写在<script>标签对之间，比如<script> function sayHello() { alert('Hello!'); } </script>；外部脚本则是通过src属性引入一个外部的.js文件，就像从外面请来了一个更厉害的魔法师，这样代码就能复用，方便又高效。假如有个关于小哆啦的功能函数都写在doraemon.js里，就可以这样引入：<script src="doraemon.js"></script>。
藏在何处：位置的小心机：以前 JavaScript 脚本一般都藏在元素底部，为啥呢？因为它怕自己太 “强势”，阻塞了页面渲染，让用户等得不耐烦。现在有了异步和延迟加载这些 “秘密武器”，它的位置就可以更灵活啦。就像小哆啦找道具，以前只能按顺序慢慢找，现在有了任意门就能更高效地找到。

2.2 脚本执行时间：面试高频考点

在面试中，这可是个高频问题。defer和async属性是控制脚本执行时间的关键，其中的重点难点如下：

defer 属性的执行顺序问题：
- 理想执行顺序：defer属性给脚本安排了一个 “耐心等待” 的任务，让它在文档解析完成后按顺序执行，就像一个有礼貌的客人，不着急表现。理论上，当页面中有多个script标签都使用defer属性时，它们会按照在 HTML 文档中出现的顺序依次执行。
- 实际执行偏差：但在实际情况中，不同脚本之间若存在复杂的依赖关系，或者网络加载速度参差不齐时，执行顺序就不一定能保证了。比如有script1.js、script2.js和script3.js三个脚本，都使用了defer属性，正常情况下应该是script1.js先执行，接着script2.js，最后script3.js 。但如果script2.js依赖的某个资源加载缓慢，而script3.js依赖的资源很快加载完成，就有可能出现script3.js先于script2.js执行的情况，这就可能导致程序出错，所以在使用defer时一定要小心处理这种情况。

async 属性的执行特性：
- 异步与非顺序执行：async属性则像是给脚本打了一剂 “加速针”，让它异步下载，下载完马上就执行，不过不保证执行顺序，就像个急性子，一准备好就冲上去了。
- 多脚本执行顺序：如果一个页面同时存在多个带有async属性的脚本，它们的执行顺序是不确定的，完全取决于各自的下载完成时间。比如有scriptA.js和scriptB.js都使用async，如果scriptA.js下载快，它就先执行，反之则scriptB.js先执行。

在实际开发中，我们要根据脚本之间的依赖关系和对执行顺序的要求，合理选择defer和async属性。