S+Zn

什么是 JavaScript

5 min read

JavaScript 概述

定义

JavaScript（简称JS）是一种动态、弱类型的解释型编程语言，主要用于Web开发，支持面向对象、函数式和命令式编程范式。

核心特性

语言特征

  • 动态类型：变量类型在运行时确定
  • 解释执行：无需编译，由JavaScript引擎直接执行
  • 原型继承：基于原型链的面向对象机制
  • 一等函数：函数可作为值传递、存储和操作

执行环境

// 浏览器环境
console.log(window);        // 全局对象
document.getElementById();  // DOM API
 
// Node.js环境  
console.log(global);        // 全局对象
require('fs');             // 文件系统模块

应用领域

领域技术栈典型应用
前端开发React, Vue, AngularSPA、移动端Web应用
后端开发Node.js, ExpressAPI服务、微服务
移动应用React Native, Cordova跨平台移动应用
桌面应用Electron, TauriVS Code, Discord
游戏开发Phaser, Three.js网页游戏、3D可视化

JavaScript 引擎

主流引擎

  • V8（Chrome, Node.js）：高性能，即时编译
  • SpiderMonkey（Firefox）：Mozilla开发的引擎
  • JavaScriptCore（Safari）：WebKit项目的一部分
  • Chakra（旧版Edge）：Microsoft开发

性能特性

// JIT编译优化示例
function hotFunction(n) {
    // 频繁调用的函数会被优化
    return n * n + n;
}
 
// 引擎会对热点代码进行优化
for (let i = 0; i < 10000; i++) {
    hotFunction(i);
}

版本演进

ES版本里程碑

  • ES5 (2009)：strict mode、JSON、Array方法
  • ES6/ES2015 (2015)：let/const、箭头函数、模块
  • ES2017：async/await
  • ES2020：可选链、空值合并操作符
  • ES2022：顶层await、私有字段

现代语法特性

// ES6+特性示例
const { name, age = 18 } = user;          // 解构赋值
const fullName = `${firstName} ${lastName}`;  // 模板字符串
const numbers = [...array1, ...array2];   // 扩展操作符
const result = await fetchData();         // async/await
const value = obj?.property?.value;       // 可选链
const data = input ?? defaultValue;       // 空值合并

与其他语言对比

JavaScript vs Java

特性JavaScriptJava
类型系统动态弱类型静态强类型
编译解释执行编译执行
内存管理自动垃圾回收自动垃圾回收
继承原型继承类继承
用途Web、全栈企业级后端

类型系统差异

// JavaScript - 动态类型
let variable = "字符串";
variable = 42;           // 运行时改变类型
variable = true;         // 合法操作
 
// 自动类型转换
console.log("5" + 3);    // "53"（字符串拼接）
console.log("5" - 3);    // 2（数值运算）

运行时环境

浏览器中的JavaScript

// Web APIs访问
navigator.geolocation.getCurrentPosition();
localStorage.setItem('key', 'value');
fetch('/api/data').then(response => response.json());
 
// 事件驱动
document.addEventListener('click', handleClick);

Node.js中的JavaScript

// 系统级API访问
const fs = require('fs');
const path = require('path');
const http = require('http');
 
// 创建HTTP服务器
const server = http.createServer((req, res) => {
    res.end('Hello World');
});

性能特征

优势

  • JIT编译：运行时优化热点代码
  • 事件驱动：高效处理I/O密集型任务
  • 单线程：避免线程同步开销
  • 垃圾回收：自动内存管理

限制

  • 单线程：CPU密集型任务性能有限
  • 动态特性：某些优化难度较大
  • 类型检查：运行时才能发现类型错误

学习路径

基础阶段

  1. JavaScript语法基础
  2. DOM操作与事件处理
  3. 异步编程基础
  4. ES6+现代特性

进阶阶段

  1. 设计模式与架构
  2. 前端框架深入
  3. 性能优化技巧
  4. 工程化与工具链

高级阶段

  1. 引擎原理理解
  2. 编译器与AST操作
  3. 微前端架构
  4. 全栈开发

生态系统

包管理器

  • npm：Node.js默认包管理器
  • yarn：Facebook开发的替代方案
  • pnpm：高效的磁盘空间利用

构建工具

  • Webpack：模块打包工具
  • Vite：现代前端构建工具
  • Rollup：库打包工具

开发工具

  • VS Code：主流代码编辑器
  • Chrome DevTools：浏览器调试工具
  • ESLint：代码质量检查工具

下一篇：HTML中的JavaScript

Graph View

Backlinks