第1篇：JS是什么？能做什么？

橘朵
65 阅读6分钟

大家好，我是橘朵～ 做前端这么多年，踩过不少坑，也沉淀了很多基础知识点。最近打算把JS的核心知识系统梳理一遍，做成《JS从零入门基础教程》专辑，一方面是帮自己巩固基础，另一方面也希望能帮到刚入门前端、想系统学JS的朋友。

专辑的第1篇，帮大家搞懂「JS到底是什么、它是怎么来的、能做什么」。

适合人群：零基础前端新手、入门1-2年，对JS基础模糊的开发者；

阅读收获：搞懂JS的核心定义、发展历史、核心特点，分清ECMAScript/DOM/BOM的区别，知道JS在实际开发中的应用场景。

1.  先搞懂：JavaScript到底是什么？

J很多新手会把JavaScript和Java搞混——其实两者半毛钱关系都没有，只是名字像而已（当年网景公司为了蹭Java的热度，才取名JavaScript）。

JavaScript是一种轻量级、解释型或即时编译型(JIT)的编程语言。它最开始被设计用于增强网页的交互性，现在已经是Web开发的核心技术之一。

用通俗点的话解释：**JavaScript(简称JS)，就是一门能让网页“动起来”、和用户互动的编程语言。**它主要运行在浏览器里，也能通过Node.js运行在服务器上。

举个最简单的例子：你点击网页上的“按钮”，弹出一个提示框；输入框输入内容，实时校验格式——这些功能，基本都是JS实现的。

要成为一名前端开发者，必须要学会的三样东西：HTML、CSS、JavaScript。他们在开发中扮演着不同的角色，承担不同的职责，共同协作完成网页的开发。

  • HTML负责网页的结构，相当于人体的骨架，比如标题、段落、图片等。

  • CSS负责美化页面，它控制网页的布局、颜色、字体等这些视觉效果。

  • JavaScript则是负责行动，比如交互、动态效果以及与后端服务器的通信，都是JavaScript的工作。

2.  JS的发展历史：为什么它能成为前端“霸主”？

了解JS的历史，能帮我们更好地理解它的设计思路，也能明白“为什么现在前端都离不开JS”。

  1. 1995年，网景公司开发了一门脚本语言，最初叫“LiveScript”，后来与sun公司合作，改为“JavaScript”，主要是为了解决网页交互的问题，比如表单校验。

  2. 1996年，IE模仿JS开发了“JScript”，这也导致不同的浏览器里的脚本语言不兼容，那时最头疼的就是解决“浏览器兼容性”问题，我刚开始工作时，经常要花时间调试兼容性。

  3. 1998年，为了解决兼容性问题，ECMA国际组织发布了统一的标准，这个标准被命名为ECMAScript (简称ES)，规定了JS的核心语法和特性，后续所有浏览器都按照这个标准实现JS。

  4. 从2009年发布的ES5，到2015年发布的ES6(ES2015) 爆发，新增了let/const、箭头函数等常用特性，也是我平时开发中用得最多的版本。这之后ECMAScript保持每年更新一个小版本，JS越来越完善，用途也越来越广。

这些版本的更新时间不用死记硬背，重点记住「ECMAScript是JS的标准，JS是ECMAScript的实现」——简单说，ECMAScript定规矩，JS按规矩办事，这样不同浏览器里的JS才能保持一致。

3.  JS的核心特点：为什么它这么“好用”?

JS能成为前端的核心编程语言，离不开它的几个核心特点，我会结合书上的解释以及自己的理解，尽量讲清楚：

3.1 轻量级、上手快

轻量级指的是语言设计简单、核心库规模小、运行所占用的资源(内存和CPU)低。JS不需要复杂的编译步骤，和Java不同，Java需要先编译才能运行，JS写好代码后，在浏览器里就能直接运行；而且它的语法相对简单，上手门槛很低，3天就能写出一个JS交互效果，比如点击按钮弹出提示框。

3.2 解释型+即时编译(JIT)

解释型指的是代码运行时由解释器逐行翻译并执行，不需要预先编译为机器码。它的工作原理：解释器读取一行代码 → 语法分析 → 转换为中间指令 → 立即执行。也就是说，浏览器读一行 JS 代码，就执行一行，不用提前‘翻译’。比如我们写alert("hello")，浏览器读到这行，就直接弹出提示框，不用额外操作。

**即时编译型(JIT)**指的是在运行时动态将热点代码(频繁执行的代码)编译为机器码。它的工作原理：代码首次执行时由解释器处理 → 识别热点代码 → JIT编译器生成优化后的机器码 → 后续直接执行机器码。简单点用大白话讲就是，浏览器第一次读代码时，还是逐行执行；但发现某段代码经常用（比如一个点击按钮的函数，用户会反复点击），就提前把这段代码“翻译”好存起来，下次用户再点击，直接执行存好的代码，速度更快。

上面讲的原理不用深究，记住一句话：JS原本是“解释型语言”（浏览器边读代码边运行），后来为了提升速度，加入了“即时编译（JIT）”——简单说，就是浏览器会把常用的代码提前编译好，运行速度更快，兼顾了“上手快”和“运行快”，这也是JS能做复杂应用的原因之一。

3.3 动态弱类型

JS是一种动态类型语言，变量的类型在运行时确定，并且能够在开发的过程中改变。它也是弱类型语言，在需要时自动进行类型转换，增加灵活性的同时也带来一些难以发现的错误。

这是JS的“优点”，也是新手最容易踩坑的地方——定义变量时，不用指定变量类型，比如不用说明是数字、字符串，变量类型会根据赋值自动变化。

let a = 10; // 此时a是数字类型
a = "hello"; // 此时a变成字符串类型，不会报错
console.log(a); // 输出：hello

动态类型虽然方便，但容易出错，比如不小心把数字改成字符串，后续计算会出问题，新手写代码时，要尽量保持变量类型一致。

错误示例：变量类型混乱导致计算出错

let num = 10; // 数字类型，想用来做加法
num = "10"; // 不小心改成字符串类型
let result = num + 5; // 预期输出15，实际输出"105"
console.log(result); // 打印结果："105"

3.4 基于原型：JS独特的继承方式

JavaScript使用原型链(通过一种链式结构，让对象能够访问其他对象的属性和方法)机制实现对象的继承。

这是JS和很多编程语言（比如Java）不一样的地方，也是新手容易困惑的点——JS没有传统的“类继承”，而是靠原型链实现对象继承，简单说就是“每个对象都有一个原型，原型本身也是对象，对象可以顺着原型链，访问到原型上的属性和方法”。

刚学JS时，一直混淆原型和类，写继承代码时总出错，后来才明白，原型链其实更灵活。举个简单例子：

// 1. 定义一个原型对象（包含公共方法）
let personProto = {
  sayHello: function() {
    console.log(`你好，我是${this.name}`);
  }
};
// 2. 创建一个对象，继承personProto的原型
let person = Object.create(personProto);
person.name = "前端老鸟";
// 3. 调用原型上的方法（顺着原型链找到sayHello）
person.sayHello(); // 输出：你好，我是前端老鸟

新手不用一开始就深究原型链的底层原理，先记住“JS靠原型链实现继承”，后续学对象、类时，再慢慢吃透，我当年也是写多了项目才真正理解。

举个简单的原型继承的例子：

// 1. 定义原型（父对象，包含公共属性和方法）
let studentProto = {
  age: 18, // 公共属性
  study: function() { // 公共方法
    console.log(`${this.name}正在学习JS基础`);
  }
};
// 2. 创建第一个学生对象，继承原型
let student1 = Object.create(studentProto);
student1.name = "小明"; // 给当前对象添加专属属性
// 3. 创建第二个学生对象，继承原型
let student2 = Object.create(studentProto);
student2.name = "小红";
// 4. 调用原型上的方法，两个对象都能使用
student1.study(); // 输出：小明正在学习JS基础
student2.study(); // 输出：小红正在学习JS基础
// 5. 访问原型上的公共属性
console.log(student1.age); // 输出：18

这个实例能明显看出：原型上的属性和方法，所有继承它的对象都能共用，不用重复编写，这就是原型链的核心作用。

3.5 函数是一等公民：函数的“万能用法”

函数在JavaScript中被视为对象，可以像任何变量一样被传递、赋值或作为参数传递给其他函数。

这是JS非常核心、也非常实用的一个特点——函数和数字、字符串一样，都是“一等公民”，可以像变量一样被赋值、传递，也可以作为参数传入其他函数，还能作为函数的返回值，非常灵活。

实际开发中，这个特性用得特别多，比如封装工具函数、处理异步操作、写框架钩子等。举个最常用的例子：

// 1. 定义一个函数（像变量一样）
let add = function(a, b) {
  return a + b;
};
// 2. 函数作为参数，传入另一个函数
function calculate(a, b, fn) {
  return fn(a, b); // 调用传入的函数
}
// 3. 调用函数，传递add函数作为参数
let result = calculate(2, 3, add);
console.log(result); // 输出：5

这个特点是后续学回调函数、高阶函数、闭包的基础，新手一定要掌握，我写项目时，经常用这个特性封装通用逻辑，减少重复代码。

3.6 事件驱动与异步执行：JS的“非阻塞神器”

这是JS能做好网页交互、处理耗时操作的关键——JS采用事件驱动机制，能实时响应用户操作，比如点击按钮、输入文字、滚动页面；同时通过回调函数、Promise以及async/await等机制，支持异步操作，不用等待耗时任务完成，就能继续执行后续代码，避免页面“卡住”（非阻塞），比如网络请求、文件读取。

这里结合日常用的回调函数、Promise，举个简单易懂的例子：

// 1. 事件驱动：给按钮绑定点击事件（响应用户操作）
document.getElementById("btn").onclick = function() {
  // 2. 异步操作：模拟网络请求（耗时任务），用Promise实现
  new Promise(function(resolve) {
    setTimeout(function() {
      resolve("请求成功，返回数据"); // 异步任务完成
    }, 1000); // 模拟1秒耗时
  }).then(function(data) {
    // 3. 异步任务完成后，执行后续操作（不阻塞页面）
    console.log(data); // 输出：请求成功，返回数据
    alert("请求完成！");
  });
  // 4. 异步任务执行时，会继续执行这句代码（非阻塞）
  console.log("正在请求数据，请稍候...");
};

异步是前端的重点，也是新手的难点，我刚学的时候，踩过很多的坑，这里先掌握核心概念即可，后续会专门讲Promise、async/await的用法，帮大家彻底吃透异步。

举个错误例子：误以为异步代码会按顺序执行

console.log("1. 开始请求数据");
// 模拟网络请求（1秒后完成）
setTimeout(function() {
  console.log("2. 数据请求成功");
}, 1000);
console.log("3. 请求结束");
// 预期输出：1→2→3，实际输出：1→3→2
// 原因：setTimeout是异步代码，会“插队”执行，不阻塞后续代码

异步代码不会按“书写顺序”执行，会先执行同步代码，再执行异步代码，后续文章会专门讲这个知识点，帮大家彻底吃透。

3.7 跨平台、用途广

JS最初只能在浏览器里运行，现在通过Node.js，能运行在服务器端，比如开发后端接口；还能用来开发小程序、APP、桌面应用（Electron）——我近几年的项目里，就有用JS开发小程序的经历，一门语言能搞定多个场景，性价比很高。

4. JS的三大核心组成：ECMAScript、DOM、BOM(必懂!)

掌握了 JS 的核心特点，再拆解它的‘核心结构’—— 新手必懂的 ECMAScript、DOM、BOM，三者分工明确，缺一不可，就像“厨师+工具+场地”，协同完成前端开发。新手很容易混淆这三个概念，我用“分工合作”的思路，帮大家分清，一看就懂：

JavaScript主要由三部分组成：ECMAScript（JS的核心语法）、DOM（JS操作网页元素的工具）、BOM（JS操作浏览器的工具），三者分工明确、协同工作。

4.1 ECMAScript：JS的“核心语法”

ECMAScript是JS的基础语法，比如变量定义（let/const）、函数、循环、条件判断、数组、对象等，是JS的“灵魂”——不管是在浏览器里运行，还是在Node.js里运行，ECMAScript的语法都是一样的。比如我们上面写的let a = 10，就是ECMAScript的语法，也是我平时写代码最基础、最常用的部分。

Web浏览器、Node.js都是ECMAScript “运行载体”，他们先实现ECMAScript的基本语法，再加上自己专属的功能扩展，比如浏览器的 DOM、Node.js 的文件操作。

举个实例：同样一句let a = 10; console.log(a); ，在浏览器控制台运行、在Node.js里运行，结果都是10（ECMAScript语法一致）；但浏览器里能写document.getElementById("btn")（DOM功能），Node.js里不能，因为Node.js没有DOM这个扩展。

4.2 DOM：JS操作“网页元素”的工具

DOM（文档对象模型，Document Object Model），它是浏览器给JS搭的一座“桥梁”，把网页上的所有元素（比如按钮、输入框、div等），变成JS能操作的“对象”——比如修改按钮的文字、隐藏某个元素、给元素绑定点击事件，都需要用到DOM，没有DOM，JS就只能“纸上谈兵”，碰不到网页的任何元素。

再说说DOM的“分层节点”和“逻辑树”：

DOM把整个页面抽象为一组分层节点。DOM 模型用一个逻辑树来表示一个文档，可以把整个网页比作“一个家谱”，DOM把这个家谱变成了一棵“逻辑树”：树的每个分支的终点都是一个节点 (node)，相当于家谱里的每一个人，每个节点都包含着对象（这个人的姓名、年龄等信息）。

简单说，网页的html标签就是节点——<html>是树根，<head>、<body>是树干，<p>是树枝，标签里的文字就是树叶，层层嵌套，形成了DOM树。

<html>
  <head><title>Sample Page</title></head>
  <body>
    <p>
      Hello World!
    </p>
  </body>
</html>

DOM树的核心就是“层级嵌套”，父节点包含子节点，JS操作DOM，本质就是“找到这棵树上的某个节点”，再修改它的内容或样式。

DOM 的方法 (methods) ，简单说就是JS能调用的工具，让我们可以用特定方式随意操作这个树，比如删除一个“树枝”（删除div）、添加一片“树叶”（添加文字）、修改某个“人的信息”（修改标签内容/样式）。

我们还能给这些“节点”（标签）绑定“事件处理器”（比如点击、鼠标悬浮），一旦触发操作（比如点击按钮），对应的JS代码就会执行——这也是平时做网页交互的核心逻辑。

补充一点DOM的历史，不用记，了解即可：1998 年 10 月，DOM Level 1 成为 W3C 的第一个正式推荐标准（之前并DOM 没有统一规范）。它主要有两个模块，DOM Core和DOM HTML。

  1. DOM Core是核心模块，是基础款工具，主要对应XML文档，能访问和操作文档的任意部分，但用在网页开发里有点繁琐；

  2. DOM HTML是HTML扩展模块，专门为网页量身定制的“升级款”，在DOM Core的基础上，增加了很多HTML专属的对象和方法（比如直接获取按钮、输入框），我平时开发网页，用的基本都是DOM HTML的方法，更省事、更贴合前端需求。

除了这两个核心模块，还有一些其他语言也有自己的DOM标准（比如SVG、MathML等，都是特定场景用的标记语言），但这些和我们前端日常开发关系不大，不用深入研究。

新手重点掌握DOM HTML的用法就够了，DOM Core了解即可，不用纠结复杂的XML相关操作。

这是前端最基础的DOM操作示例：

// 1. 获取网页上id为"btn"的按钮
let btn = document.getElementById("btn");
// 2. 给按钮绑定点击事件
btn.onclick = function() {
  // 3. 点击按钮后，修改按钮的文字
  btn.innerText = "已点击";
  // 4. 弹出提示框
  alert("点击成功！");
};

这段代码，只要网页上有一个id为“btn”的按钮，就能实现“点击按钮修改文字+弹出提示”的效果，实际开发中，这类操作比比皆是。

再举一个修改元素样式的示例：

<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>DOM操作样式实例</title>
</head>
<body>
    <div id="box">我是测试盒子</div>
    <script>
        // 1. 获取div元素
        let box = document.getElementById("box");
        // 2. 修改元素样式（背景色、字体大小、颜色）
        box.style.backgroundColor = "lightblue";
        box.style.fontSize = "20px";
        box.style.color = "red";
        // 3. 修改元素内容
        box.innerText = "我被JS修改啦！";
    </script>
</body>
</html>

运行这段代码，就能看到div的样式和内容被JS修改，这就是DOM最常用的功能之一。

4.3 BOM：JS操作“浏览器”的工具

BOM（浏览器对象模型），就是JS操作浏览器的工具，用于访问和操作浏览器的窗口，比如弹出提示框（alert）、刷新页面、获取浏览器地址、控制浏览器窗口大小等——这些操作和网页内容无关，只和浏览器本身有关。

举个常用例子：

// 1. 刷新当前页面(开发中调试常用)
// location.reload(); // 取消注释即可测试
// 2. 弹出确认框（点击确定返回true，取消返回false）
let isConfirm = confirm("确定要删除这条内容吗?");
console.log(isConfirm); // 打印用户的选择
// 3. 获取浏览器地址（当前页面的URL）
console.log("当前浏览器地址：", location.href);
// 4. 跳转到新页面
// location.href = "https://www.baidu.com"; // 取消注释即可跳转
// 5. 弹出提示框（最基础的BOM功能）
alert("这是BOM的alert功能");
// 6. 获取浏览器窗口大小（补充实例）
console.log("浏览器窗口宽度：", window.innerWidth);
console.log("浏览器窗口高度：", window.innerHeight);

BOM 在 HTML5 之前，没有统一的官方标准，不同浏览器对 BOM 的实现存在差异，直到 HTML5 才以正式规范的形式，涵盖了尽可能多的 BOM 特性。

BOM主要针对浏览器窗口和子窗口（frame），不过通常会把浏览器的扩展都归在BOM的范畴内。比如下面这些扩展：

  • 弹出新浏览器窗口；

  • 移动、缩放和关闭浏览器窗口；

  • navigator对象，提供关于浏览器的详尽信息；

  • location对象，提供浏览器加载页面的详尽信息；

  • screen对象，提供关于用户屏幕分辨率的详尽信息；

  • performance对象，提供浏览器内存占用、导航行为和时间统计的详尽信息；

  • 对cookie的支持；

  • 其他自定义对象，如XMLHttpRequest和IE的ActiveXObject。

5.  JS的实际应用场景

  1. 网页交互：这是JavaScript最基础的用途。它可以 操作DOM、响应用户事件，进行表单验证以及创建动画效果等，比如表单校验、按钮点击、轮播图、下拉菜单等，几乎所有网页都离不开。

  2. 前端框架开发：现在主流的前端框架（Vue、React、Angular），本质上都是基于JS开发的，可以开发复杂的、类似桌面应用程序的单页面应用，我近几年的项目，基本都是用Vue，学好JS，才能学好这些框架。

  3. 服务器端开发：用Node.js开发后端接口，实现前后端联动（比如用户登录、数据查询），我曾用Node.js开发过小项目的后端，前后端都用JS。

  4. **跨端开发：**小程序（微信、支付宝）、APP（React Native）、桌面应用（Electron），一门语言搞定多端。

  5. 可视化开发：比如网页上的图表（ECharts）、数据可视化大屏，也是用JS实现的，现在很多企业都需要这类需求。

6. 结尾总结

这篇文章讲了JS的核心基础——从“JS是什么”，到“JS的历史、特点、三大组成、应用场景”。

总结一下核心要点：

  • JS是一门能让网页交互、跨平台的编程语言，和Java没关系；

  • ECMAScript是JS的核心语法，DOM操作网页，BOM操作浏览器；

  • JS上手快，但动态类型容易踩坑，新手要多写实战代码。

下一篇文章，重点讲解JS入门必懂的两个核心标签——「

avatar
文章
阅读
粉丝