【JavaWeb】现代 JavaScript 教程

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了【JavaWeb】现代 JavaScript 教程，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含25453字，纯文字阅读大概需要37分钟。

内容图文

js_model_tutorial

!!待更新

前言

现代 JavaScript 教程的学习笔记，它是一份不错的学习资源，感谢开源。
中文链接

基础

函数

代码示例

• 函数的声明方式

  function name(parameters, delimited, by, comma) {
  /* code */
  }
  

• 作为参数传递给函数的值，会被复制到函数的局部变量。

• 函数可以访问外部变量。但它只能从内到外起作用。函数外部的代码看不到函数内的局部变量。

• 函数可以返回值。如果没有返回值，则其返回的结果是 undefined。

• 建议在函数中主要使用局部变量和参数，而不是外部变量。

• 函数命名

  • 函数名应该清楚地描述函数的功能。当我们在代码中看到一个函数调用时，一个好的函数名能够让我们马上知道这个函数的功能是什么，会返回什么。
  • 一个函数是一个行为，所以函数名通常是动词。
  • 目前有许多优秀的函数名前缀，如 create…、show…、get…、check… 等等。使用它们来提示函数的作用。

函数表达式

代码示例

• 函数是值。它们可以在代码的任何地方被分配，复制或声明。
• 如果函数在主代码流中被声明为单独的语句，则称为“函数声明”。
• 如果该函数是作为表达式的一部分创建的，则称其“函数表达式”。
• 在执行代码块之前，内部算法会先处理函数声明。所以函数声明在其被声明的代码块内的任何位置都是可见的。
• 函数表达式在执行流程到达时创建。

箭头函数

代码示例

• 不带花括号：(...args) => expression — 右侧是一个表达式：函数计算表达式并返回其结果。
• 带花括号：(...args) => { body } — 花括号允许我们在函数中编写多个语句，但是我们需要显式地 return 来返回一些内容。

对象

代码示例

• 对象是具有一些特殊特性的关联数组
• 存储属性(键值对)
  • 属性的键必须是字符串或者symbol
  • 值可以是任何类型
• 访问属性
  • 点符号：obj.property
  • 方括号：obj["property"]
• 其他操作
  • 删除属性：delete obj.property
  • 检查是否存在给定键的属性："key" in obj
  • 遍历对象：for(let key in obj)循环
• 对象是通过引用被赋值或复制的。即变量存储的不是”对象的值“，而是值的”引用“(内存地址)。
• JS中其他类型的对象
  • Array用于存储有序数据集合
  • Date用于存储时间日期
  • Error用于存储错误信息

垃圾回收

代码示例

• 垃圾回收是自动完成的，我们不能强制执行或是阻止执行。
• 当对象是可达状态时，它一定是存在与内存中的。
• 被引用与可访问(从一个根)不同：一直相互连接的对象可能整体都不可达。

Symbol 类型

代码示例

• Symbol是唯一标识符的基本类型
• Symbol是使用带有可选描述(name)的Symbol()调用创建的
• Symbol总有不同的值，即使它们有相同的名字。如果希望同名的Symbol相等，那么应该使用全局注册表：Symbol.for(key)返回一个以key作为名字的全局Symbol。
  使用Symbol.for多次调用key相同的Symbol时，返回的就是同一个Symbol
• Symbol的两个主要的使用场景：
  • “隐藏”对象属性。如果想要向“属于”另一个脚本或者库的对象添加一个属性，可以创建一个Symbol并
    使用它作为属性的键。Symbol属性不会出现在for .. in中，因此它不会意外地被与其他属性一起处理。
    并且，它不会被直接访问，因为另一个脚本没有我们地symbol。因此，该属性将受到保护，防止被意外
    或重写
  • JS使用了许多系统地Symbol，这些Symbol可以作为Symbol.*访问
• 从技术上来讲，Symbol不是100%隐藏的

对象方法,"this"

代码示例

• 存储在对象属性中的函数被称为"方法"
• 方法允许对象进行像object.doSomething()这样的操作
• 方法可以讲对象引用为this
• this的值是在程序运行时得到的
• 一个函数在声明时，可能就使用了this，但是这个this只有在函数被调用时才会有值
• 可以在对象之间复制函数
• 以"方法"的语法调用函数时：object.method()，调用过程中的this值是object

对象-原始值转换

代码示例

• 对象到原始值的转换，是由许多期望以原始值作为值得内建函数和运算符自动调用的，包括三种类型：
  • "string" 对于alert和其他需要字符串的操作
  • "number" 对于数学运算
  • "default" 少数运算符
• 规范明确描述了哪些运算符使用哪个hint。很少有运算符"不知道期望什么"并使用"default"hint。
  通常对于内建对象，"default"hint的处理方式与"number"相同，因此实践中，最后两个hint常常结合在一起
  转换算法是：
  • 调用obj[Symbol.toPrimitive](hint)如果这个方法存在
  • 否则，如果hint是"string"
    • 尝试obj.toString()和obj.valueOf()，无论那个存在
  • 否则，如果 hint 是 "number" 或者 "default"
    • 尝试 obj.valueOf() 和 obj.toString()，无论哪个存在。

构造器和操作符"new"

代码示例

• 构造函数，或简称构造器，就是常规函数，但有个共同约定，就是其命名首字母要大写
• 构造函数只能使用new来调用。这样的调用意味着在开始时创建了空的this，并在最后返回填充了值的this
• 当一个函数被使用new操作符执行时，它按照以下步骤：
  • 一个新的空对象被创建并被分配给this
  • 函数体执行。通常它会修改this，为其添加新的属性。
  • 返回this的值

数字类型

代码示例

• 要写很多零的数字
  • 将"e"和0的数量附加到数字后。123e6 <=> 123000000
  • "e"后面的负数将使数字除以1后面接着给定数量的零的数字。123e-6 <=> 0.000123
• 对于不同的数字系统
  • 可以直接在十六进制(0x)，八进制(0o)和二进制(0b)系统中写入数字
  • parseInt(str, base)将字符串str解析为给定的base数字系统中的整数，2 <= base <= 36
  • num.toString(base)将数字转换为在给定的base数字系统中的字符串
• 要将12pt和100px之类的值转换为数字
  • 使用parseInt/parseFloat进行"软"转换，它从字符串中读取数字，然后返回在发生error前可以读取到的值
  • 使用Math.floor、Math.ceil、Math.trunc、Math.round或者num.toFixed(precision)进行舍入
  • 请确保记住使用小数时会损失精度

字符串

代码示例

• 有3种类型的引号，反引号允许字符串跨越多行并可以使用${...}在字符串中嵌入表达式
• JavaScript 中的字符串使用的是 UTF-16 编码
• 可以使用像 \n 这样的特殊字符或通过使用 \u... 来操作它们的 unicode 进行字符插入
• 获取字符时，使用 []
• 获取子字符串，使用 slice 或 substring 或 substr
• 字符串的大/小写转换，使用：toLowerCase/toUpperCase
• 查找子字符串时，使用 indexOf 或 includes/startsWith/endsWith 进行简单检查
• 根据语言比较字符串时使用 localeCompare，否则将按字符代码进行比较
• 其他几种有用的字符串方法
  • str.trim() — 删除字符串前后的空格 (“trims”)
  • str.repeat(n) — 重复字符串 n 次

数组

代码示例

• 数组是一种特殊的对象，适用于存储和管理有序的数据项
• 声明：let arr = [item1, item2, item3]; let arr = new Array(item1, item2, item3);
• 调用 new Array(number) 会创建一个给定长度的数组，但不含有任何项
• length属性是数组的长度，准确地说，它是数组最后一个数字索引值加一，它由数组方法自动调整
• 手动缩短length，那么数组就会被截断，且不可逆
• 用操作双端队列的方式使用数组
  • push(items)在末端添加items项
  • pop()从末端移除并返回该元素
  • unshift(items)从首端添加items项
  • shift()从首端移除并返回该元素
• 遍历数组的方法
  • for(let i = 0; i < arr.length; i++) 运行最快，可兼容旧版本浏览器
  • for(let item of arr) 现代语法，只能访问items
  • for(let i in arr) 永远不要使用这个

数组方法

代码示例

• 添加/删除元素
  • push(items) 向尾端添加元素
  • pop() 从尾端提取一个元素
  • shift() 从首端提取一个元素
  • unshift(items) 向首端添加元素
  • splice(pos, deleteCount, items) 从index开始删除deleteCount个元素，并在当前位置插入items
  • slice(start, end) 创建一个新数组，将从位置start到位置end(但不包括end)的元素复制进行
  • concat(items) 返回一个新数组：复制当前数组的新元素，并向其中添加items。如果items中的任意一项是一个数组，那么就取其元素
• 搜索元素
  • indexOf/lastIndexOf(item, pos) 从位置pos开始搜索item，搜索到则返回该项的索引，否则返回-1
  • includes(value) 如果数组有value，则返回true，否则返回false
  • find/filter(func) 通过func过滤元素，返回使func返回true的第一个值/所有值
  • findIndex() 和find()类似，但是返回索引而不是值
• 遍历元素
  • forEach(func) 对每个元素都调用func，不返回任何内容
• 转换数组
  • map(func) 根据对每个元素调用func的结果创建一个新数组
  • sort(func) 对数组进行原位排序，然后返回它
  • reverse() 对数组进行原位反转，然后返回它
  • split/join 将字符串转换为数组并返回它
  • reduce(func, initial) 通过对每个元素调用func计算数组的单个值，并在调用之间传递中间结果
• 其他
  • Array.isArray(arr) 检查arr是否是一个数组

可迭代对象

代码示例

• 可以应用 for..of 的对象被称为可迭代的
• 技术上来说，可迭代对象必须实现 Symbol.iterator 方法
  • obj[Symbol.iterator] 的结果被称为迭代器(iterator)，由它处理进一步的迭代过程
  • 一个迭代器必须由next()方法，它返回一个{done: Boolean, value: any}对象，
    这里的done: true表明迭代结束，否则value就是下一个值
• Symbol.iterator方法会被 for..of 自动调用，但是也可以直接调用
• 内置的可迭代对象例如字符串和数组，都实现了Symbol.iterator
• 字符串迭代器能够识别代理对，即UTF-16拓展字符
• 有索引属性和length属性的对象被称为类数组对象，这种对象可能还具有其他属性和方法，但是没有数组的内建方法
• Array.from(obj[, mapFn, thisArg])将可迭代对象或者类数组对象obj转化为真正的数组Array，然后就可以对它应用数组的方法，可选参数mapFn和thisArg允许将函数应用到每个元素

映射和集合

代码示例

• Map 是一个带键的数据项的集合
  • new Map() 创建map
  • map.set(key, value) 根据键存储值
  • map.get(key) 根据键来返回值，如果map中不存在对应的key，则返回undefined
  • map.has(key) 根据key存在则true，否则返回false
  • map.delete(key) 删除指定键的值
  • map.clear() 清空map
  • map.size 返回当前元素个数
• Map 与普通对象 Object 的不同点
  • 任何键、对象都可以作为键
  • 有其他的便捷方法，如 size 属性
• Set 是一组唯一值的集合
  • new Set(iterable) 创建一个set，如果提供了一个iterable对象(通常是数组)，将会从数组里面复制值到set中
  • set.add(value) 添加一个值，返回set本身
  • set.delete(value) 删除值，如果value在这个方法调用的时候存在则返回true，否则返回false
  • set.has(value) 如果value在set中，返回true，否则返回false
  • set.clear() 清空set
  • set.size 返回元素个数
• 在 Map 和 Set 中迭代总是按照值插入的顺序进行的，所以不能说这些集合是无序的，但是不能对元素进行重新排序，也不能直接按其编号来获取元素。

弱映射和弱集合

代码示例

• WeakMap是类似于Map的集合，它仅允许对象作为键，并且一旦通过其他方式无法访问它们，
  便会将它们与其关联值一同删除
• WeakSet是类似于Set的集合，它仅存储对象，并且一旦通过其他方式无法访问他们们，便会将其删除
• 均不支持引用所有键或其计数的方法和属性，仅允许单个操作
• WeakMap和WeakSet被用作“主要”对象存储之外的“辅助”数据结构，一旦将对象从主存储器中删除，
  如果该对象仅被用作WeakMap或WeakSet的键，那么它将被自动清除

解构赋值

代码示例

• 解构赋值可以立即将一个对象或数组映射到多个变量上
• 解析对象的完整语法：
  • let {prop: varName = default, ...rest} = object;
  • 这表示属性prop会被赋值给变量varName，如果没有这个属性的话，就会使用default，
    没有对应映射的对象属性将被复制到rest对象
• 解析数组的完整语法：
  • let [item1 = default, item2, ...rest] = array;
  • 数组的第一个元素被赋值给item1，第二个元素被赋值给item2，剩下的所有元素被复制到另一个数组rest
• 从嵌套数对象/数组中提取数据也是可以的，此时等号左侧必须和等号右侧有相同的结构

时间和日期

代码示例

• 在JS中，日期和时间使用Date对象来表示，但是不能只创建日期，或者只创建时间，Date对象总是同时创建两者
• 月份从0开始计数，即一月是0
• 一周的某一天 getDay() 同样是从0开始计算，0代表星期日
• 当设置了超出范围的组件时，Date会自我进行校准，这一点对于日/月/小时的加减很有用
• 日期可以相减，得到的是以毫秒表示的两者的差值。因为当Date被转换为数字时，Date对象会被转换为时间戳
• 使用 Date.now() 可以更快地获取当前时间的时间戳
• 和其他系统不同，JS中的时间戳以毫秒为单位，而不是秒

JSON方法，toJSON

代码示例

• JSON是一种数据格式，具有自己的独立标准和大多数编程语言的库
• JSON支持object、array、string、number、boolean、null
• JS提供序列化成JSON的方法 JSON.stringify 和解析JSON的方法 JSON.parse
• 这两种方法都支持用于只能读/写的转换函数
• 如果一个对象具有toJSON，那么它会被JSON.stringify调用

递归和堆栈

代码示例

• 递归式编程的一个术语，表示从自身调用函数。递归函数可用于以更优雅的函数解决问题
• 递归定义的数据结构是指可以使用自身来定义的数据结构
• 任何递归函数都可以被重写为迭代形式，有时这是在优化代码时需要做的，但对于大多数任务来说，递归方法足够快，并且容易编写和维护

Rest参数与Spread语法

代码示例

• 当在代码中看到"..."时，它要么是rest参数，要么就是spread语法
• 简单的区分：
  • 若 ... 出现在函数参数列表的最后，那么它就是rest参数，它会把参数列表中剩余的参数收集到一个数组中
  • 若 ... 出现在函数调用或类似的表达式中，那它就是spread语法，它会把一个数组展开为列表
• 使用场景：
  • Rest参数用于创建可接受任意数量参数的函数
  • Spread语法用于将数组传递给通常需要含有许多参数的列表的函数
• "旧式的" arguments(类数组对象) 依然能获取函数调用中的所有参数，但不推荐，推荐使用Rest参数

闭包

代码示例

• 这部分需要再多看看

旧时的"var"

代码示例

• var与let/const 有两个主要的区别
  • var 声明的变量没有块级作用域，它们的最小作用域就是函数级作用域
  • var 变量声明在函数开头就会被处理(脚本启动对应全局变量)

全局对象

代码示例

• 全局对象包含应该在任何位置都可见的变量
  • 其中包括JS的内建方法
• 全局对象有一个通用名称globalThis
  • 但是更常见的是使用“老式”的环境特定（environment-specific）的名字，
    例如 window（浏览器）和 global（Node.js）。
    由于 globalThis 是最近的提议，因此在 non-Chromium Edge 中不受支持（但可以进行 polyfills）
• 仅当值对于项目而言确实是全局时，才应将其存储在全局对象中，并保持其数量最少
• 在浏览器中，除非使用modules。否则使用var声明的全局函数和变量会变成全局对象的属性
• 为了使代码面向未来并更易于理解，应该使用直接的方式访问全局对象的属性，如window.x

函数对象，NFE

代码示例

• 函数就是对象
• 一些属性
  • name -- 函数的名字。通常取自函数定义，但如果函数定义时没设定函数名，JS会尝试通过函数的上下文猜一个函数名
  • length -- 函数定义时入参的个数，Rest参数不参与计数
• 如果函数是通过函数表达式的形式被声明的，并且附带了名字，那么它就被称为命名函数表达式，这个名字可以用于在该函数内部进行指调用，例如递归调用等

"new Function" 语法

代码示例

• 使用 new Function 创建的函数，它的 [[Environment]] 指向全局词法环境，而不是函数所在的外部词法环境
• 不能在 new Function 中直接使用外部变量
• 这有助于降低我们代码出错的可能
• 从代码架构上讲，显式地使用参数传值是一种更好的方法，并且避免了与使用压缩程序而产生冲突的问题

调度：setTimeout 和 setInterval

代码示例

• setTimeout(func, delay, ...args)和setInterval(func, delay, ...args)方法允许在delay毫秒之后允许func一次或者以delay毫秒为时间间隔周期性运行func
• 要取消函数的执行，应该调用clearInterval/clearTimeout，并将setInterval/setTimeout返回的值作为入参传入
• 嵌套的setTimeout比setInterval用起来更加灵活，允许更精确地设置两次执行之间的时间
• 零延时调度setTimeout(func, 0)(或者setTimeout(func))用来调度需要尽快执行的调用，但是会在当前脚本执行完成后进行调度
• 浏览器会将setTimeout或setInterval的五层或者更多层嵌套调用(调用五次之后)的最小延时限制在4ms，这是一个历史遗留问题
• 注意，所有的调度方法都不能保证确切的延时，例如，浏览器内的计时器可能由于许多原因而变慢
  • CPU过载
  • 浏览器页签处于后台模式
  • 笔记本电脑用的电池供电，使用电池供电会以降低性能为代价提升续航

装饰者模式和转发，call/apply

代码示例

• 装饰器是一个围绕改变函数行为的包装器，其主要工作任由该函数来完成
• 装饰器可以被看作是可以添加到函数的"features"或"aspects"，可以添加一个或添加多个，而这一切都无需更改其代码
• 为了实现cachingDecorator，可以运用以下方法
  • func.call(context, arg1, arg2) -- 给定的上下文和参数调用func
  • func.apply(context, args) -- 调用func将context作为this和类数组的args传递给参数列表
• 通用的呼叫转移(call forwarding)通常是使用apply完成的
• 一个方法借用(method borrowing)，就是从一个对象中获取一个方法，并在另一个对象的上下文中"调用"它。
  采用数组方法并将它们应用于参数arguments是很常见的。另一种方法是使用Rest参数对象，该对象是一个真正的数组。

函数绑定

代码示例

• 方法func.bind(context, ...args)返回函数func的"绑定的变体"，它绑定了上下文this和第一个参数
• 通常应用bind来绑定对象方法的this，这样就可以把它们传递到其他地方使用
• 当绑定一个现有的函数的某些参数时，绑定后的函数被称为partial
• 当不想一遍又一遍重复相同的参数时，partial非常有用

深入理解箭头函数

代码示例

• 箭头函数没有this、arguments，这对装饰器来说非常有用
• 箭头函数也不能使用new进行调用
• 箭头函数也没有super
• 箭头函数时针对那些没有自己的"上下文"，但在当前上下文中起作用的短代码的

属性标志和属性描述符

代码示例

• 对象属性，除value外，还有三个特殊的特性，也就是所谓的"标志"
  • writable -- 如果为true，则值可以被修改，否则它只是可读的
  • enumerable -- 如果为true，则会被在循环中列出，否则不会被列出
  • configurable -- 如果为true，则此特性可以被删除，这些属性也可以被修改，否则不可以
  • 以上，默认都为true

属性的getter和setter

代码示例

• 有两种类型的属性
  • 数据属性，目前使用的所有属性都是数据属性
  • 访问器属性，本质上是用于获取和设置值的函数，但从外部代码来看就像常规属性
• 访问器描述符与数据属性不同，对于它，没有value和writable，但是有get 和 set 函数

原型继承

代码示例

• 在JS中，所有的对象都有一个隐藏的[[Prototype]]属性，它要么是另一个对象，要么就是null
• 可以使用obj.__proto__访问它
• 通过[[Prototype]]引用的对象被称为"原型"
• 想要读取obj的一个属性或者调用一个方法，并且它不存在，那么JS就会尝试在原型中查找它
• 写/删除操作直接在对象上进行，它们不使用原型(假设它是数据类型，不是setter)
• 如果想调用obj.method()，而且method是从原型中获取的，this仍然会引用obj，因此，方法始终是与当前对象一起使用，即使方法是继承的
• for .. in 循环在其自身和继承的属性上进行迭代，所有其他的键/值获取方法仅对对象本身起作用

F.prototype

代码示例

• F.prototype属性(不要把它与[[Prototype]]弄混了)在new F被调用时为新对象的[[Prototype]]赋值
• F.prototype的值要么是一个对象，要么就是null，其他值都不起作用
• "prototype"属性仅在设置了一个构造函数，并通过new调用时，才具有这种特殊的影响

原生的类型

代码示例

• 所有的内建对象收遵循相同的模式(pattern)
  • 方法都存储在prototype中(Array.prototype、Object.prototype、Date.prototype等)
  • 对象只存储数据本身(数组元素、对象属性、日期)
• 原始数据类型也将方法存储在包装器对象的prototype中：Number.prototype、String.prototype、Boolean.prototype。只有undefined和null没有包装器对象
• 内建原型可以被修改或被用新的方法填充，但是不建议更改它们，唯一允许的情况可能是，当添加一个还没有被JS引擎支持，但已经被加入JS规范的新标准中，才可能允许这样做

原生方法，没有__proto__的对象

代码示例

• 设置和直接访问原型的现代方法：
  • Object.create(proto, [description]) -- 利用给定的proto作为 [[Prototype]] (可以是null)和可选的属性描述符来创建一个任务
  • Object.getPrototypeOf(obj) -- 返回对象obj的 [[Prototype]] (与__proto__的getter相同)
  • Object.setPrototypeOf(obj. proto) -- 将对象obj的 [[Prototype]] 设置为proto(与__proto__的setter相同)
• 如果要将一个用户生成的键放入一个对象，那么内建的__proto__ getter/setter 是不安全的
• 可以使用Object.create(null)创建一个没有__proto__的"very plain"对象，或者对此场景坚持使用Map对象即可

Class基本语法

代码示例

• 基本的类语法

class MyClass {
  prop = value; // 属性

  constructor(...) { // 构造器
    // ...
  }

  method(...) {} // method

  get something(...) {} // getter 方法
  set something(...) {} // setter 方法

  [Symbol.iterator]() {} // 有计算名称（computed name）的方法（此处为 symbol）
  // ...
}

• 技术上来说，MyClass 是一个函数（提供作为 constructor 的那个），而 methods、getters 和 settors 都被写入了 MyClass.prototype。

类继承

代码示例

• 想要扩展一个类：class Child extends Parent:
  • 则意味着Child.prototype.__proto__将是Parent.prototype，所有方法会被继承
• 重写一个constructor
  • 在使用this之前，必须在Child的constructor中将父constructor调用super()
• 重写一个方法
  • 可以在一个Child方法中使用super.method()来调用Parent方法
• 内部
  • 方法在内部的[[HomeObject]]属性中记住了它们的类/对象，这就是super如何解析父方法的
  • 将一个带有super的方法从一个对象复制到另一个对象是不安全的
• 箭头函数是没有自己的this或者super，所以它们能融入到就近的上下文中，像透明似的

静态属性和静态方法

代码示例

• 静态方法被用于实现整个类的功能，与具体的类示例无关
• 在类生命中，它们都被用关键字static进行了标记
• 静态属性被用于但想要存储类级别的数据时，而不是绑定到实例
• 从技术上讲，静态声明与直接给类本身赋值相同
• 静态属性和方法都是可以被继承的

私有的和受保护的属性和方法

代码示例

• OOP而言，内部接口和外部接口的划分被称为封装
• 封装的优点
  • 保护用户，使他们不会误伤自己
  • 可支持性
  • 严格界定内部接口，class的开发人员可以自由地更改其内部属性和方法，甚至无需通知用户
  • 隐藏复杂性
  • 当实施细节被隐藏，并提供了简单且有据可查地外部接口时，总是方便的
• 为了隐藏内部接口，使用了受保护或私有的属性
  • 受保护的字段以_开头，这是一个约定
  • 私有字段以#开头，确保只能从类的内部访问它们
• 目前，在各浏览器中不支持私有字段，但可以用 polyfill 解决，即自行解决

扩展内建类

代码示例

• 内建的类，例如Array、Map等也都是可以扩展的
• 如果想要map或filter这样的内建方法返回常规数组，可以在Symbol.species中返回Array
• 内建对象有它们自己的静态方法，例如Object.keys、Array.isArray等，原生的类互相扩展，通常，当一个类扩展另一个类时，静态方法和非静态方法都会被继承，但内建类是一个例外，它们相互间不继承静态方法

类检查:"instanceof"

代码示例

• typeof用于原始数据类型，返回值为string
• {}.toString用于原始数据类型和内建对象，包括Symbol.toStringTag属性的对象，返回string
• instanceof用于对象，返回true/false
• 从技术上讲，{}.toString 是一种"更高级的"typeof
• 当使用类的层次结构，并想要对该类进行检查，同时考虑继承时，这种场景下instanceof操作确实很出色

Mixin模式

代码示例

• Mixin是一个通用的面向对象编程术语：一个包含其他类的方法的类
• JS不支持多重继承，但是可以通过将方法拷贝到原型来实现mixin
• 可以使用mixin作为一种通过添加多种行为来扩充类的方法
• 如果Mixins意外覆盖了现有类的方法，那么它们可能会成为一个冲突点。因此，通常应该仔细考虑mixin的命名方法，以最大程度地降低发生这种冲突的可能性

错误处理，"try...catch"

代码示例

• try...catch结构允许处理执行过程中出现的error，从字面上看，它允许"尝试"允许代码并"捕获"其中可能发生的错误

try {
  // 执行此处代码
} catch(err) {
  // 如果发生错误，跳转至此处
  // err 是一个 error 对象
} finally {
  // 无论怎样都会在 try/catch 之后执行
}

• 可能没有catch部分或者没有finally，所以try...catch或者try...finally都是可用的
• Error对象包括下列属性：
  • message -- 人类可读的error信息
  • name -- 具有error名称的字符串(Error构造器的名称)
  • stack(没有标准化，但是得到了很好的支持)，即Error发生时的调用栈
• 可以使用throw操作符来生成自定义的error，从技术上讲，throw的参数可以是任何东西，但通常是继承自内建的Error类的error对象
• 再次抛出是一中错误处理的重要模式：catch块通常期望并知道如何处理特定的error类型，因此它应该再次抛出它不知道的error

自定义Error，扩展Error

代码示例

• 可以正常地从Error和其他内建的error类进行继承，但需要注意部分属性以及不忘了调用super
• 可以用instanceof来检查特定的error，但是对于一些第三方库的error，由于没有简单的方法获取它的类，可以将name属性用于这一类的检查
• 包装异常是一项广泛应用的技术：用于出入低级别异常并创建高级别error而不是各种低级别error的函数

回调介绍

代码示例

• 一些函数支持异步行为，即现在开始执行的行为，但是它们在稍后才会完成
• 由于脚本是"异步"调用，所以不会等到脚本加载完成才执行
• 异步执行某项功能的函数应该提供一个callback参数用于在相应事件完成时调用
• 避免"回调地狱"式的编码方式

Promise

代码示例

• "生产者代码"：会做一些事儿，并且会需要一些时间，例如，通过网络加载数据的代码
• "消费者代码"：想要在"生产者代码"完成哦你工作的第一时间就能获得其工作成果，许多函数可能都需要这个结果
• Promise是将"生产者代码"和"消费者代码"连接在一起的特殊的JS的对象
• 由new Promise构造器返回的promise对象具有以下内部属性：
  • state -- 最初是"pending"，然后再resolve被调用时变为"fulfilled"，或者在reject被调用时变成"rejected"
  • result -- 最初是undefined，然后在resolve(value)被调用时变为value，或者在reject(error)被调用时变成error
• Promises和Callbacks对比：
  • Promises允许按照自然顺序进行编码，允许loadScript和.then来处理结果；
  • 而Callbacks在调用loadScript(script, callback)时，在处理的地方必须有一个callback函数，即在调用loadScript之前，必须知道如何处理结果
  • Promises可以根据需要在promise上多次调用.then，每次调用，都会在"订阅列表"中添加一个新的"分析"，一个新的订阅函数，即Promise链
  • 而Callbacks只能有一个回调

Promise链

代码示例

• 如果.then(或catch/finally都可以)处理程序(handler)返回一个promise，那么链的其余部分将会等待，直到它状态变为settled。当它被settled后，其result(或error)将被进一步传递下去

使用promise进行错误处理

代码示例

• .catch处理promise中的各种error：在reject()调用中的，或者在处理程序(handler)中抛出的(throw)error
• 应该将.catch准确地放在想要处理的error上，并知道如何处理这些error的地方。处理程序应该分析error(也可以自定义error类来帮助分析)并再次抛出未知的error
• 如果没有办法从error中恢复的话，不使用.catch也可以
• 在任何情况下都应该有unhandled rejection事件处理程序(用于浏览器，以及其他环境的模拟)，以跟踪未处理的error并告知用户/服务器有关信息，以使应用程序永远不会死掉

Promise API

代码示例

• Promise类有5种静态方法
  • Promise.all(promises) —— 等待所有 promise 都 resolve 时，返回存放它们结果的数组。如果给定的任意一个 promise 为 reject，那么它就会变成 Promise.all 的 error，所有其他 promise 的结果都会被忽略
  • Promise.allSettled(promises)（ES2020 新增方法）—— 等待所有 promise 都 settle 时，并以包含以下内容的对象数组的形式返回它们的结果：
    • state: "fulfilled" 或 "rejected"
    • value（如果 fulfilled）或 reason（如果 rejected）
  • Promise.race(promises) —— 等待第一个 settle 的 promise，并将其 result/error 作为结果
  • Promise.resolve(value) —— 使用给定 value 创建一个 resolved 的 promise
  • Promise.reject(error) —— 使用给定 error 创建一个 rejected 的 promise

Promisify

代码示例

• "Promisification"是用于一个简单转换的一个长单词，它指将一个接受回调的函数转换为一个返回promise的函数
• 由于许多函数和库都是基于回调的，因此，在实际开发中经常会需要这种转换，因为使用promise更加方便
• 在实际开发中，可能需要promisify很多函数，使用一个helper很有意义，将其称为promisify(f): 它接受一个需要被promisify的函数f，并返回一个包装(wrapper)
• 注意：Promisification是一种很好的方法，特别是在使用async/await的时候，但是不是回调的完全替代，一个promise可能只有一个结果，但从技术上将，一个回调将函数可能被调用多次，因此Promisification仅适用于调用一次回调的函数，进一步调用将被忽略

微任务(Microtask)

代码示例

• Promise处理始终时异步的，因为所有promise行为都会通过内部的"promise jobs"队列，即微任务队列
  • 队列(queue)是先进先出的：首先进入队列的任务会首先运行
  • 只有在JS引擎中没有其他任务在运行时，才开始执行任务队列中的任务
• .then/catch/finally 处理程序（handler）总是在当前代码完成后才会被调用
• 如果需要确保一段代码在 .then/catch/finally 之后被执行，可以将它添加到链式调用的 .then 中
• 在大多数 JavaScript 引擎中（包括浏览器和 Node.js），微任务（microtask）的概念与“事件循环（event loop）”和“宏任务（macrotasks）”紧密相关

Async/await

代码示例

• 函数前面的关键字async有两个作用
  • 让这个函数总是返回一个promise
  • 允许在该函数内使用await
• Promise前的关键字await使JS引擎等待该promise settle，然后：
  • 如果有error，就会抛出异常 -- 就像那里调用了throw error 一样
  • 否则，就返回结果
• 关键字async和await在一起能很好的编写异步代码的框架，且代码易于阅读和编写
• 有了async/await之后，几乎就不需要使用promise.then/catch，但是不要忘了它们本质上是promise的，有时候(例如在函数最外层作用域)不得不使用它们
• 当需要同时等待多个任务时，别忘了Promise.all

Generator

代码示例

• Generator是通过generator函数function* f(...) {...}创建的
• 在generator(仅在)内部，存在yield操作
• 外部代码和generator可能会通过next/yield调用交换结果
• 在现代JS中，generator很少被使用，但有时却非常有用，因为函数在执行过程中与调用代码交换数据的能力是非常独特的，而且它们非常适合创建可迭代对象

Async iterator 和 generator

代码示例

• Iterator 和 Async Iterator 的 区别
  • 提供iterator的对象方法
    • Iterator -- Symbol.iterator
    • Async Iterator -- Symbol.asyncIterator
  • next() 返回的值
    • Iterator -- 任意值
    • Async Iterator -- Promise
  • 进行循环使用时
    • Iterator -- for .. of
    • Async Iterator -- for await .. of
• Iterable 和 Async Iterable 的 区别
  • 提供iterator的对象方法
    • Iterable -- Symbol.iterator
    • Async Iterable -- Symbol.asyncIterator
  • next() 返回的值
    • Iterable -- {value: ..., done: true/false}
    • Async Iterable -- resolve成{value: ..., done: true/false}的Promise
• Generator 和 Async Generator 的 区别
  • 声明方式
    • Generator -- function*
    • Async Generator -- async function*
  • next() 返回的值
    • Generator -- {value: ..., done: true/false}
    • Async Generator -- resolve成{value: ..., done: true/false}的Promise
      在现代JS中，generator很少被使用，但有时却非常有用，因为函数在执行过程中与调用代码交换数据的能力是非常独特的，而且它们非常适合创建可迭代对象

模板简介

代码示例

• 一个模块就是一个文件，浏览器需要使用

内容总结

以上是互联网集市为您收集整理的【JavaWeb】现代 JavaScript 教程全部内容，希望文章能够帮你解决【JavaWeb】现代 JavaScript 教程所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端