简介

苓渊大约 7 分钟

应用领域

前端开发：JavaScript 是构建现代 Web 应用的核心语言，配合 HTML 和 CSS 实现动态交互式页面。它与诸如 React、Vue.js、Angular 等框架/库结合使用，极大提升了开发效率。

后端开发：通过 Node.js，JavaScript 可以用作后端语言，处理服务器逻辑、数据库交互等，像 Express.js 这样的框架是常见的后端开发工具。

移动应用开发：使用 React Native 或 Ionic 等框架，JavaScript 可以用于构建跨平台的移动应用，编写一次代码即可在 iOS 和 Android 上运行。

桌面应用开发：通过 Electron 框架，JavaScript 也可以用来开发桌面应用程序，如 Visual Studio Code 和 Slack 都是用 Electron 构建的。

游戏开发：JavaScript 在浏览器游戏中被广泛应用，通过 Canvas API 或 WebGL，可以绘制 2D 或 3D 游戏图像。此外，框架如 Phaser 和 Babylon.js 使开发游戏更加便捷。

机器学习与人工智能：JavaScript 通过库如 TensorFlow.js，可以在浏览器中进行机器学习模型的训练与推理，拓展了它在数据科学领域的应用。

执行方式

JavaScript 代码的执行过程取决于它运行的环境。最常见的环境有浏览器和 Node.js.

浏览器都有内置的 JavaScript 引擎，可以解释并执行 JavaScript 代码。

Node.js 是基于 Chrome 的 V8 引擎构建的，可以在服务器端执行 JavaScript 代码。在 Node.js 中，JavaScript 被用作服务器端语言，处理文件、数据库、网络请求等任务。

组成部分

JavaScript 由三个主要的组成部分构成，它们共同定义了这门语言的功能和特点：

ECMAScript.
DOM.
BOM.

ECMAScript 是 JavaScript 的语言标准，定义了这门语言的基本语法和核心功能。由 ECMA 国际组织（ECMA）标准化，最常见的版本是 ES5（ECMAScript 5）和 ES6（ECMAScript 6，也叫 ES2015），随后每年都会有新的 ECMAScript 版本发布，如 ES2016、ES2017 等。

DOM 是 Document Object Model 的缩写，它是 Web 浏览器中处理 HTML 和 XML 文档的编程接口。通过 DOM，JavaScript 可以动态地操作网页内容和结构。

BOM 是 Browser Object Model 的缩写，指的是浏览器本身的 API，允许 JavaScript 访问和控制浏览器窗口及其功能。它扩展了 JavaScript 的能力，让它不仅能操作网页内容，还能与浏览器进行交互。

编写方式

内嵌式

JavaScript 代码可以直接嵌入在 HTML 文档的 <script> 标签中。这种方式适用于一些简单的、局部的 JavaScript 操作。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Inline JavaScript Example</title>
  <script>
    // 这里是内嵌的 JavaScript
    console.log("Hello, JavaScript!");
  </script>
</head>
</html>

外部文件

为了便于管理和维护，通常将 JavaScript 代码存放在独立的 .js 文件中，然后通过 <script> 标签引入。外部文件的方式使得代码更加模块化，也便于多个页面共享同一段 JavaScript 代码。

console.log("This is an external JavaScript file.");

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>External JavaScript Example</title>
  <!-- 引入外部 JavaScript 文件 -->
  <script src="app.js"></script> 
</head>
</html>

内联式

JavaScript 代码可以直接写在 HTML 标签的属性中，通常用于处理简单的事件，例如按钮点击、表单提交等。

点击事件处理

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Inline JavaScript Example</title>
</head>
<body>
  <button onclick="alert('Button clicked!')">Click Me</button> <!-- 内联 JavaScript -->
</body>
</html>

命名规范

JavaScript 的命名规范主要通过一致性的命名约定来增强代码的可读性、可维护性。常见的规范有：

驼峰命名法（Camel Case）：用于变量、函数、对象属性等。

帕斯卡命名法（Pascal Case）：用于类和构造函数的命名。

全大写字母加下划线（SNAKE_CASE）：用于常量命名。

文件通常使用小写字母和连字符（kebab-case）命名。

遵循这些命名规范将使得 JavaScript 代码更加清晰且易于维护。

作用域

作用域是指程序中变量、函数或对象的可见性和访问权限。

全局作用域

全局作用域中的变量和函数可以在代码的任何地方访问。

通过 var、let 或 const 在全局范围内声明的变量都是全局变量。

全局变量会成为 window 对象的属性（在浏览器环境中），意味着它们可以通过 window.variableName 访问。

var globalVar = 'I am global';

function displayGlobalVar() {
  console.log(globalVar);  // 可以访问全局变量
}

displayGlobalVar();  // 输出: I am global

函数作用域

使用 var 关键字声明的变量具有函数作用域，即变量在声明它的函数内可见。

函数作用域内声明的变量在函数外部是不可访问的。

function myFunction() {
  var functionVar = 'I am inside a function';
  console.log(functionVar);  // 函数内部可以访问变量
}

myFunction();
console.log(functionVar);  // 抛出错误: functionVar is not defined

块级作用域

使用 let 和 const 声明的变量具有块级作用域，即它们只在声明所在的代码块 {} 内可见。

代码块可以是 if、for 等控制结构中的代码块，也可以是函数体内的代码块。

if (true) {
  let blockVar = 'I am inside a block';
  const anotherBlockVar = 'Another block variable';
  console.log(blockVar);  // 可以访问块内的变量
}

console.log(blockVar);  // 抛出错误: blockVar is not defined

变量提升

变量提升是指 JavaScript 在执行代码之前，会将变量声明（var 关键字）和函数声明“提升”到其作用域的顶部。提升只会提升声明部分，不会提升赋值部分。

这意味着可以在声明之前访问该变量，但该变量的值在赋值之前是 undefined.

与 var 声明的变量类似，函数声明也会被提升到作用域的顶部。不同的是，函数提升时会将整个函数定义提升到顶部，因此可以在函数声明之前调用它。

虽然 let 和 const 也会被提升，但它们的行为与 var 不同。let 和 const 的变量在代码执行前不会被初始化，因此在声明之前访问它们会导致引用错误（ReferenceError）。这种行为被称为 “暂时性死区”（Temporal Dead Zone，TDZ）。

const 的行为与 let 类似，但 const 声明的变量必须在声明时初始化，并且不能再次赋值。

作用域链

当在某个作用域中访问一个变量时，JavaScript 会从当前作用域开始查找变量，如果没有找到，就会向上查找父级作用域，直到全局作用域。这种从内到外查找变量的机制被称为作用域链。

立即执行函数表达式

IIFE（Immediately Invoked Function Expression）是一种常见的技术，通常用于创建独立的作用域来避免全局变量污染。IIFE 是一个立即执行的函数表达式，通常使用匿名函数封装代码。

(function() {
  let scopedVar = 'I am in IIFE';
  console.log(scopedVar);  // 可以访问 scopedVar
})();

console.log(scopedVar);  // 抛出错误: scopedVar is not defined