菜单

JavaScript 基础

相关源文件

本文档介绍了 JavaScript 的基本概念、语法和特性。它为刚接触这门语言的开发者或希望巩固基础知识的开发者提供了一个起点。有关更高级的执行概念,请参阅 JavaScript 执行模型

什么是 JavaScript?

JavaScript 是一种多范式编程语言,最初设计用于为网页添加交互性。尽管名字里有“Java”,但 JavaScript 与 Java 并无关系——这个名字是在其首次发布时出于营销原因而选择的。JavaScript 现在是世界上最普遍的编程语言之一,不仅用于浏览器,还用于服务器环境、移动应用程序和桌面软件。

JavaScript 语言规范

  • 官方名称为 ECMAScript(当前版本:ECMAScript 2019/ES2019)
  • 由 TC39 委员会维护,并由 ECMA 国际标准化
  • 所有主流浏览器都维护着符合标准的实现

JavaScript 执行环境图

来源: get-started/ch1.md312-380

JavaScript 值和类型

JavaScript 有两大类值:原始类型和对象。理解不同的值类型是有效使用 JavaScript 的基础。

基本类型

原始值是 JavaScript 中最简单的数据类型

类型示例描述
字符串"Hello"文本数据
数字42, 3.14数值(整数和浮点数)
布尔值true, false逻辑值
未定义未定义表示未定义的缺失值
nullnull表示有意缺失的值
symbolSymbol("description")唯一且不可变的标识符
bigint123n任意精度整数

对象类型

对象是属性和方法的集合

来源: get-started/ch2.md41-181

类型判断

typeof 操作符用于判断值的类型

表达式返回值
typeof 42"number"
typeof "abc""string"
typeof true"boolean"
typeof undefined"undefined"
typeof null"object" (⚠️ 已知 bug)
typeof { a: 1 }"object"
typeof [1,2,3]"object"
typeof function(){}"function"

来源: get-started/ch2.md163-181

变量声明

JavaScript 提供了多种声明变量的方式,每种方式都有不同的作用域和重新赋值行为。

变量声明对比

功能varletconst
范围函数作用域块作用域块作用域
提升 (Hoisting)被提升,初始值为 undefined被提升,但在“暂时性死区”被提升,但在“暂时性死区”
重新赋值允许允许不允许
同一作用域内重新声明允许不允许不允许
必须初始化

示例行为

来源: get-started/ch2.md185-270

JavaScript 中的函数

函数是 JavaScript 中的一等公民,这意味着它们可以被赋值给变量、作为参数传递,以及从其他函数返回。

函数声明形式

函数特性

  • 函数可以接收参数(输入)
  • 函数可以使用 return 关键字返回值
  • 函数会创建闭包(访问外部作用域变量)
  • 函数可以作为对象的方法
  • 函数可以作为构造函数使用(配合 new

来源: get-started/ch2.md296-375 get-started/apA.md64-182

对象系统

JavaScript 的对象系统基于原型,而非类(尽管 ES6 增加了 class 语法作为原型的语法糖)。

对象创建和用法

可以使用以下方式创建对象:

  • 对象字面量: { key: value }
  • 构造函数: new Constructor()
  • Object.create() 方法
  • ES6 class 语法

原型链图

来源: get-started/ch3.md342-467

JavaScript 的三大支柱

JavaScript 构建于三大基本支柱之上,它们构成了语言的基础。

JavaScript 核心支柱图

来源: get-started/ch4.md12-68

支柱 1:作用域和闭包

作用域是决定变量可以在何处以及如何访问的规则集合

  • 变量被组织到作用域中(函数、块)
  • 嵌套作用域为变量查找创建了“作用域链”
  • 闭包允许函数记住并访问其原始作用域中的变量,即使在别处执行

来源: get-started/ch3.md170-266 get-started/ch4.md12-32

支柱 2:原型

原型系统管理对象关系和行为委托

  • 对象可以通过原型链链接到其他对象
  • 方法和属性通过此链进行委托
  • this 关键字动态指向函数被调用的对象
  • ES6 class 语法构建在原型系统之上

来源: get-started/ch3.md342-467 get-started/ch4.md34-50

支柱 3:类型和强制转换

JavaScript 的类型系统包括

  • 动态类型(类型与值关联,而非变量)
  • 类型转换(类型间的自动转换)
  • 相等性比较(严格 === vs. 宽松 ==
  • 特定类型的操作和行为

来源: get-started/ch2.md377-514 get-started/ch4.md52-68

比较值

JavaScript 提供了几种比较值的方式,在行为上有重要区别。

相等运算符

运算符姓名行为
==宽松相等 (Loose equality)在比较前执行类型转换
===严格相等 (Strict equality)不进行类型转换,要求类型和值都相同
Object.is()Same-value 相等性类似于 ===,但能正确处理 NaN-0

相等性中的特殊情况

比较=====Object.is()
1 == "1"truefalsefalse
null == undefinedtruefalsefalse
NaN === NaNfalsefalsetrue
0 === -0truetruefalse

对象比较

对象按引用比较,而非内容

来源: get-started/ch2.md377-514

JavaScript 代码组织

JavaScript 提供了几种组织代码的模式,最常见的是对象、类和模块。

ES6 为 JavaScript 引入了 class 语法,尽管它只是原型系统的语法糖

模块

模块提供了一种组织代码和控制功能访问的方式

来源: get-started/ch2.md516-574 get-started/ch2.md578-636

JavaScript 编程范式

JavaScript 是一门多范式语言,支持多种不同的编程风格

范式描述示例模式
过程式以自顶向下、线性流程组织代码顺序函数调用
面向对象通过将逻辑和数据收集到类中来组织代码类、继承
函数式将代码组织成纯函数和函数组合高阶函数、不可变性

来源: get-started/ch1.md156-176

实用 JavaScript 技巧

  • 对块作用域变量使用 letconst,对函数作用域变量使用 var
  • 为了更好的调试,倾向于使用显式函数名而不是匿名函数
  • 理解类型转换,以避免意外的类型转换
  • 注意对象引用的工作方式,以避免意外的变异
  • 默认使用严格相等(===),但要了解何时使用宽松相等(==)更有用
  • 记住 JavaScript 文件是共享全局作用域的独立程序

来源: get-started/ch2.md18-39 get-started/ch2.md233-236