JavaScript 高级程序设计梗概

HTTP 状态码

1xx - 信息状态码

表示已接受请求，但仍处于处理过程中，常见的信息状态码有以下几种：

• 100 继续：表示客户端应该继续它的请求

• 101 切换协议：表示客户端需要采用不同协议以完成请求，如升级为 websocket

• 102 处理：表示服务器已经收到并正在处理，但客户端仍应继续等待

2xx - 成功状态码

表示已成功接收请求并进行了处理。常见的成功状态码有以下几种：

• 200 成功：表示已成功处理请求，一般用于 get 和 post 请求

• 201 已创建：表示请求成功

• 202 已接受：表示已接收请求，但尚未完成处理，需要等待一段时间

• 204 无内容：表示成功处理请求，但没有返回任何实体内容

3xx - 重定向状态码

表示客户端需要进一步操作才能完成请求，如需要进一步加载新的 URL

常见的重定向状态码有以下几种：

• 300 多项选择：表示请求的资源有多个可供选择的展示形式。服务器可根据请求者选择一项操作，或提供操作列表供请求者选择

• 301 永久重定向：表示资源已被永久移动到新位置

• 302 临时重定向：表示资源已被临时转移到另一个位置和 URL

4xx - 客户端错误状态码

表示客户端的请求有错误，需修改请求才能成功。常见的客户端错误状态码有以下几种：

• 400 请求出错：表示请求报文存在语法错误或请求不被服务器所接受 

• 401 未授权：表示请求未经授权，需要进行身份验证

• 403 拒绝访问：表示服务器拒绝该请求

• 404 未找到：表示请求的资源不存在

• 405 方法禁用：禁用请求中指定的方法

• 408 请求超时：服务器等待的时间过长

5xx - 服务器端错误状态码

表示服务器在处理请求时遇到错误或无法完成请求

常见的服务器端错误状态码有以下几种：

• 500 内部服务器错误：表示服务器在处理请求时遇到错误，无法完成请求

• 501 未实现：表示服务器不具备完成请求的能力。如服务器无法识别请求方法

• 502 错误网关：表示网关或代理服务器收到无效响应

• 503 服务不可用：表示服务器暂时无法处理请求，如服务器过载，停机等

• 504 网关超时：表示网关或代理服务器在规定时间内未能接收到响应

• 505 http 协议版本不被支持：表示服务器不支持请求中所用的 http 协议版本

函数

构造函数 new 过程

new 构造函数在内存中创建一个空对象，把这个空对象的隐式原型 _proto_ 属性赋值给构造函数的显示原型 prototype 属性

调用构造函数，改变 this 指向，将 this 指向创建出来的新的空对象，并给这个空对象添加属性和方法

返回这个新对象，所以构造函数内部不需要 return

function Person(name, age, sex) {
  this.name = name
  this.age = age
  this.sex = sex
}

const p = new Person('李白', 25, '男')
console.log(p) // Person { name: '李白', age: 25, sex: '男' }

箭头函数和普通函数的区别

箭头函数都是匿名函数，不绑定自己的 this、arguments、super、new.target

箭头函数的 this 是静止的，始终指向函数声明时所在的作用域下的 this；普通函数的 this 指向调用它的对象，如果用作构造函数，this 指向创建的实例对象

箭头函数在使用 call/apply/bind 绑定 this 时，相当于只是传入了参数，对 this 没有影响

箭头函数不绑定 arguments，取而代之的用 rest 参数 ... 解决

箭头函数当方法使用时，没有定义 this 绑定

箭头函数不能作为构造函数，不能使用 new 来创建实例对象

箭头函数没有原型属性

箭头函数与 bind

const obj1 = {
  a: 1,
  func: () => {
    console.log(this, this.a)
  },
}
const obj2 = {
  a: 2,
}

obj1.func.bind(obj2)() // {} undefined

箭头函数除被普通函数包裹的情况外，this 均指向 window

obj1.func.bind(obj2)()

obj1.func 调用 obj1 对象的 func 属性

func.bind(obj2) 将 obj2 作为参数绑定到 func 函数的 this

但因为箭头函数的 this 指向 window，所以结果为 {}，undefined

const obj1 = {
  a: 1,
  func: function () {
    console.log(this, this.a)
  },
}
const obj2 = {
  a: 2,
}

obj1.func.bind(obj2)() // { a: 2 } 2

普通函数的 this 指向它的调用者，但此时通过 bind 改变 this 指向 obj2

箭头函数 rest 参数

ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments

const func1 = (...rest) => {
  console.log(rest)
}
function func2() {
  console.log(arguments)
}

let obj = {
    name: '辛弃疾',
    age: 30,
  },
  num = 10,
  bool = true,
  arr = [1, 2, 3]
func1(obj, num, bool, arr)
// [ { name: '辛弃疾', age: 30 }, 10, true, [ 1, 2, 3 ] ]
func2(obj, num, bool, arr)
// [Arguments] {
//   '0': { name: '辛弃疾', age: 30 },
//   '1': 10,
//   '2': true,
//   '3': [ 1, 2, 3 ]
// }

arguments 得到的是一个伪数组，而 rest 参数得到的是一个数组

JavaScript 起源

JavaScript 与 HTML 结合创建动态网页

语言的基本概念

变量声明

数据类型

操作符

语句

函数

JavaScript 松散类型下的变量处理

原始值和引用值

执行上下文与作用域

垃圾回收

基本引用类型

Date

RegExp

原始值包装类型

Boolean

Number

String

单例内置对象

Global

Math

集合引用类型

Object

Array

定型数组

Map

WeakMap

Set

WeakSet

迭代与扩展操作

迭代器和生成器

理解迭代

迭代器模式

生成器

对象、类和面向对象编程

理解对象

创建对象

继承

类

Proxy 和 Reflect

代理基础

代理捕获器和反射方法

代理模式

函数

箭头函数

函数名

理解参数

没有重载

默认参数值

参数扩展与收集

函数声明与函数表达式

函数作为值

函数内部

函数属性和方法

函数表达式

递归

尾调用优化

闭包

立即调用的函数表达式

私有变量

Promise 和 async/await

异步编程

期约

异步函数

BOM

window 对象

location 对象

navigator 对象

screen 对象

history 对象

客户端检测

能力检测

用户代理检测

软件和硬件检测

DOM

其他 DOM  API

DOM2、DOM3、DOM4

事件在 JavaScript 中的本质、事件的起源、事件在 DOM 中的运行方式

canvas 标签如何创建动态图片，动画和游戏开发基础

使用 JavaScript 增强表单交互及突破浏览器限制

JavaScript API

浏览器处理 JavaScript 代码中的错误和几种错误处理方式

JavaScript 读取和操作 XML 数据的特性

代替 XML 的 JSON 数据格式

浏览器请求数据和资源的常用方式

应用程序离线时在客户端机器上存储数据的各种技术

模块模式在编码中的应用

专用工作者线程、共享工作者线程和服务工作者线程

企业级开发中进行 JavaScript 编码的最佳实践