JavaScript 语言基础 on ClearSec Wiki

JavaScript 的变量与变量类型

Mon, 01 Jan 0001 00:00:00 +0000

JavaScript 的变量与变量类型

变量声明

JavaScript 语言之中声明变量的关键字有三个，分别为 var, let, const。从字面意义上来看，const 用于声明常量，而 var, let 则用于声明变量。在 var, let 选取的问题上，编者建议尽量全部使用 let 关键字声明变量以防止混乱，具体原因可以参照讲解 JavaScript 函数部分的变量提升注解。

在运行中，直接使用未出现过的变量相当于 var 声明，但这是很不好的编码习惯。

var a = 0;
a = 1; // OK
let b = "Test string";
b = "New string"; // OK
const c = 0;
c = 2; // Error!

另外，由于 JavaScript 是弱类型的，所以重新给变量赋值的时候可以改变类型：

let weakType = 0;
weakType = "You are a string now!"; // OK

变量类型

注意

JavaScript 的魔法

JavaScript 是一个在两周左右时间就设计完成的语言，即使这门语言的设计者水平很高，但不可否认的是如此紧迫的工期也造成了 JavaScript 之中有许多反直觉的设计缺陷，这些缺陷编者会在文档各对应部分进行讲解。

JavaScript 的基础类型和基础运算符的表现在大多数情况下和 C/C++ 语言类似，但是由于 JavaScript 的语言特性或缺陷，这些基础运算符在另外一些常识之外的运算之中有着相当超凡脱俗的和反直觉的表现。你可以认为这是 JavaScript 的设计缺陷，也可以认为是这门语言的语法特性。

其中，已经被作为语法特性而被广泛运用的用法将会在正文中指出，而其他用法将会在这一节的最后具体介绍。如果你是 JavaScript 语言的初学者，编者并不建议阅读这一部分，因为这可能会造成不良好的编码习惯和编程思维的混乱。就初学而言，阅读本文档的正文就足以写出实用且强大的代码。但如果你想要深入了解这一门语言，编者认为理解这些运算符的具体表现是有必要的。 JavaScript 语言支持七种基本类型，即数字、大整数、字符串、布尔值、symbol 类型、undefined 类型和 null 类型。前五个类型是容易理解的，而后两者则会在最后讲解。

JavaScript 的控制语句

Mon, 01 Jan 0001 00:00:00 +0000

JavaScript 的控制语句

JavaScript 支持的控制语句关键字包括 if, else, switch, case, while, do, for，其用法和 C/C++ 语言几乎完全一致。这里给出样例程序不进行具体的讲解：

let i = 0;
if (i > 0) {
 console.log("i is greater than 0");
} else {
 console.log("i is not greater than 0");
}

let arr = [1, 2, 3, 4, 5];
for (let j = 0; j < arr.length; ++j) {
 console.log(`arr[${j}] = ${arr[j]}\n`);
}

不过需要注意的是，涉及到条件判断的时候会发生强制类型转换（将变量强制转换为布尔值），其逻辑为：

undefined, null, 0, NaN, "", false 转化为 false
其余均转化为 true（无论是对象还是基本类型）

值得注意的是布尔值类型的包装类 Boolean 对象，无论其表示 true 还是 false，其均会被转化为 true，所以需要特别注意类似下述程序的情况：

if (new Boolean(false)) {
 console.log("WTF?");
} // "WTF?"

值得注意的是 for 循环除了经典 C 风格外还可以实现类似 Python 的迭代方法。

`for...in` 循环

for...in 语句以任意顺序迭代一个对象的除 symbol 以外的可枚举属性，包括继承的可枚举属性。关于可枚举性可参考属性的可枚举性和所有权，继承将在对象部分展开讲解。

JavaScript 的函数

Mon, 01 Jan 0001 00:00:00 +0000

JavaScript 的函数

函数声明和调用

我们一般把 JavaScript 的函数也认为是一种变量，因为在 JavaScript 之中，函数的行为很大程度上和变量类似。

JavaScript 语言之中声明一个函数的语法为：

function sum(x, y) {
 return x + y;
}

而另外一种声明方式如下，这种方式的内涵就是把函数当成一种变量：

const sum = function (x, y) {
 return x + y;
};

这里 sum 作为一个变量，它的类型并非前文所提过的基本类型，因此也是一个对象，它的构造函数是 Function。

函数调用的语法则和 C/C++ 语言一致：

sum(1, 2); // 3

说明

无用的参数列表

实际上 JavaScript 从来不检查你函数调用是不是符合参数列表，本身 JavaScript 就不检查变量类型，实际上 JavaScript 还不检查你函数调用的时候传入的参数个数。比如说你给 sum 函数传入一个参数还是三个参数，其都正常工作：

sum(1); // NaN
sum(1, 2, 3); // 3

其处理逻辑为声明了却没有传入的参数当成 undefined，多余的参数则需要手动捕获。也就是说 sum(1) 在执行的时候，参数 x 是 1，而参数 y 是 undefined，结果自然是 NaN。

而捕获多余参数的方法有两种，一种是在参数列表中加入可变长参数 ...rest。不过注意，可变长参数会被赋值为一个数组，并且在没有多于参数的时候被赋值为空数组而非 undefined：

function sum(x, y, ...rest) {
 let s = 0;
 for (let i = 0; i < rest.length; ++i) s += rest[i];
 return x + y + s;
}

另外一种是在函数之中使用 arguments 变量，这个变量存储了函数所接受的所有参数，并将其包装为一个数组。所以理论上甚至都不需要声明参数列表：

function sum() {
 let s = 0;
 for (let i = 0; i < arguments.length; ++i) s += arguments[i];
 return s;
}

[!CAUTION] 消失的返回值

JavaScript 的面向对象

Mon, 01 Jan 0001 00:00:00 +0000

JavaScript 的面向对象

注意

别想学会 JavaScript 的 OOP！

JavaScript 的面向对象的实现逻辑并非是类封装逻辑，而是原型链逻辑。最初的 JavaScript 并不支持类语法，但由于原型链实在太过于特立独行，目前 ES6 标准将类语法作为语法糖加入了语言标准。这也就是说，JavaScript 的面向对象的底层依然是原型链而非类封装，如果真的想弄明白 JavaScript 的原型链机制，可以查看文档末尾的原型链章节。但对于初学者，我们建议只是用类语法，除非遇到不可解决的 bug，否则不要花时间钻研原型链。使用类语法的 JavaScript 很大程度上和 C++ 语言类似，这里我们编写一个简易的复数类作为演示，内部已经包含了构造函数、定义成员方法和静态方法等 OOP 基础内容：

class Complex {
 constructor(_real, _imaginary) {
 this.real = _real;
 this.imaginary = _imaginary; // Declare members & initialize
 }
 
 print() {
 console.log(`${this.real} ${this.imaginary >= 0 ? "+" : "-"} ${Math.abs(this.imaginary)} i`);
 }

 static printInfo() {
 console.log("This is a complex class.");
 }
}

let com = new Complex(1, 2);
com.print(); // "1 + 2 i"
Complex.printInfo(); // "This is a complex class."

有一些细节需要注意：

类方法内使用类成员的时候必须使用 this 调用
JavaScript 的所有类成员和类方法均是公有的，JavaScript 不具有访问权限修饰符
- 但也并非完全没有办法限制，你可以考虑使用 getter 和 setter，或使用 Proxy 对象来解决这一问题，这些技巧我们并不作过多展开，感兴趣的同学可以参考这些内容：
  - 定义 getters 与 setters
  - Proxy

`this` 的指向问题

注意

你的 JavaScript 成人礼

JavaScript 的异步

Mon, 01 Jan 0001 00:00:00 +0000

JavaScript 的异步

说明

异步的必要性

正常我们编写的代码都是同步代码，也就是说代码执行的顺序是从上到下，上面的操作还没有执行完，下面的操作就不会被执行到。但是在前端代码之中，我们会经常向后端或者网络请求数据，即使现在网络已经很快，在请求数据量较大的时候，请求数据的操作依然会占据相当长的时间。如果我们还依然使用同步代码，那么就会导致页面卡顿（因为这个时候代码卡顿在了请求数据这一步）。

另外一方面，有些操作完全可以在前端请求页面的时候完成，比如说渲染出页面的模板。我们可以在数据完全获取之后再把这些数据填入页面。

总而言之，前端需要使用异步代码，需要允许多段代码同时执行而非严格按照顺序一步步走。这种允许多段代码同时执行的代码就是异步（英语：Asynchronous）。

事件循环与消息队列机制

首先我们需要明确，JavaScript 是单线程语言，这也就代表 JavaScript 并不能像 C++ 或者 Java 那样实现多线程并发的异步。

说明

为何禁用多线程

JavaScript 的设计初衷就是浏览器的脚本语言，其作用就是修改文档树。如果 JavaScript 允许多线程，那么其很有可能因为多线程并发修改文档树导致冲突。但 JavaScript 使用了另外一种方式实现异步，也就是事件循环和消息队列机制。

在详细叙述这个机制之前，我们首先需要重新认识一下回调函数。当主线程派遣出一个异步过程，比如说触发了网络请求，一般而言需要设定一个这个异步过程的回调函数。这个回调函数描述的，是这个异步过程执行完毕后需要做的事情。

需要定义这个回调函数的原因也很简单，主线程没有办法了解到异步过程何时才能结束，甚至并不清楚这个过程能否结束。在这样的情况下，主线程完全不能知晓什么时候做这个异步过程的善后工作（比如说从网络获取数据后，主线程应该把这些数据加载到页面上）。那么不如定义一个回调函数，具体什么时候调用，根据异步过程来确定。

回到事件循环和消息队列。JavaScript 的主线程上会有一个死循环，称为事件循环。其执行逻辑为在空闲的时候不断检查消息队列是否有消息，如果有，则执行，如果没有，则等待。而空闲的含义是当前函数栈空。

而需要异步执行的代码则会负载一个回调函数，当异步过程执行完毕后，则会把回调函数放入消息队列末尾。当主线程空闲且检测到消息队列之中有回调函数的时候，主线程就会执行回调函数，做好异步过程的善后工作。

通过这样的机制，JavaScript 依然是单线程的，对文档树的操作依然是同步的、不会出现冲突的。但依靠这个机制，JavaScript 实现了异步。

说明

宏消息队列和微消息队列

实际上 JavaScript 的消息队列有两种，分为宏消息队列和微消息队列。setTimeout, setInterval 这类引发的回调会放入宏消息队列，而 Promise 的 then 会放入微消息队列。

JavaScript 的事件循环在查看消息队列的时候，会首先查看微消息队列，如果存在回调则执行每一个回调直到微消息队列清空。之后再去查看宏消息队列，并且只执行队列第一个回调。现在我们编写一个异步的代码。这里会用到 setTimeout 函数，其接受两个参数，第一个参数为一个回调函数，第二个参数为多长时间后执行上述回调函数。比如下列代码：

setTimeout(() => {
 console.log("1s has passed!");
}, 1000);

这个代码将会延迟一秒后输出 "1s has passed!"。这个函数的等待过程会异步于主线程执行，而其通过第一个参数接受的回调就会在等待完毕后放入消息队列。现在我们利用这个函数写出一个需要耗时的操作，以此模拟网络请求：

const fetchData = () => {
 setTimeout(() => {
 console.log("Data got!");
 }, 1000);
};

这个函数调用后会立刻返回，因为它的任务是派遣一个异步过程，而不负责等待异步结束和善后，善后工作应该写在回调函数之中等待主线程执行。

JavaScript 的面向对象进阶

Mon, 01 Jan 0001 00:00:00 +0000

JavaScript 的面向对象进阶

说明

一些可能不必要的知识

本章节将主要讲解 JavaScript 面向对象编程的原型链逻辑，但这些知识对于 JavaScript 的初学者并不一定必要。所以编者建议如果只是想学习 JavaScript 基础语法后直接转 TypeScript 以及上手前端框架，则不需要浪费时间学习这一部分。想要深入了解这一门语言的读者，编者建议一定要学习这一部分。

JavaScript 的第一原则

这里，让我们首先铭记这样的一句话：

函数是 JavaScript 的一等公民，对象由函数创建。

或许我们常见的创建对象的方式是：

let a = {
 foo: 1,
 bar: "foobar",
};

let b = [1, 2, 3];

但这只是方便编程的语法糖，我们这里希望使用下述更为本质的创建方式：

let a = new Object();
a.foo = 1;
a.bar = "foobar";

let b = new Array();
b[0] = 1;
b[1] = 2;
b[2] = 3;

而这里 Object 和 Array 是两个函数，一定程度上可以理解为构造函数：

typeof Object; // function
typeof Array; // function

原型和构造函数

我们说过对象都是函数构造的，所以我们就从构造函数出发讲解 JavaScript 的面向对象。

构造函数的作用是构建一个新对象，比如说我们可以写一个根据传入参数构造具有一种特定形式的对象的函数：

function createStudent(_name, _age) {
 let res = {};
 res.name = _name;
 res.age = _age;
 return res;
}

let stu = createStudent("Ashitemaru", 22);

这个函数就可以接受一个学生的名字和年龄，构造出一个包含这两个信息的、描述这个学生的对象并返回。这类需求，即根据信息构造指定形式对象的需求是很常见的，所以 JavaScript 就提供了语法上的支持以将其与普通函数区分开。比如上述函数就可以写为：

function Student(_name, _age) {
 this.name = _name;
 this.age = _age;
}

let stu = new Student("Ashitemaru", 22);

这里使用 new 关键字调用构造函数，这种调用方式就区分了构造函数和普通函数。并且，构造函数内部不用我们再自己构造一个空对象，而是直接使用 this 对象，并且在使用 new 调用的时候，函数会自动将 this 返回。实际上，如果不用 new 关键字调用构造函数也是合法的，这样的话该函数将会作为普通函数执行并返回 undefined。

浏览器中的 JavaScript

Mon, 01 Jan 0001 00:00:00 +0000

浏览器中的 JavaScript

JavaScript 最初设计的目的就是运行在浏览器中给静态 HTML 赋予动态效果，而即使经历了若干年代，现在的浏览器中通用的脚本语言依然是 JavaScript。

即使你使用前端框架搭建网页应用，我们依然建议你阅读这一部分内容。这是因为前端框架最终依然是将你的代码翻译为浏览器中的 JavaScript 并运行，掌握这一部分内容可以帮助你更好地理解框架运作流程和 debug。

浏览器内置对象

浏览器内置了部分全局对象，这些对象往往与窗口、屏幕、浏览记录等信息有关。编写相关 JavaScript 代码的时候可以通过这些对象获取相关信息，也可以通过这些调用对象的方法来实现一些和浏览器相关的操作。

window 对象是最常用的内置全局变量之一。该变量的一大重要作用是充当全局作用域，也就是将所有全局变量和函数绑定为其属性，这一点在先前讲解 this 指向的时候提到过，参见 JavaScript 的面向对象部分的“全局对象”注解。

除此之外，window 对象有 innerHeight, innerWidth, outerHeight, outerWidth 等与窗口尺寸有关的属性，比如你可以在浏览器控制台中运行下述代码获取浏览器内窗口的宽高：

console.log(`Inner window size: ${window.innerWidth} x ${window.innerHeight}`);

你可以尝试最大化或拖动缩放浏览器窗口后再运行上述代码，观察输出的改变。

screen 对象保存的则是屏幕相关的信息，如屏幕宽高和颜色位数等：

console.log(`Screen size: ${screen.width} x ${screen.height}`);

navigator 对象保存了浏览器相关的大量信息，比如说浏览器名称、语言、版本、操作系统类型等等：

console.log(`{
 name: ${navigator.appName},
 version: ${navigator.appVersion},
 language: ${navigator.language},
 platform: ${navigator.platform},
 userAgent: ${navigator.userAgent},
}`);

location 对象保存了和 URL 相关的一些信息。假设当前页面的 URL 为下述，其包含了协议、主机名、端口号、参数等等信息：

https://www.test.com:8000/static/path?key=114514

此时 location 对象中的各个属性存储着这个 URL 的各部分：

JavaScript 语言基础 on ClearSec Wiki

JavaScript 的变量与变量类型

JavaScript 的变量与变量类型

变量声明

变量类型

JavaScript 的控制语句

JavaScript 的控制语句

for...in 循环

JavaScript 的函数

JavaScript 的函数

函数声明和调用

JavaScript 的面向对象

JavaScript 的面向对象

this 的指向问题

JavaScript 的异步

JavaScript 的异步

事件循环与消息队列机制

JavaScript 的面向对象进阶

JavaScript 的面向对象进阶

JavaScript 的第一原则

原型和构造函数

浏览器中的 JavaScript

浏览器中的 JavaScript

浏览器内置对象

`for...in` 循环

`this` 的指向问题