JavaScript语言全面概述：从历史到现代实践 - JavaScript学习系列文章

一、JavaScript的历史与发展JavaScript诞生于1995年由Netscape公司的Brendan Eich在短短10天内设计完成。最初命名为Mocha后改为LiveScript最终为了借助Java的流行度而定名为JavaScript(尽管两者并无直接关系)。重要历史节点1996年微软推出JScript与Netscape竞争1997年ECMAScript标准第一版发布(ECMA-262)2005年AJAX技术兴起JavaScript重要性提升2009年ES5发布带来严格模式、JSON支持等2015年ES6/ES2015发布JavaScript现代化2016至今每年发布新标准持续演进Javascript与ECMAScript的关系JavaScript是ECMAScript的实现之一完整的JavaScript包括ECMAScript核心语言基础(语法、类型、语句等)DOM文档对象模型(浏览器文档操作)BOM浏览器对象模型(与浏览器窗口交互)二、ECMAScript标准详解2.1 版本演进版本发布时间主要特性ES11997初始版本ES31999正则表达式、try/catchES52009严格模式、JSON、数组方法ES62015let/const、类、模块、Promise等ES20162016指数运算符、Array.prototype.includesES20172017async/await、共享内存ES20202020可选链、空值合并、BigInt2.2 ES6核心特性1)块级作用域与let/const// ES5只有函数作用域和全局作用域var x 10;if (true) { var x 20; // 同一个变量 console.log(x); // 20}console.log(x); // 20// ES6引入块级作用域let y 10;if (true) { let y 20; // 不同的变量 console.log(y); // 20}console.log(y); // 10const z 30;// z 40; // 错误不能重新赋值2) 箭头函数// ES5函数表达式var multiply function(a, b) { return a * b;};// ES6箭头函数const multiply (a, b) a * b;// this绑定差异function Counter() { this.count 0;// ES5方式需要额外绑定this var self this; setInterval(function() { self.count; }, 1000);// ES6箭头函数自动绑定词法this setInterval(() { this.count; }, 1000);}3)类语法// ES5原型继承function Person(name) { this.name name;}Person.prototype.sayHello function() { console.log(Hello, this.name);};// ES6类语法class Person { constructor(name) { this.name name; }sayHello() { console.log(Hello, ${this.name}); }// 静态方法 static createAnonymous() { return new Person(Anonymous); }}class Student extends Person { constructor(name, grade) { super(name); this.grade grade; }}4)模块系统// math.jsexport function add(a, b) { return a b;}export const PI 3.14159;// app.jsimport { add, PI } from ./math.js;console.log(add(2, PI)); // 5.14159// 默认导出// logger.jsexport default function(message) { console.log(message);}// app.jsimport log from ./logger.js;log(Hello Modules!);5)Promise与异步编程// 回调地狱示例getData(function(a) { getMoreData(a, function(b) { getMoreData(b, function(c) { console.log(c); }); });});// Promise解决方案getData() .then(a getMoreData(a)) .then(b getMoreData(b)) .then(c console.log(c)) .catch(error console.error(error));// async/await语法糖async function fetchData() { try { const a await getData(); const b await getMoreData(a); const c await getMoreData(b); console.log(c); } catch (error) { console.error(error); }}2.3 最新的ECMAScript特性1)可选链操作符(?.)const user { profile: { name: John, address: { city: New York } }};// 传统方式const city user user.profile user.profile.address user.profile.address.city;// 可选链const city user?.profile?.address?.city; // New Yorkconst zipCode user?.profile?.address?.zipCode; // undefined而不是错误2) 空值合并运算符(??)// 传统方式const configValue (config.setting ! null config.setting ! undefined) ? config.setting : default;// 空值合并const configValue config.setting ?? default;// 与||的区别0 || default // default (0是falsy)0 ?? default // 0 (只有null/undefined会触发默认值)3)动态导入// 静态导入// import { largeModule } from ./largeModule.js; // 初始加载// 动态导入button.addEventListener(click, async () { const module await import(./largeModule.js); module.largeFunction();});三、JavaScript运行环境3.1 浏览器环境浏览器提供完整的JavaScript执行环境包括JavaScript引擎解析和执行代码DOM API文档操作BOM API浏览器窗口操作事件循环处理异步操作// 浏览器环境示例document.getElementById(myButton).addEventListener(click, () { fetch(https://api.example.com/data) .then(response response.json()) .then(data { localStorage.setItem(userData, JSON.stringify(data)); history.pushState({}, , /new-page); });});3.2 Node.js环境Node.js基于Chrome V8引擎提供了服务器端JavaScript运行环境CommonJS模块系统文件系统访问网络操作原生扩展支持// Node.js示例const http require(http);const fs require(fs).promises;const server http.createServer(async (req, res) { try { const data await fs.readFile(./index.html); res.writeHead(200, { Content-Type: text/html }); res.end(data); } catch (err) { res.writeHead(500); res.end(err.message); }});server.listen(3000, () { console.log(Server running on http://localhost:3000);});3.3 其它运行环境Deno安全的TypeScript运行时Bun高性能JavaScript运行时Electron桌面应用开发React Native移动应用开发