变量对象

当JS执行到一段可执行代码时（全局代码、函数代码、eval）就会创建执行上下文，执行上下文内有三个重要属性：

• 变量对象
• this
• 作用域链
  变量对象是与执行上下文相关的数据作用域，它的作用是保存上下文中定义的变量声明与函数声明。

不同执行上下文中的变量对象是不同的，下面介绍一下全局变量对象和函数变量对象。

全局对象

MDN的解释：

一个全局对象是一个永远存在于 global scope 的 object。window 对象是浏览器中的全局对象。

任何全局变量或者全局函数都可以通过 window 的属性来访问。

在顶层 JavaScript 代码中，可以用关键字 this 引用全局对象。

举例

console.log(this) //window
var a=1 //挂到window上的属性
window.a //1

在顶层作用域（全局上下文）上的变量对象就是全局对象

活动对象

在函数上下文中，我们用活动对象(activation object, AO)来表示变量对象

活动对象和变量对象其实是一个东西，只是变量对象是规范上的或者说是引擎实现上的，不可在 JavaScript 环境中访问，只有到当进入一个执行上下文中，这个执行上下文的变量对象才会被激活，所以才叫 activation object ，而只有被激活的变量对象，他上面的各种属性才能被访问。

活动对象是在进入函数上下文时刻被创建的，它通过函数的 arguments 属性初始化。arguments 属性值是 Arguments 对象。

执行过程

执行上下文的代码会分成两个阶段进行处理：分析和执行，我们也可以叫做：

1、进入执行上下文
2、代码执行

进入执行上下文

当进入执行上下文阶段，这时候还没有执行代码
变量对象包括
1、函数的所有形参（如果是函数上下文）

• 由名称和对应值组成的一个变量对象的属性被创建
• 由于没有实参，所以属性值为undefined

2、函数声明

• 由名称和对应值组成的一个变量对象的属性被创建
• 如果变量对象存在相同名称的属性，则覆盖其属性

3、变量声明

• 由名称和对应值（undefined）组成的一个变量对象的属性被创建
• 如果变量名称跟已经声明的形参或函数相同，则变量声明不会干扰已经存在的这类属性

举个例子

function foo(a) {
  var b = 2;
  function c() {}
  var d = function() {};

  b = 3;

}
foo(1)

在调用函数foo并进入函数执行上下文后，这时候的 AO 是：

AO = {
    arguments: {
        0: 1,
        length: 1
    },
    a: 1,
    b: undefined,
    c: reference to function c(){},
    d: undefined
}

代码执行

在代码执行阶段，会顺序执行代码，根据代码，修改变量对象的值

还是上面的例子，当代码执行完后，这时候的 AO 是：

AO = {
    arguments: {
        0: 1,
        length: 1
    },
    a: 1,
    b: 3,
    c: reference to function c(){},
    d: reference to FunctionExpression "d"
}

到这里变量对象的创建过程就介绍完了，让我们简洁的总结我们上述所说：

• 全局上下文的变量对象初始化是全局对象

• 函数上下文的变量对象初始化只包括 Arguments 对象

• 在进入执行上下文时会给变量对象添加形参、函数声明、变量声明等初始的属性值

• 在代码执行阶段，会再次修改变量对象的属性值

思考

第一题

function foo() {
    console.log(a);
    a = 1;
}

foo(); // ???

function bar() {
    a = 1;
    console.log(a);
}
bar(); // ???

第一个foo函数会报错：Uncaught ReferenceError: a is not defined

第二个bar函数会打印：1

原因是第一个函数进入执行上下文后，没有var声明，此时它的上下文是这样的

AO = {
    arguments: {
        length: 0
    },
}

当函数执行时，找不到a声明，所以就会报错

第二个函数进入执行上下文时，依然没有a的声明，但是函数里的代码执行时，能够从全局作用域里找到a，所以就打出1

第二题

console.log(foo);//???

function foo(){
    console.log("foo");
}

var foo = 1;
console.log(foo);//???

第一个log会打印出函数体，而不是undefined，可见var声明提升被函数声明提升取代了
第二个log会打印出1

原因是会优先处理函数声明，再处理变量声明。如果变量名称跟已经声明的形参或函数相同，则变量声明不会干扰已经存在的这类属性，我们结合过程来分析：

在进入执行上下文时，此时变量对象是这样的

{
foo:undefined
}

代码执行时是这样的，优先处理函数声明,此时变量对象变成：

{
foo:reference to function foo(){}
}

当执行到第二个log时，foo又被另外赋值了，此时变量对象变成：

{
foo:1
}

第三题

var foo = 1;
console.log(foo);//??
function foo(){
    console.log("foo");
};

打印的结果为：1
我们来分析一下其执行过程，在进入上下文时，变量对象变成

{
foo:undefined
}

在执行代码时，变量对象先变成函数再变成1

{
foo:reference to function foo(){}
}
//  foo=1
{
foo:1
}
console.log(foo) // 所以结果就是1

函数memory

函数 memory（函数记忆）可以理解为当执行某个函数时，先把它的返回值记下来，当下次函数执行，如果传递的参数相同时，则直接返回记忆的返回值，而不是重新执行一遍函数。

function add(a,b){
  return a+b
}
// 假设 memorize 可以实现让传入的函数记忆
const memorizedAdd = memorize(add);

console.log(memorizedAdd(1, 2))//第一次时返回3，并将结果记下来
console.log(memorizedAdd(1, 2)) //第二次时不进行 a+b 操作，而是直接将第一次的结果3记下来

要实现这样的memorize函数非常简单，还是熟悉的配方，使用闭包。

function memorize(func) {
  let cache = {}
  return function(...rest) {
    let key = rest.join('-')
    if (cache[key]) {
      console.log('第二次执行到缓存')
      return cache[key]
    } else {
      console.log('第一次执行，做缓存处理')
      cache[key] = func(...rest)
      return cache[key]
    }
  }
}

我们来检查一下

console.log(memorizedAdd(1, 2))
//"第一次执行，做缓存处理"
//3
console.log(memorizedAdd(1, 2))
//"第二次执行到缓存"
//3

函数memory更多的是一种编程技巧，其实概念非常简单，适用场景在于如果你需要进行大量的重复计算，那么可以采取函数memory的方式来缓存数据。

面试题

这里有一道关于 memory 函数的面试题

const memo = (fn) => {
  请补全
}
const x2 = memo((x) => {
    console.log('执行了一次')
    return x * 2
  })
  // 第一次调用 x2(1)
console.log(x2(1)) // 打印出执行了，并且返回2
  // 第二次调用 x2(1)
console.log(x2(1)) // 不打印执行，并且返回上次的结果2
  // 第三次调用 x2(1)
console.log(x2(1)) // 不打印执行，并且返回上次的结果2

思路整理：

1、看调用方式，可以得出memo调用后返回一个函数

2、采用闭包的形式来做记录即可,返回记录的结果即可

const memo = (fn) => {
  //请补全
  const cache = {}
  return function(...rest) {
    const key = rest
    if (cache[key]) {
      return cache[key]
    } else {
      return cache[key] = fn(...rest)
    }
  }
}

结束~

enjoy！

let、const与var的区别

let声明和var声明受块级作用域限制不同

如下代码

{
  let a=10;
  var b=20
}
a //Uncaught ReferenceError: a is not defined
b //20

当被块级作用域包围时，可以看到let声明使得块级作用域外部无法访问a这个变量，但是var声明的b却不会有这样的问题。

说明var不受块级作用域的影响，而let声明只在块级作用域中有效。

这就使得在循环时，let比var更有优势，因为不会出现变量外泄问题。

for(let i=0;i<5;i++){
  ...
}
console.log(i) //Uncaught ReferenceError: i is not defined

for(var i=0;i<5;i++){
  ...
}
console.log(i) //5

当for循环配合var声明时，由于不受块级作用域影响，全局只有一个作用域，i变量所在的作用域就是全局作用域，这就使得i变量会外泄。

当for循环配合let声明时，则会创建独立的块级作用域，与全局作用域不同，所以我们在外层无法获取到内部的i变量。

let声明配合循环可以创建独立的作用域

上面说到let声明配合循环会生成独立的作用域，下面有个更好的例子

for(var i=0;i<6;i++){
  setTimeout(()=>{
    console.log(i)
  },0)
}
//6 6 6 6 6 6

这个例子在《你不知道的JavaScript》中有提及，被我写到博客上多次。

由于这个循环只有一个全局作用域，所以当循环结束，异步代码执行时，只能获取到全局作用域上的i，这时候i已经变成了6，所以打出来就是6个6。

例子换成let就不一样了

for(let i=0;i<6;i++){
  setTimeout(()=>{
    console.log(i)
  },0)
}
//0 1 2 3 4 5 

这是由于每次循环都会生成一个作用域，当前循环中的i就存在于这个作用域中，所以实际上会生成6个不同的作用域，那么当异步代码执行时，会从对应的作用域读取i,所以结果就是0 1 2 3 4 5。

再来看一个例子：

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

由于只有一个作用域，所以i也只有一个。循环结束，i变成了10。

数组中的函数执行后console.log(i)中的i始终指向全局作用域下的i。所以最后的输出是10。

如果变成let声明，则会产生多个作用域，每个作用域下的i都是独立的，都是新生成的变量，当进行访问时，会访问函数生成时的那个作用域里的i，结果则是我们希望的。

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

有一点需要注意的是，for循环会生成一个父级作用域，它还有一个子级作用域。

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc

我们知道大括号{}会生成一个作用域，上面的例子中的let i=abc就是在大括号中生成的，它跟for循环作用域下产生的i又不同，它是在循环体内产生的单独的子作用域。

let声明没有提升

由于原来的js编译设计机制问题，导致var声明会被提升到代码顶部，所以我们在声明变量之前也可以访问变量。

console.log(a)//undefined
var a=1

个中原理可以看这篇博客【你不知道的JavaScript】作用域是什么？

不过es6纠正了这个逻辑，使用let就不存在变量提升问题

console.log(a)//Uncaught ReferenceError: a is not defined
let a=10

一定要先声明后访问，因为先访问时，变量a是不存在的，所以报了一个查找不到的错误。

let声明有暂时性死区问题

只要块级作用域内存在let命令，那么就会牢牢地被绑定在这个区域，不受外部影响。

var a=123
function fn(){
  console.log(a) //Uncaught ReferenceError: Cannot access 'a' before initialization
  let a=888
}

上面代码中，虽然全局作用域下有个a，但是引擎已经预先知道内部有个let声明的a了，所以不会往外部获取全局下的a，而是先把函数作用域内的a锁死。

ES6明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。

暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。

有兴趣的同学还可以看看我写的这一篇JS薛定谔的变量提升

let声明不允许重复声明

在同一作用域下，let不允许声明两次同名的变量。

{
  let a=0
  let a=0
}
//Uncaught SyntaxError: Identifier 'a' has already been declared

不过var是可以的，新变量会覆盖老变量。

var a=0
var a=1
a //1

因此，不能在函数内部重新声明参数。

function func(arg) {
  let arg;
}
func() // 报错

function func(arg) {
  {
    let arg;
  }
}
func() // 不报错

let声明不会将变量挂到window顶层对象中

顶层对象，在浏览器环境指的是window对象，在 Node 指的是global对象。ES5 之中，顶层对象的属性与全局变量是等价的。

全局下let声明跟var声明所在的作用域并不算同一层，var所在的全局作用域会指向window对象，所以我们可以通过window来访问var声明的全局变量，但是let却不能通过window对象访问。

var a=10
window.a //10

let b=99
window.b //undefined

这是因为es6新设计了全局变量，纠正了原来全局变量会与window顶层对象挂钩的设计问题。

const声明

const声明跟let声明一模一样，唯一的区别就是const声明是一个常量，一旦定义，不能改变。

所以不能只声明不赋值

const a //Uncaught SyntaxError: Missing initializer in const declaration

赋值后，值不可改变。

const a=10
a=100 //Uncaught TypeError: Assignment to constant variable.

如果赋值给一个复杂对象，那么变量的值就是一个引用地址，只要不改变这个引用地址，还是可以修改复杂对象内部的属性的。

const a={name:'qiu'}
a.name='qiuyanxi' 
a //{name:"qiuyanxi"}
a={name:"qiuyanxi"}//报错

async和await

简单来说，它们是基于promises的语法糖，使异步代码更易于编写和阅读。通过使用它们，异步代码看起来更像是老式同步代码，因此它们非常值得学习。

async关键字

async function hello() { return "Hello" };
hello();
//Promise {<fulfilled>: "Hello"}

上面的代码增加async关键字后，这个函数会返回promise。这是异步的基础，可以说，现在的异步JS就是使用promise。

箭头函数写法

let hello=async ()=>{return 'hello'}

现在我们可以使用.then方法啦

hello().then((mes)=>{console.log(mes)})

await关键字

await只在异步函数里面才起作用,它的主动作用是会暂停代码在该行上，直到promise完成，然后返回结果值，await后面应该放promise对象

我们可以造一个实际的例子

const p=new Promise((resolve,reject)=>{
  setTimeout(resolve,3000,'doing')
})
const r=new Promise((resolve,reject)=>{
  setTimeout(resolve,0,p)
})
const o=r.then((mes)=>{
  return mes+'=>done'
})
o.then((mes)=>{console.log(mes)}).catch((error)=>{console.log(error)})
//doing => done

上面代码中，r会拿到p的结果，然后链式调用下去。

我们可以使用async+await进行封装

    function promise(ms, mes) {
      return new Promise((resolve, reject) => {
        setTimeout(resolve, ms, mes);
      });
    }
    async function fn() {
      const p = await promise(3000, "doing");
      console.log(p); // doing
      const r = await promise(0, p);
      console.log(r); //doing
      const o = await (r + "=>done");
      console.log(o); //doing =>done
    }
    fn();

可以看到上面的异步代码就跟同步代码的写法一样。

async和await要同时使用才会有异步的效果，单单使用async依然是同步代码，只是返回promise对象

错误处理

在使用async/await关键字的时候，错误处理是关键，一般我们会这么写来捕捉错误

function ajax(){
   return Promise.reject(1)
}
async function fn(){
   try{
      const result=await ajax()
      console.log(result)
   }catch(error){
      console.log(error)
   }
}
fn() 

下面我们可以使用更好的方法

function ajax(){
   return Promise.reject(1)
}
function ErrorHandler(error){
    throw Error(error)
}
async function fn(){
   const result=await ajax().then(null,(error)=>{ErrorHandler(error)})
   console.log('result',result)
}
fn()

这里要注意的就是ErrorHandler时不要用return，以免把结果返回给result,使用throw Error就可以抛出一个错误。那么后续的代码就不会执行了

await的传染性

function async2(){
console.log('async2')
}
async function fn(){
   console.log('fn')
   await async2() //同步的
   console.log('我是异步？')
}
fn()
console.log('end')
//fn
//async2
//end
//我是异步?

最后的console.log('我是什么步？')是后于await关键字的，说明它是异步的，如果我们想执行同步代码，最好都放在await的上面，因为有时候await会带给我们疑惑，会误以为没有写await关键字的代码是同步的。

也许你会怀疑是否第一行log也是异步的，下面这个代码可以告诉你答案，并非写了async关键字就代表这是异步函数。

let a=0
async function fn(){
   console.log(a)
   await Promise.resolve(333).then((r)=>{console.log(r)})
   console.log('我是什么步？')
}
fn()
console.log(++a)
//结果
/*
0
1
333
"我是什么步？"
*/

串行和并行

await天生是串行的，所谓串行，就是按照顺序执行。

function async2(delay){
  return new Promise((resolve)=>{
    setTimeout(()=>{
      console.log('执行')
      resolve()
    },delay)
  })
}                  
async function fn(){
  await async2(5000)
  await async2(2000)
  await async2(1000)
}
fn()

由于async跟setTimeout同时用没有效果，所以我使用上面的代码做实验，log台五秒钟后会分别打印，这说明默认就是按照顺序执行await的

如果想要并行，就可以使用Promise.all或者forEach方法

function fn(){
  await Promise.all([async2(5000),async2(2000),async2(1000)])
}

function async2(delay){
  return new Promise((resolve)=>{
    setTimeout(()=>{
      console.log('执行')
      resolve()
    },delay)
  })
}
                     
function fn3(ms){
  return function fn(){
    async2(ms)
  }
}

[fn3(5000),fn3(2000),fn3(1000)].forEach(async (v)=>{
  await v()
})

与fetch相结合

fetch就是使用promise版本的XMLHttpRequest

fetch('products.json').then(function(response) {
  return response.json();
}).then(function(json) {
  console.log(json)
}).catch(function(err) {
  console.log('Fetch problem: ' + err.message);
});

上面的代码的意思是通过fetch申请一个json数据，然后得到数据后将其json化，再打印出来。

转化成async和await方法

const promise=()=>{
  try{
     const j=await fetch('products.json')
     const result=await j.json()
     console.log(result)
  }catch(error){
     console.log(error)
  }
}
promise()

在非 async 函数中调用 async 函数

我们有一个名为 f 的“普通”函数。你会怎样调用 async 函数 wait() 并在 f 中使用其结果？

async function wait() {
  await new Promise(resolve => setTimeout(resolve, 1000));

  return 10;
}

function f() {
  // ……这里你应该怎么写？
  // 我们需要调用 async wait() 并等待以拿到结果 10
  // 记住，我们不能使用 "await"
}

其实解决方法很简单，由于 await 会返回一个 promise，所以直接在后面写 then 方法就可以拿到结果

function f() {
  wait().then(result => alert(result));
}

HTTP 的缓存控制

什么是 HTTP 缓存

http缓存指的是: 当客户端向服务器请求资源时，会先抵达浏览器缓存，如果浏览器有“要请求资源”的副本，就可以直接从浏览器缓存中提取而不是从原始服务器中提取这个资源。

常见的http缓存只能缓存get请求响应的资源,http缓存都是从第二次请求开始的。第一次请求资源时，服务器返回资源，并在respone header头中回传资源的缓存参数；第二次请求时，浏览器判断这些请求参数，命中强缓存就直接200，否则就把请求参数加到request header头中传给服务器，看是否命中对比缓存，命中则返回304，否则服务器会返回新的资源。

缓存（cache）是优化系统性能的利器，由于链路长，网络延迟不可控，通过 HTTP 获取网络资源的成本比较高，所以，浏览器采用了缓存机制，将拿到的数据缓存起来，下次再请求的时候尽可能复用，这样的好处也很明显：响应速度快、节省网络带宽。

HTTP 缓存分类

根据是否需要重新向服务器发起请求来分类，可分为强制缓存，对比缓存（又称协商缓存）.

强缓存如果生效,那么不再和服务器发生交互.

对比缓存不管生不生效,都需要跟服务器发生交互.

也就是说强缓存可以不发请求,而对比缓存都得发请求.

跟强缓存相关的 API 有 Expires 和 Cache-Control 等,跟对比缓存相关的有 Etag 等,两种缓存可以同时存在,但是优先级是强缓存更高.

缓存流程

整个浏览器的缓存是这样的：

• 首先浏览器发现发送请求，获取服务器资源
• 服务器响应请求，返回资源，同时标记资源有效期
• 浏览器缓存资源，等待下次重用

强制缓存

强缓存跟缓存数据的时间有效性有关,当浏览器没有缓存数据的时候,会发送第一次请求给服务器,服务器会在响应头中附带相关的缓存规则,响应头中有关的字段就是 Expires/Cache-Control.

服务器标记资源的有效时间的头字段是Cache-Control,常用的属性是max-age=xx，意思是最大持续时间多少秒。这个属性在 Cookie 那一节也有类似，只是头字段不一样。

Cookie 的 max-age 是在浏览器收到 Cookie 的时间开始算的，而 Cache-Control的 max-age 则是在服务器发送响应头字段开始计算的。

上面的例子就是设置了多少秒的缓存时间,这种方式比 Expires 靠谱得多.

还有其他的属性例如：

• no_store：不允许缓存
• no_cache：可以 缓存但是使用前必须去服务器验证是否过期，是否有最新的版本
• must-revalidate：意思是缓存不过去就可以继续使用，但是过期了还想用就要去服务器验证。

Expires

Expires 中会表明具体的到期时间,在时间内都可以进行缓存.但是这里会有一个 BUG,因为本地时间跟服务器时间不一定相同,而且本地时间可以修改,比如说我的本地时间往前调整了两年,那么浏览器的强缓存就会一直延续两年,所以这种方式已不太准确。

客户端缓存控制

服务器发送了缓存指令，浏览器就会把缓存数据给保存到本地，等到需要用的时候，就会读取本地缓存中的服务器资源，提高网络效率。

不止浏览器可以发 Cache-Control 头，浏览器也可以发，这说明请求-应答双方都可以用Cache-Control 字段进行缓存控制。

当我们点击刷新按钮的时候，浏览器会在请求头里面加Cache-Control:max-age=0，表示的意思是我要最新的资源。这时候不会读取浏览器的缓存，而是向服务器发送请求。

下图是我在chrome浏览器中点击刷新时发送出去的请求头，自动带上了 Cache-Control:no-cache,跟 max-age效果是一样的。

浏览器的缓存什么时候生效呢？当我们点击前进、后退按钮的时候，会看到 from disk cache 的字样，这就触发了浏览器的缓存。

因为前进、后退等操作，浏览器只会添加最基本的请求头，不会增加Cache-Control之类的字段，所以会触发本地缓存。

协商缓存/对比缓存

使用 Cache-Control 做缓存控制只能刷新数据，不能很好地利用缓存数据，所以这里又有一个协商缓存的概念，也叫条件请求。

协商缓存做的就是 发给服务器做一下资源对比,看看是不是需要用到缓存的数据.这里的资源对比需要一个标识,这个标识也是第一次请求时服务器返回给浏览器保存在浏览器缓存库中的。

它的做法是利用两个连续的请求来组成验证动作，它是这样运作的：

第一步：先发一个 HEAD 请求，获取资源的修改时间或者其他元信息，然后与缓存数据比较，如果没有改就使用缓存数据，如果改了就走第二步。

第二步：发送 GET 请求，获取最新的版本。

为此 HTTP 协议还定义了 If 开头的条件请求字段。服务器第一次响应时需要提供 Last-Modified 和 ETag，然后第二次请求时就可以带上缓存里的原值，验证资源是否是最新的。

如果资源没有变，服务器就回应一个304 Not Modified 的状态码，表示缓存依然有效，浏览器就可以更新一下有效期，然后使用缓存。由于服务器只返回响应头,不需要返回响应主体,所以数据量大大降低.

Last-modified

Last-modified 的意思是文件的最后修改时间。

修改时间需要用到两个字段 Last-Modified / If-Modified-Since

Last-Modified 是第一次请求时服务器发送给浏览器的响应头字段,上面记录服务器资源的最后修改时间.

If-Modified-Since 是浏览器第二次请求时发送的头字段,服务器通过这个头字段来对比一下自己的最后修改时间.

当服务器第一次发送 Last-modified 给浏览器时，浏览器就把资源缓存下来，然后下次请求时在HEAD请求的头部带上 if-Modified-Since:第一次的 Last-modified 的值给服务器，服务器经过对比，告诉浏览器我这里的文件都是那段时间以前的，于是浏览器就使用缓存加载资源。

如果时间一样,说明资源没有修改过,则响应 304 状态码,告诉浏览器用缓存数据.

如果时间不一样,说明资源有动过,那么就响应 200 状态码,并把报文主体也发过去。

但Last-Modified有一个问题：

比如说一个文件定期更新，即使文件内容没有变，Last-Modified会认为已经变化了，传给浏览器就会浪费带宽。为了解决这个问题，还有一种 ETag的方式。

ETag

ETag主要用来解决修改时间无法准确区分文件变化的问题，使用 ETag可以精确识别资源的变动情况，让浏览器可以有效利用缓存。

ETag 是资源唯一标识，是由服务器决定规则的标识,当第一次访问时,服务器就会在响应头中带着这个标识,这个标识长这样:

ETag 对应的常用条件请求字段是 If-None-Match。当再次访问服务器时,浏览器会在请求头中发送 If-None-Match 这个字段并附上之前的 Etag 标识,如果服务器发现有这个标识就会跟自己的唯一标识做对比.

如果一样,说明资源没改过,响应 304 状态码,告诉浏览器用缓存数据

如果不一样,说明资源改动过,响应 200 并且发最新的资源主体过去.

小结

缓存是优化系统性能的重要手段，HTTP 传输时每个环节都可以使用到缓存。

HTTP 缓存就类似于浏览器跟服务器中间的一个缓存数据库,至于用不用这个缓存库就需要服务器来指定。

浏览器收到数据就会存入缓存，如果没过期就可以直接使用，过期就要去服务器验证是否依然可用

服务器可以指定两种方式:强制缓存和对比缓存.强制缓存比对比缓存优先级高

强制缓存不会发请求给服务器,它就是设定一个时间,这个时间可以分为 Expires 和 Cache-Control。
Expires 就是定一个具体的时间节点,但是有 bug,会因为服务器时间跟本地时间不同而有误差.

而 Cache-Control 常用的是 max-age，表示资源有效期，就是指定多少秒内用强制缓存.当强制缓存成功后返回 200.

对比缓存就是发送一段请求给服务器,请求信息可以有两种:修改时间和唯一标识.

两种都是需要跟服务器的信息进行对比,对比成功就返回 304,告诉浏览器用缓存数据,对比失败就返回 200,然后把用户需要请求的数据作为资源主体发回去.

验证资源的时间是否失效需要使用条件请求，常用if-Modified-Since和 If-None-Match,如果返回304就可以使用缓存里面的资源

验证资源是否被修改涉及到两个条件，ETag和Last-Modified，需要服务器预先在响应报文中设置，搭配条件请求使用

浏览器也可以发送 Cache-Control，比如刷新操作，就会发送 max-age=0来刷新数据

浏览器缓存的一个中心**就是：没有请求的请求，才是最快的请求

手写深拷贝

深拷贝是什么

在JS中，所有的拷贝API都是浅拷贝，比如数组的拷贝，我们一般使用Array.prototype.slice来拷贝一个数组，但是对于嵌套数组，就会只拷贝其中的引用。

const arr=[[1,2,3],[4,5,6]]
const arr2=arr.slice()
arr2[0].push(666)
console.log(arr) //[[1, 2, 3, 666], [4, 5, 6]]

上面的arr2是拷贝后的数组，arr2改变了同样会影响到arr的值，所以这就不是深拷贝。

官方解释是这样的

将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象

我所理解的深拷贝，就是当我克隆一个东西出来之后，跟原来的完全不相交。

序列化与反序列化的深拷贝

在工作中，我们一般都会使用序列化进行深拷贝，就是采用JSON.stringify和JSON.parse来进行深拷贝

const obj={
   name:'yanxi',
   props:{name:'qiu'}
}
const obj2=JSON.parse(JSON.stringify(obj))
obj2.props.name='11111'
obj 
//{name: "yanxi", props: {name: "qiu"}}

这种方式非常简单，但JSON的局限性较大。

局限性如下：

1、不支持函数，会自动忽略

2、不支持undefined，JSON天然不支持

3、不支持环状引用（即引用自身）会报错

4、不支持Date，会转成字符串

5、不支持symbol，JSON天然不支持

我们可以看到JSON.parse(JSON.stringify())虽然能够深拷贝一个对象，但是存在很大的局限性，对于复杂的对象就不适用了。因此，我们需要采用另外的方式来实现深拷贝，也就是通过递归的方式手动实现深拷贝。

递归深拷贝

JS中存在七种类型：number、string、boolean、symbol、null、undefined、object

其中除了object属于引用类型，其余都是简单数据类型，所以我们主要要对object的数据类型进行分辨，其余的简单数据类型都只要直接返回即可。

知道了深拷贝的概念，有了深拷贝的思路

下面我们从0开始，手撸一个深拷贝

简单数据类型深拷贝

简单数据是不可变的

let a=1
let b=a
b=2
a //1

上面的代码只是改变了b的指向，并不影响原来的数据a。

那么我们就可以直接实现对于简单数据类型的深拷贝函数

function deepClone(target){
   return target
}

object 类型深拷贝

深拷贝中最重要的是解决 object 类型深拷贝的思路，基于这个复杂数据类型，我们需要对Javascript 中的各种对象（数组对象，函数对象等）进行深拷贝的实现。

function cloneDeep(target) {
  let result
  if (typeof target === 'object') {
    result = {}
    for (let key in target) {
      result[key] = cloneDeep(target[key])
    }
    return result
  }
  return target
}

上面的代码通过对类型的检测，如果发现传入的是一个 object 对象，那么就循环它的属性，并且通过递归的方式一一将 object 对象的属性打到新创建的空白对象中，并将其返回。

Array 类型的深拷贝

在对数组类型进行检测的时候，我们不能用 typeof 进行检测，因为会返回 object,这里我们需要使用的Object.prototype.toString.call(Array)或者instanceof关键字，为了方便，这里就使用 instanceof 关键字

function cloneDeep(target) {
  let result
  if (typeof target === 'object') {
    if (target instanceof Array) {
      result = []
      for (let key of target) {
        result.push(cloneDeep(key))
      }
    } else {
      result = {}
      for (let key in target) {
        result[key] = cloneDeep(target[key])
      }
    }
    return result
  }
  return target
}

函数深拷贝

函数需要怎么深拷贝呢？我们知道函数中的参数传递都是值传递，虽然目标函数会改变引用地址，但是函数已经把值作为参数传递进去了，所以我们直接返回调用函数的结果就可以了。

let fn=function (){return 123}
cloneDeep(fn) / /值传递
fn=function (){return 456} // 这里的函数改变了引用地址
cloneDeep(fn)() //需要做到返回123

下面是实现代码，为了维持代码的结构，让简单数据类型和复杂数据类型做分离，我使用 instanceof 检测 target 类型，当检测函数时才使用 typeof 关键字

function cloneDeep(target) {
  let result
  if (target instanceof Object) {
    if (target instanceof Array) {
      result = []
      for (let key of target) {
        result.push(cloneDeep(key))
      }
    } else if (typeof target === 'function') {
      result = function(...rest) {
        return target(...rest)
      }
    } else {
      result = {}
      for (let key in target) {
        result[key] = cloneDeep(target[key])
      }
    }
    return result
  }
  return target
}

还有更多的数据对象如果想要实现深拷贝，只要新增类型判断即可，这里就不再扩展了。

结束~

enjoy！

HTTP的由来

使用HTTP 访问 Web

当我们在 Web browser（网页浏览器）的地址栏输入 URL 时，Web 浏览器会根据URL从指定的Web服务器端获取文件资源（resource），从而显示出 Web 信息。
像这种通过请求获取到服务端资源的Web 浏览器，都可以称之为客户端（client）。Web 使用超文本传输协议（HyperText Transfer Protocol）作为规范，完成从客户端到服务端的一系列运作流程。超文本传输协议缩写就是 HTTP 协议，本质上来说，这是一种规则的约定，Web 通过这个约定进行通信。

下面我们来通过 HTTP 诞生的背景来了解为什么会制定 HTTP 协议，以便于我们更好地理解 HTTP。

史前时期

20 世纪 60 年代，美国国防部高等研究计划署（ARPA）建立了 ARPA 网，它有四个分布在各地的节点，被认为是如今互联网的“始祖”。

然后在 70 年代，基于对 ARPA 网的实践和思考，研究人员发明出了著名的 TCP/IP 协议。由于具有良好的分层结构和稳定的性能，TCP/IP 协议迅速战胜其他竞争对手流行起来。

创世

1989 年，一位名叫蒂姆·伯纳斯 - 李（Tim Berners-Lee）的博士发表了一篇论文，提出了在互联网上构建超链接文档系统的构想。

最初设想的基本理念是：借助多文档之间相互关联形成的超文本（HyperText），连成可相互参阅的WWW（World WideWeb，万维网）。

现在已确立了三项关键技术。

1. URL：即统一资源标识符，作为互联网上资源的唯一身份；
2. HTML：即超文本标记语言，描述超文本文档；
3. HTTP：即超文本传输协议，作为传递超文本文档的协议。

基于这个**，李博士把这个系统称为“万维网”（World Wide Web），也就是现在的 Web。在这一年，HTTP 诞生了。

HTTP/0.9

由于当时互联网世界受到内存、cpu 计算能力、网速等多重影响，在 HTTP 涉及初始时，结构简单，它也采用纯文本形式。这时候只允许 GET 请求，通过这个动作从服务器获取 HTML 文档，并且请求一次后马上关闭连接。

虽然它很简单，但是作为一个原型，很成功完成了历史使命，验证了 web 的可行性，为后来的拓展打下基础。

HTTP/1.0

1993年，实际上第一个可以图文混合的浏览器 Mosaic 诞生，随后1995年服务器软件 Apache 诞生，简化了 HTTP 服务器的搭建工作。

同时期，计算器多媒体类似于 JPEG 和MP3的诞生促进了 HTTP 的发展。这时候进入1.0时代，这个版本从形式上跟目前的 HTTP 差别非常小。比如：

1. 增加了 HEAD、POST 等新方法；
2. 增加了响应状态码，标记可能的错误原因；
3. 引入了协议版本号概念；
4. 引入了 HTTP Header（头部）的概念，让 HTTP 处理请求和响应更加灵活；
5. 传输的数据不再仅限于文本。

HTTP/1.1

1995 年，网景的 Netscape Navigator 和微软的 Internet Explorer 开始了著名的“浏览器大战”，这一大战极大推动了 Web 的发展。

1999年，HTTP/1.1发布 RFC文档，此后这份文档延续了十余年。相较于1.0，它变更了以下内容：

1. 增加了 PUT、DELETE 等新的方法；
2. 增加了缓存管理和控制；
3. 明确了连接管理，允许持久连接；
4. 允许响应数据分块（chunked），利于传输大文件；
5. 强制要求 Host 头，让互联网主机托管成为可能。

HTTP2.0与1.1的区别

由于1.1版本存在连接慢、无法跟上迅猛发展的互联网等问题，Google 公司为了解决这个问题，在自家流行的 Chrome 浏览器上应用了自家的服务器，并且推出新的 SPDY 协议。这时候互联网标准化组织以此为基础最终发布了2.0版本。

HTTP2.0充分考虑到目前的宽带、安全性、移动互联网等情况，补充了1.1版本的性能短板：

1. 二进制协议，不再是纯文本；
2. 可发起多个请求；
3. 压缩请求头，减少数据传输量；
4. 允许服务器主动向客户端推送数据；
5. 增强了安全性，“事实上”要求加密通信。

不过2.0版本直到今天还不够普及。

HTTP3.0的延伸

谷歌公司再次发布更加优化版本的 QUIC 协议，在自己的 Chrome 浏览器中试验，以庞大用户量和数据为支撑，持续推动 QUIC 协议的发展。

2018年，国际化标准组织以此为标准发布了HTTP3.0版本。有可能我们会直接跳过2.0采用3.0的标准。

在《你不知道的Javascript》中，有一道题

for(var i=0; i < 6; i++) { 
    setTimeout(function(){ 
        console.log(i); 
    },0); 
}

答案是6个6。

这道题粗略的解释是i属于全局作用域，在异步定时器里，也引用的是相同作用域中的i，当定时器启动时，i已经变成了6，所以打印出来的结果并不是我们预期的0、1、2、3、4、5。

那么有没有更加专业（zhuangbility）一点的说法呢？有的，我们可以从执行上下文和闭包的角度来解题。

今天我们来深入说一说其中的原理

闭包是什么

首先我们需要知道闭包究竟是什么东西。

MDN中对于闭包的解释是这样的：

一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。

这么专业的解释肯定看不懂啦，我们来看看它给的例子：

function init() {
    var name = "Mozilla"; // name 是一个被 init 创建的局部变量
    function displayName() { // displayName() 是内部函数，一个闭包
        alert(name); // 使用了父函数中声明的变量
    }
    displayName();
}
init();

以上代码非常简单，它的大概意思就是displayName函数里并没有name这个变量，它引用了外层作用域中的name,那么displayName就是一个闭包

所以我们用大白话定义一下：闭包 = 函数 + 访问外层作用域的变量。

执行上下文与闭包的关系

要明白执行上下文与闭包的关系，首先我们需要写一下上面例子中的执行上下文过程：

1、创建全局上下文，压栈

ECStack=[globalContext]

2、全局上下文初始化完成

globalContext={
   VO:{  //全局变量对象中有个init函数变量声明
      init:referance to function init
   },
   Scope:[globalContext.VO],
   this:globalContext.VO
}

同时init函数内部有个[[scope]]属性保存了globalContext.VO

3、调用函数，创建函数上下文后压栈

ECStack=[globalContext,initContext]

4、进入上下文，此时函数并没执行，初始化函数上下文,将[[scope]]内部属性复制给函数上下文中的Scope属性,并将当前上下文中的AO（活动变量对象）放到最前面

initContext={
   AO:{
      arguments:{
         length:0
      },
      name:undefined,
      displayName:referance to function displayName
   },
   Scope:[AO,globalContext.VO],
   this:undefined
}

5、函数代码执行，变量对象完成赋值

initContext={
   AO:{
      arguments:{
         length:0
      },
      name:Mozilla,
      displayName:referance to function displayName
   },
   Scope:[AO,globalContext.VO],
   this:undefined
}

6、遇到displayName代码，此时内部生成[[scope]]属性保存外层作用域层级链

displayName.[[scope]]=[initContext.AO,globalContext.VO]

7、开始调用displayName函数，创建函数上下文，压栈

ECStack=[globalContext,initContext,displayNameContext]

8、进入函数上下文，初始化displayNameContext,把活动对象压入作用域链中

displayNameContext={
   AO:{
      arguments:{
         length:0
      },
   }
   Scope:[AO,initContext.AO,globalContext.VO]
}

9、函数执行，完成变量对象赋值，然后找到外层的name，打印

10、开始弹栈

// 先弹displayName的上下文
ECStack=[globalContext,initContext]

// 再弹init的上下文
ECStack=[globalContext]

以上就是执行上下文的过程，而displayName之所以能够访问到外层作用域中的name，就是因为displayName中的Scope属性，里面保存了initContext和全局上下文中的变量对象。

displayName.Scope=[AO,initContext.AO,globalContext.VO]

有了这个属性，即使initContext被弹出执行栈了，displayName同样可以获取到它的变量对象。

这就是闭包的底层逻辑。同时也是闭包和执行上下文的关系

回到开始

现在我们来重新审视一下最开始的代码

for(var i=0; i < 6; i++) { 
    setTimeout(function(){ 
        console.log(i); 
    },0); 
}

当执行function函数时，此时的执行上下文有什么呢？全局上下文变量对象中有一个i

globalContext.VO={
   i:6
}

我们可以修改一下代码使它变成我们想要的0、1、2、3、4、5

1、第一种改法

for(var i=0; i < 6; i++) { 
    setTimeout(function(i){ 
        console.log(i); 
    },0,i); 
}

使用这种方法，会让setTimeout函数传i给function，此时匿名函数第一次执行时它的上下文中是这样的

functionContext={
   AO:{
      arguments:{
         0:0,  // 实参中的 i
         length:1
      },
      i:0,
   }
  ...
}

函数调用时，i已经被定时器当成参数传递给匿名函数了。第一次匿名函数执行时i为0。

2、第二种改法

for (var i = 0; i < 6; i++) {
  (function (i) {
    setTimeout(() => {
      console.log(i);
    }, 0);
  })(i);
}

类似第一种改法，只是此时i保存在外层立即执行函数的变量对象里面

外层匿名函数Context = {
    AO: {
        arguments: {
            0: 0,
            length: 1
        },
        i: 0
    }
}

内层匿名函数的Scope属性为[AO,外层匿名函数Context.AO,globalContext.VO]

3、第三种改法

for(let i=0; i < 6; i++) { 
    setTimeout(function(){ 
        console.log(i); 
    },0); 
}

使用let声明不会将i挂在全局变量对象下（跟var声明不是同一个）。此时开辟了不同的变量对象。

定时器参数函数Context={
   AO:{
      length:0
   },
   Scope:[AO,无名氏作用域变量对象,globalContext.VO]
}

于是定时器参数函数function顺着Scope属性找到对应的i

选择排序

选择排序可以用额外空间，也可以原地排序，这种排序行为的时间复杂度是 O(n²)

额外空间选择排序算法思路:

用循环不断将最小的取出来，排列到额外空间上

const array: number[] = [1, 3, 2, 7, 55, 9, 2, 44, 9, 2, 44, 33, 96, 101];

function selectionSort(args: number[]) {
  let len = args.length;
  let newArray: number[] = [];
  for (let i = 0; i < len; i++) {
    let min = Math.min(...args);
    newArray.push(min);
    let index = args.indexOf(min);
    args.splice(index, 1);
  }
  return newArray;
}

这种方式的空间复杂度是 O(n),因为开辟了新的空间newArray。
时间复杂度是 O(n²)，原因是 Math.min方法跟 for 循环是一样的，整个函数相当于进行了两次 for 循环。

下面用双指针来实现原地排序，不用 Math.min 方法了

核心思路:

利用两个指针，当指针i停时，另一个指针j找最小的数。

如果能够找到，就跟当前i 所在位置的数互换。

function selectionSort2(args) {
  for (let i = 0; i < args.length; i++) {
    //先取第一个数的 index，当它是数组中最小的数的索引
    let minIndex = i;
    //需要用来记找到的更小的数的 index
    //由于是互换机制，每次都会从前到后排列数字。所以只需要每次从 i 的位置开始找就行了
    for (let j = i; j < args.length; j++) {
      if (args[j] < args[minIndex]) {
        minIndex = j;
      }
    }
    //互换一下
    [args[i], args[minIndex]] = [args[minIndex], args[i]];
  }
  return args;
}

队列

队列(Queue)介绍

队列的结构跟栈相反，队列是先进先出的数据结构。

队列基本操作有两种：入队和出队。从队列的后端位置添加实体，称为入队；从队列的前端位置移除实体，称为出队。

对应的 API 为 Array.prototype.push 和Array.prototype.shift方法。

当出队列时，即调用 shift 方法时，由于所有后排的数据都要往前推一格，所以出队列时的时间复杂度为 O(n)。

下图为队列中元素先进先出 FIFO (first in, first out)的示意

用队列实现栈

请你仅使用两个队列实现一个后入先出（LIFO）的栈，并支持普通队列的全部四种操作（push、top、pop 和 empty）。

实现 MyStack 类：

void push(int x) 将元素 x 压入栈顶。
int pop() 移除并返回栈顶元素。
int top() 返回栈顶元素。
boolean empty() 如果栈是空的，返回 true ；否则，返回 false 。
 

注意：

你只能使用队列的基本操作 —— 也就是 push to back、peek/pop from front、size 和 is empty 这些操作。
你所使用的语言也许不支持队列。 你可以使用 list （列表）或者 deque（双端队列）来模拟一个队列 , 只要是标准的队列操作即可。
 

示例：

输入：
["MyStack", "push", "push", "top", "pop", "empty"]
[[], [1], [2], [], [], []]
输出：
[null, null, null, 2, 2, false]

解释：
MyStack myStack = new MyStack();
myStack.push(1);
myStack.push(2);
myStack.top(); // 返回 2
myStack.pop(); // 返回 2
myStack.empty(); // 返回 False
 

提示：

1 <= x <= 9
最多调用100 次 push、pop、top 和 empty
每次调用 pop 和 top 都保证栈不为空

答案

var MyStack = function() {
    this.queue=[]
    this._queue=[]
};

MyStack.prototype.push = function(x) {
    //直接 push 即可
    this.queue.push(x)
};

MyStack.prototype.pop = function() {
    //把主队列的元素除了最后一个外都shift出来 push 进副队列
    while(this.queue.length>1){
        this._queue.push(this.queue.shift())
    }
    //剩下的 这个就是要返回的 pop 的元素
    const num=this.queue.shift()
    // 记下 pop 出去的元素后记得把副队列的元素 push 回主队列
    while(this._queue.length){
        this.queue.push(this._queue.shift());
    }
    return num
};

MyStack.prototype.top = function() {
    //队列的顶就是队列的最后一个元素
    return this.queue[this.queue.length-1]
};

MyStack.prototype.empty = function() {
    //没啥好说的
    return this.queue.length===0
};

HTTP 相关的应用

Web 服务器

浏览器是 HTTP 中的请求方，而协议的另一方就是应答方==>服务器,Web Server

Web服务器有两个层面的含义：硬件和软件。

硬件指的就是物理形式或者云形式的机器，在多数情况下它不一定是服务器，而是利用反向代理、负载均衡等多种技术组成的集群。

软件就是提供 Web 服务的应用程序，通常运行在硬件含义的服务器上，它利用硬件能力响应海量的 HTTP 请求，处理各种网页、图片等文件，或者转发请求等等。

目前世界上最流行两类 Web 服务器，分别是老牌的 Apache 服务器（特点:功能完善，学习门槛低）和后起之秀 Nginx（特点：高性能、高稳定性）。

CDN

CDN 全称是内容分发网络Content Delivery Network，它是浏览器和服务器之间的内容架设，它应用了 HTTP 协议中的缓存和代理技术，能够代理源站响应客户端的请求。

它有什么好处呢？

它可以缓存源站数据，让浏览器不用再千里迢迢到达源站服务器，而是在半路直接获取响应。如果 cdn 的调度算法优秀，那么就可以找到距离用户跟进的节点，大幅度缩短响应时间。

爬虫

浏览器是一种用户代理，代替我们访问互联网。

但是这个代理也可以是机器人，这些机器人就称为爬虫。本质上是一种可以自动访问 Web 资源的应用程序。

爬虫是怎么来的呢？绝大多数都是由搜索引擎放出来的，它能够抓取网页并存入庞大的数据库中，再建立关键字索引，这样我们才可以在搜索引擎中搜索到互联网的各个页面。

爬虫也有一些不好的地方，比如导致敏感信息泄露。所以，现在也出现了一种反爬虫技术，通过各个手段来限制爬虫。

Web Service

Web Service 和 Web Server的名字很像，但是确实完全不同的东西。

它是基于 Web（HTTP）的服务架构技术，既可以运行在内网，也可以在适当保护后运行在外网。

因为采用了 HTTP 协议传输数据，所以在 Web Service 架构里服务器和客户端可以采用不同的操作系统或编程语言开发。例如服务器端用 Linux+Java，客户端用 Windows+C#，具有跨平台跨语言的优点。

小结

• 互联网上绝大部分资源都使用 HTTP 协议传输，浏览器是 HTTP 协议里的请求方，即 User Agent； 服务器是 HTTP 协议里的应答方，常用的有 Apache 和 Nginx；

• CDN 位于浏览器和服务器之间，主要起到缓存加速的作用；

• 爬虫是另一类 User Agent，是自动访问网络资源的程序；

• Web Service 是一种服务架构技术，具有跨平台跨语言的特点。

HTTP 相关的协议

TCP/IP

TCP/IP 协议是目前网络世界“事实上”的标准通信协议，是一系列网络通信协议的统称，其中最核心的两个协议是TCP和IP。

它还有其他协议例如：UDP、ICMP、ARP 等等。他们共同组成一个复杂的协议栈。

这个协议有四层

1. 应用层
2. 传输层（TCP 归属层）
3. 网际层（IP 归属层）
4. 链接层

IP 协议是Internet Protocol的缩写，它主要用来解决寻址和路由以及如何传送数据包的问题。

IP 系统用了 IP 地址这个概念来定位每一台计算机。对应电话系统，需要打电话必须要接入电话网，由通信公司分配一个号码，这个号码就相当于 IP 地址。

TCP 协议是Transmission Control Protocol的缩写，意思是“传输控制协议”，它位于 IP 协议之上，基于 IP 协议提供可靠的、字节流形式的通信，是 HTTP 协议得以实现的基础。

可靠指的是保证数据不流失，字节流则保证数据完整。

TCP/IP是可靠的、完整的协议

DNS

TCP/IP使用 IP 地址来标识计算机，由于计算机本身处理的就是数据，这样的地址对应计算机相当方便，但是却不利于人类记忆。

DNS 域名系统就可以解决这个问题。它用了一组有意义的名字来替代 ip 地址，并建立映射关系。比如：访问 www.baidu.com就是访问百度的 IP 地址14.215.177.38（不止这一个）

在 DNS 中，域名又称主机名，它被设计成一个非常有层次的结构。其中，最右边的比如.com,.cn等都是顶级域名

顶级域名下面是二级域名，它位于顶级域名的左侧。例如，在zh.wikipedia.org中，wikipedia是二级域名。w3.org中，w3也是二级域名。

二级域名下面是三级域名，它位于二级域名的左侧。例如，在zh.wikipedia.org中，zh是三级域名。

想要使用 TCP/IP 协议来通信仍然要使用 IP 地址，所以需要把域名做一个转换，“映射”到它的真实 IP，这就是所谓的“域名解析”。

URI 和 URL

DNS 和 IP 地址标记了互联网上的主机，但是主机上有大量文本、网页等，需要找哪一个呢？

这就出现了 URI，全称统一资源定位符标识符。使用它可以唯一地标记互联网上的资源。

URI 的另一个表现形式是 URL（统一资源定位符），就是我们俗称的网址。它是 URI 的子集，但是两者相差不大。

URI是怎样的呢？

http://nginx.org/en/download.html

上面的URI 由三个基本部分组成：

1.协议名：http

2.主机名：主机标记位置，可以是域名或 ip 地址。这里是nginx.org

3.路径，也就是资源在主机上的位置，用/分隔成多个目录。这里是/en/download.html

HTTPS

这是 HTTP 的安全版本，由于 HTTP 协议不够安全，所以在 TCP/IP协议之上，又架设一层 SSL/TLS 的协议，而 HTTPS 的意思就是运行在在 SSL/TLS 协议上的 HTTP。

全称为HTTP over SSL/TLS

SSL/TLS是负责加密通信的安全协议，也是可靠的传输协议

SSL/TLS一开始叫 SSL（Secure Socket Layer）,后来改名叫 TLS(Transport Layer Security),由于历史原因很多人称之为 SSL/TLS。

它使用了许多密码学的研究成果，综合了对称加密、非对称加密、摘要算法、数字签名、数字证书等技术，能够在不安全的环境中为通信的双方创建出一个秘密的，安全的传输通道。

如果有网址的协议名是 https，则代表其启用了 HTTPS 协议。

代理

代理（proxy）是 HTTP 协议中请求方和应答方中间的环境，作为中转站，可以转发请求，也可以转发响应。

以下列举代理的种类

1. 匿名代理：完全“隐匿”了被代理的机器，外界看到的只是代理服务器；

2. 透明代理：顾名思义，它在传输过程中是“透明开放”的，外界既知道代理，也知道客户端；

3. 正向代理：靠近客户端，代表客户端向服务器发送请求；

4. 反向代理：靠近服务器端，代表服务器响应客户端的请求；

CDN 实际上也是代理的一种，它替代服务器响应客户端的请求，通常扮演透明代理和反向代理的角色。

代理作为传输的中间层，可以做很多事情，例如：

1. 负载均衡：把访问请求均匀分散到多台机器，实现访问集群化；

2. 内容缓存：暂存上下行的数据，减轻后端的压力；

3. 安全防护：隐匿 IP, 使用 WAF 等工具抵御网络攻击，保护被代理的机器；

4. 数据处理：提供压缩、加密等额外的功能。

关于HTTP 代理还有一个特殊的代理协议（proxy protocol）。

小结

TCP/IP是世界上最常用的协议，具有可靠、完整的特点。HTTP 运行在 TCP/IP 之上。

DNS 域名是 IP 地址的等价替代，需要用域名解析实现到 IP 地址的映射

URI 由协议、主机名、路径构成。

HTTPS 由 HTTP+SSL/TLS+TCP/IP 组成。

代理是 HTTP 传输的中转站，可以实现缓存加速、负载均衡等功能。

请求方法

在 Request Header 中，有请求方法和请求的目标，目前 HTTP1.1一共有8种请求方法：

1.GET：获取资源，可以理解为读取或者下载数据

2.HEAD：获取资源的元信息

3.POST：提交数据，相当于写入数据

4.PUT：修改数据等

5.DELETE：删除 资源

6.CONNECT：建立特殊的连接隧道

7.OPTIONS：列出对资源实行的方法

8.TRACE：追踪请求-相应的传输路径

这些方法基本都是大写。

GET/HEAD

GET 是 HTTP 中最古老的请求方法，也是用得最多的方法。

它的语义是从服务器中获取资源，这个资源可以是静态的文本、页面、视频等等，一般来说，GET 请求如果有参数，那么它的参数需要增加查询字符串在 URI 中。

HEAD 跟 GET 请求方法类似，也是从服务器获取资源，但是服务器不会返回请求的实体数据，而是传回响应头，也就是资源的元信息。

HEAD 方法可以看成是 GET 方法的简化版或者说是轻量版。它可以用于不需要用到资源的场合，避免传输数据的浪费。

比如说，检查一个文件是否存在，就只要发 HEAD 请求就可以了。

POST/PUT

这两个方法非常相似，都是指定向服务器发送数据，数据一般放到 body 里面。

例如，我们向服务器发送加入购物车请求，那么你喜欢的商品就会作为 body 中的数据发送给服务器。

PUT 也是一样，向服务器提交数据，但是从语义上来看，PUT 更像是 update，而 POST 更像是 create。

非常用方法

DELETE：方法指示服务器删除资源，因为这个动作危险性太大，所以通常服务器不会执行真正的删除操作，而是对资源做一个删除标记。

CONNECT是一个比较特殊的方法，要求服务器为客户端和另一台远程服务器建立一条特殊的连接隧道，这时 Web 服务器在中间充当了代理的角色。

OPTIONS方法要求服务器列出可对资源实行的操作方法，在响应头的 Allow 字段里返回。它的功能很有限，用处也不大，有的服务器（例如 Nginx）干脆就没有实现对它的支
持。

TRACE方法多用于对 HTTP 链路的测试或诊断，可以显示出请求 - 响应的传输路径。它的本意是好的，但存在漏洞，会泄漏网站的信息，所以 Web 服务器通常也是禁止使用。

安全与幂等

在实际面试中，有两个重要的概念，安全和幂等。

所以安全，就是不会对服务器资源造成修改的风险，这里只有 GET 请求和 HEAD 请求是安全的，因为它们都是只读操作。

所谓幂等是一种数学概念，意思就是不管操作多少次，结果都是相同的。也就是幂次数结果相等。

很显然，GET 和 HEAD 是幂等的，而 POST 是不幂等的，原因是它的语义就代表着创建，既然创建了，当然会新增结果。PUT 比较特殊，虽然它也会修改数据，但是它的语义是修改而非新增或减少，不管做多少次，它都只更新一个资源，所以它也是幂等的。

我们可以认为这里的结果指的是数据的数量。多次 post 会增加数据量，而多次修改不会增加数据量，这就是幂等跟非幂等的通俗含义。

小结

请求是客户端发出的，要求服务器执行的、对资源的一种操作。

请求只是指示，具体要怎么做，需要跟服务端协商。

常用的请求方法是 GET 和 POST。分别是获取数据和发送数据。

HEAD 是轻量级 GET，每次只获取元信息，也就是响应头。

PUT 基本上与POST 相同，多用于更新数据，PUT 是幂等的，POST 是非幂等的。

安全和幂等是描述请求方法的两个重要属性。

原生实现上传文件预览

获取上传文件信息

原生的HTML5通过<input type="file" >属性来上传文件，我们可以采用浏览器提供的 File API 对所选择的文件进行操控。

如果我们希望访问选择的文件，分为两步

• 获取 DOM 元素

<input type="file" id="input">

const selectFile = document.getElementById('input')

• 监控 change 事件

const selectFile = document.getElementById('input')
selectFile.addEventListener('change',()=>{
  console.log(selectFile.files)
})

通过 DOM 的 files属性，我们可以得知上传文件的相关信息，比如图中的文件名（name）和大小（size）

浏览器直接将上传文件存到 fileList 这个数据结构中，这个数据结构可以存很多个文件，如果想要存多个，那么就需要添加 html 属性multiple

<input type="file" multiple id="input">

难看的上传文件控件

上传文件的控件实在很丑，我们有很多种方法改变它，这里就介绍最常用也是最简单的方式。

第一步，隐藏 input 控件

#input{
  display:none;
}

第二步，创建好看的点击区域，这里就用 button 控件吧

  <button>上传</button>

const selectFile = document.getElementById('input')
const button=document.querySelector('button') /

selectFile.addEventListener('change',()=>{
  console.log(selectFile.files)
})

button.onclick=function (){
  selectFile.click() // 调用 click函数点击
}

现在只需要对 button 组件进行样式调整就行啦。

使用 FileReader 对象预览上传的图片

下面，我们需要做一个预览图片的小功能，还是使用上面的代码，不过这里添加一个新的预览区.

我们考虑使用FileReader对象让浏览器异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容。

  <div>
    <input type="file" multiple id="input">
  </div>
  <button>上传</button>
  <img class='preview' />

#input{
  display:none;
}
.preview{
  width:100px;
  height:100px
}

const selectFile = document.getElementById('input')
const button = document.querySelector('button')
const preview = document.querySelector('.preview')

selectFile.addEventListener('change', () => {
  //循环读取 fileList 的file
  for (let file of selectFile.files) {
    const imageReg = /image\//g //正则表达式
   // 检测 file 的 type 属性能否匹配到"image/"
    if (!imageReg.test(file.type)) {
      break
    }
    // 这里用到 FileReader API创建一个 Reader 读取器
    let reader = new FileReader()
    //当 reader 对某文件读取成功后的回调
    reader.onload = function (e){
      preview.src=e.target.result
    }
    //读取 DataURL后触发onload 回调
    reader.readAsDataURL(file);
  }
})

button.onclick = function() {
  selectFile.click()
}

上面代码中readAsDataURL 方法会读取指定的 Blob 或 File 对象。

读取操作完成的时候，readyState会变成已完成DONE，并触发 loadend (en-US) 事件，同时 result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容。

我们把这个 base64编码放到创建好的 img 标签的 src 属性上，就可以完成图片的预览。

使用 createObjectURL预览上传的图片

这个 API 跟readAsDataURL的效果差不多，不过它返回的不是base64编码，而是DOMString,我们可以理解为本地内存容器的URL地址。

只需要稍微修改一下代码就可以了

const selectFile = document.getElementById('input')
const button = document.querySelector('button')
const preview = document.querySelector('.preview')

selectFile.addEventListener('change', () => {
  //循环读取 fileList 的file
  for (let file of selectFile.files) {
    const imageReg = /image\//g //正则表达式
      // 检测 file 的 type 属性能否匹配到"image/"
    if (!imageReg.test(file.type)) {
      break
    }
    // 这里用到 createObjectURL API生成本地内存 url
    preview.src = window.URL.createObjectURL(file)
    preview.onload = function() {
      //由于每次使用createObjectURL都会产生一个URL 对象。
      //当你结束使用某个 URL 对象之后，应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了。
      window.URL.revokeObjectURL(this.src)
    }
  }
})

button.onclick = function() {
  selectFile.click()
}

预览 PDF

createObjectURL还可以用来生成 PDF 预览，我们可以采用 iframe 标签，让 pdf 展示在 iframe 上

  <iframe id='viewer'></iframe>

#viewer{
  width:600px;
  height:600px;
  border:1px solid red;
}

selectFile.addEventListener('change', () => {
  //循环读取 fileList 的file
  for (let file of selectFile.files) {
    const obj_url=window.URL.createObjectURL(file)
    // 这里用到 createObjectURL API生成本地内存 url
    iframe.setAttribute('src', obj_url);
    window.URL.revokeObjectURL(obj_url);
  }
})

先介绍这三种比较广泛的预览形式，后续如有需要，我再补充~

enjoy！

理解递归

递归是一种解决问题的方法，它从解决问题的各个小部分开始，直到解决最初的大问题。

递归的条件

递归有两个条件：

• 调用自身
• 找到基线条件，即一个不再递归调用的条件（停止点），防止无限调用自身

下面用例子来分析采用递归方法来实现数组求和，假设数组为[1,2,3,4,5,6]。

我们首先分析一下数组求和的过程：

• 公式为：nums[0]+...nums[length-1] = sum
• 通过公式推导出基线是 length-1，在此时递归结束
• 从 nums[0]开始，index 不断递增

所以我们可以写出下面的代码

// 递归实现数组求和
//递归求和的重点：1.找到最小问题，2.调用自身
function sum(nums) {
  function sum2(nums, len) {
    if (len === nums.length) {
      //这里就是基线条件
      return 0;
    }
    return nums[len] + sum2(nums, len + 1); //调用自身
  }
  return sum2(nums, 0);
}

我们在写递归时，比较难判别的是如何考量基线条件。

递归解决阶乘问题

下面我们尝试来做一个更经典的递归问题-阶乘

我们来看看如何计算一个数的阶乘。数n的阶乘，定义为n!，表示从1到n的整数的乘积。

分析一下：

我们从n开始，一直到 1 才停止，分解一下就是n*(n-1)*(n-1-1)*...1

也就是说基线条件为 1，而且我们要不停调用自身。调用自身的行为就是不断乘以比自己小一位的数。

所以代码可以这样写

// 递归解决阶乘问题
function factorial(n) {
  function factorial2(current) {
    if (current === 1) {
      return 1;
    } else {
      return current * factorial2(current - 1);
    }
  }
  return factorial2(n);
}

调用栈

入门了递归的两个小案例，现在我们来了解一下调用栈问题。既然叫栈，那么说明这个数据结构是后进先出的。

调用栈是什么呢？我们可以理解为当进入一个函数内部时，底层会自动产生一个调用栈，把当前的函数的调用给push进去，当产生递归时，也就是进入一个函数后又进入一个函数时，会把当前函数的调用堆叠到调用栈中。这是因为每个调用都可能依赖前一个调用的结果。

我们把上面的函数复制到浏览器中，并且在factorial内打一个断点来检查一下就可以看到调用栈的处理过程。

当第一次进入factorial函数时，此时还没有调用factorial2函数，左边的 call stack 上只显示一个函数，然后当我们点击step into next function 按钮时，就可以看到调用栈内又多了一个函数，说明此时已经压栈了。

如果一直点下去，随着 current 的逐步减少，可以看到 call stack一直在增加函数，直到 current 等于1之后，开始弹栈，call stack 内的函数逐渐从顶部开始弹出。

可以用下图表示执行栈的步骤

每个调用栈不可能无限扩展，在浏览器中，调用栈也有大小限制，如果超过了这个数量，那么就会出现栈过大的提示。

斐波那契数列

斐波那契数列是另一个可以用递归解决的问题。它是一个由0、1、1、2、3、5、8、13、21、34等数组成的序列。从第二个1开始（也就是第二位），每一个数都是前一位和前两位的总和。

已知当 n 为1或者0时都返回 n 自身，所以这就是自身的基线点。那么我们可以写出一个输入n 得出n 位是多少数值的函数

function fibonacci(n) {
  if (n === 0 || n === 1) {
    return n;
  }
  return fibonacci(n - 1) + fibonacci(n - 2);
}

记忆化斐波那契数列

所谓记忆化函数，就是在函数内部增加一个闭包来进行缓存。当我们调用fibonacci(5)时，可以画一张这样的图来查看执行过程。

可以看到fibonacci(3)被调用两次了，这就可以用到缓存来记录下这个结果。

function memorizeFibonacci(n) {
  let cache = [0, 1];
  function fibonacci(n) {
    if (n === 1 || n === 0) {
      return n;
    }
    if (cache[n]) {
      return cache[n];
    }
    let result = fibonacci(n - 1) + fibonacci(n - 2);
    cache[n] = result;
    return result;
  }
  return fibonacci(n);
}

使用缓存可以有效减少重复的计算，优化计算效率。

这里有一道 leecode 题目，就可以使用缓存以避免计算时间过长而导致做题失败。
剑指 Offer 10- I. 斐波那契数列

当JavaScript代码执行一段可执行代码(executable code)时，会创建对应的执行上下文(execution context)。
每个执行上下文包含三个重要属性

• 变量对象
• 作用域链
• this

当查找变量时，首先从当前上下文中的变量对象查找，如果没有就会往上查找父级作用域中的变量对象，最后的终点是访问最外层上下文中的变量对象，如果没有就报错。这样由多个执行上下文的变量对象构成的链表就叫做作用域链。

当执行一段全局代码时，就会生成一个执行上下文,里面会包含全局变量对象

var a=123

globalContext.VO={
     a:123
}

函数书写

当书写一段函数代码时，就会创建一个词法作用域，这个作用域是函数内部的属性，我们用[[scope]]表示，它里面保存父变量对象，所以[[scope]]就是一条层级链。

function fn(){
}
/*
fn.[[scope]]=[
     globalContext.VO
]
*/

函数调用

当函数调用，就意味着函数被激活了，此时创建函数上下文，创建活动对象，然后将活动对象(AO)推到作用域链的前端。
我们用scope来表示此时的作用域

fnContext={
     Scope:[AO,fn.[[scope]]]
}

结合例子

我们来分析以下代码函数上下文中的变量对象和作用域的创建过程

var scope = "global scope";
function checkscope(){
    var scope2 = 'local scope';
    return scope2;
}
checkscope();

1、全局上下文创建，生成全局变量对象VO，checkscope函数创建，生成内部属性[[scope]]，并且把父变量对象放进去。

checkscope.[[scope]]=[
     globalContext.VO
]

2、函数调用了，创建函数上下文并压入执行栈

ECStack=[globalContext,checkscopeContext]

3、函数调用的分析阶段，做准备工作，第一步：复制函数[[scope]]属性创建作用域链

checkscopeContext={
     Scope:checkscope.[[scope]]
}

4、第二步：创建活动对象，初始化活动对象，加入形参、函数声明、变量声明

checkscopeContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope2: undefined
    }，
    Scope: checkscope.[[scope]],
}

5、第三步：将活动对象压入 checkscope 作用域链顶端

checkscopeContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope2: undefined
    },
    Scope: [AO, [[Scope]]]
}

6、准备工作做完，开始执行函数，随着函数的执行，修改 AO 的属性值

checkscopeContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope2: 'local scope'
    },
    Scope: [AO, [[Scope]]]
}

7.查找到 scope2 的值，返回后函数执行完毕，函数上下文从执行上下文栈中弹出

ECStack = [
    globalContext
];

Cookie 机制

HTTP 是无状态的，也就是没有记忆能力，好在 HTTP 可以扩展，有了扩展，也就有了记忆能力，这里要说到Cookie 技术

Cookie 是什么

Cookie相当于服务器给浏览器的小纸条，上面写了只有服务器才可以理解的数据，需要客户端把这个信息发送给服务器，当服务器看到这张小纸条，就能认出发送请求的客户端是谁。

Cookie 的传输过程

Cookie 传输时需要用到两个HTTP 头部字段：响应头Set-Cookie 和 请求头Cookie。

1.当用户第一次访问服务器的时候，服务器肯定不知道它的身份，于是服务器首先要创建一个 key=value 格式的身份标识数据，这就需要用到 Set-Cookie，然后通过这个响应头部字段，将键值对的数据发送给浏览器。

HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: theme=light
Set-Cookie: sessionToken=abc123; Expires=Wed, 09 Jun 2020 10:18:14 GMT
...

2.当浏览器收到响应报文后，发现响应报文中有 Set-Cookie 的字段，就将其保存下来，下次请求时自动将这个值放进 Cookie 头字段中发送给服务器。

GET /spec.html HTTP/1.1
Host: www.example.org
Cookie: theme=light; sessionToken=abc123
…

3.当服务器看到请求字段中含有 Cookie 字段时，就会认出这是之前来过的浏览器，识别出身份后，可以提供个性化服务。

之前我们说过，大多数 HTTP 头字段是不可以重复的，但是 Set-Cookie 除外，它可以一次性设置多个。这样就可以存储多个 key=value 格式的数据，浏览器发送时，只用一个 Cookie 字段，但是会用;隔开。

由于 Cookie 是浏览器保存的，所以换了浏览器还得重新走一遍 Cookie 的流程。

Cookie 的属性

Cookie是服务器委托浏览器存储在客户端的一些数据，而这些数据会识别用户的关键信息，所以就需要在 key=value以外再加上一些其他属性来保护。

生命周期

Cookie 的生命周期俗称为有效期，这里可以用到两个属性：Max-Age 和 Expires。

Max-Age 是相对时间，翻译过来是最大存在时间，它的单位是秒，也就是服务器收到 Cookie 并返回后，浏览器收到响应报文的时间再加上Max-Age 时间就是 Cookie 的有效时间。

Expires 是绝对时间，翻译就是过期时限，可以理解为截止日期。

它俩的写法是这样的

Set-Cookie:Max-Age=100;Expires=Fri,07-Jun-19 08:19:00 GMT;

意思是过期时间100秒，截止时间2019年6月7日8点19分，星期五。

两者可以同时存在，浏览器优先选择 Max-Age

作用域

作用域就是让浏览器不要随便发 Cookie，要发给特定的服务器和 URI。

Set-Cookie:Domain=www.baidu.com;path=/;

这个设置就比较简单，浏览器在带 Cookie 的时候，会去比较域名Domain和路径path 部分。如果不满足条件，就不会在请求头中发送Cookie。

使用这两个属性可以分别在不同的路径发送不同的Cookie，比如/index和/users路径分别发不同的Cookie，不过一般为了省事，会在 path 部分用一个/表示根目录下都发Cookie。

安全性

在 JavaScript 中，有一个读取 Cookie 的方法document.cookie，这可能造成安全隐患，造成 XSS 攻击（跨站脚本攻击）。

这时候可以使用 HttpOnly属性告诉浏览器，不允许使用 Javascript 访问。

还有一个属性，可以防止XSRF 攻击（跨站请求伪造），它就是SameSite=Strict,它可以严格规定Cookie 不能随着跳转链接跨站发送，SameSite=Lax则宽松一点，允许 GET/HEAD 发送 Cookie，但禁止POST发送。

浏览器Cookie 的查看方法

Cookie本身不是加密的，在浏览器中可以查看得到。

通过浏览器 Network-Cookies 和 Application都可以看到 Cookie。Application 则可以看到全站所有 Cookie。

Cookie 的应用

Cookie的基本作用是身份识别，保存用户的登录信息，实现会话事务。

比如，你用账号和密码登录某电商，登录成功后网站服务器就会发给浏览器一个 Cookie，内容大概是“name=yourid”，这样就成功地把身份标签贴在了你身上。

之后你在网站里随便访问哪件商品的页面，浏览器都会自动把Cookie 发给服务器，所以服务器总会知道你的身份，一方面免去了重复登录的麻烦，另一方面也能够自动记录你的浏览记录和购物下单（在后台数据库或者也用 Cookie），实现了“状态保持”。

Cookie 的另一个常见用途是广告跟踪。

你上网的时候肯定看过很多的广告图片，这些图片背后都是广告商网站（例如 Google），

它会“偷偷地”给你贴上 Cookie 小纸条，这样你上其他的网站，别的广告就能用 Cookie读出你的身份，然后做行为分析，再推给你广告。

小结

Cookie 是服务器委托浏览器存储的一些数据，让服务器有了
“记忆能力”；

响应报文使用 Set-Cookie 字段发送“key=value”形式的 Cookie 值；

请求报文里用 Cookie 字段发送多个 Cookie 值；

为了保护 Cookie，还要给它设置有效期、作用域等属性，常用的有 Max-Age、Expires、Domain、HttpOnly 等；

Cookie 最基本的用途是身份识别，实现有状态的会话事务。

手动实现 new 关键字

new 做了哪些事

在实现 new 关键字之前我们需要了解 new 到底做了什么工作？

我们从一段简单的代码入手来看

function fn(name){
  this.name=name
}
fn.prototype.say=function (){
  alert(this.name)
}
const boy=new fn('qiuyanxi')

这段代码非常简单，它定义了一个构造函数，然后给了这个构造函数的原型一个名叫 say 的函数。

毫无疑问，当我调用 boy.say的时候会打印qiuyanxi，那么我们推断 new 做了什么？

• 首先一定会返回一个对象。
• 该对象内肯定有个 name 属性，值为 qiuyanxi。
• 既然这个对象可以调用 say 方法，说明也继承了 say 方法。

为了证明我们的猜想，我们从打印台查看一下boy 这个对象

推断正确，有一点值得我们注意，say 方法是在 boy.__poroto__上的，而这个属性有个constructor属性指向 fn，那么我们就知道这是 fn 函数的原型。

fn.prototype===boy.__proto__
// true

手写 new 功能

知道了原理，那我们可以开始动手了

1.我们需要先定义一个构造函数

function create(name){
  this.name=name
}
create.prototype.say=function (){
  alert(this.name)
}

2.创建一个 new 函数,接收构造函数为参数

function lineNew(func){
  const x=Object.create(func.prototype)  //创建一个空对象,原型连接到传入的构造函数身上
  return x //返回一个对象
}

3.既然内部需要有 name 属性，那我们就需要把 name 传进去,而且需要调用构造函数

function likeNew(func,...args){
   const x=Object.create(func.prototype)
   func.call(x,...args)
  return x
}

实验一下：

const boy=likeNew(create,'qiuyanxi')

看起来没问题。

细节

虽然功能实现了，但是有些细节问题需要处理。

比如说箭头函数是没有 原型的，所以我们可以手动帮它创建一个。

比如说会不会有些人不传函数进去呀？所以我们需要做一点 Polyfill

优化代码

function likeNew(func,...args){
  if(typeof func !=='function'){
    throw new Error('first arg is not function')
  }
  let x={}
  if(func.prototype){
    x=Object.create(func.prototype)
  }else{
    x.__proto__={constructor:func} //手动创建一个原型接上
  }
   func.call(x,...args)
  return x
}

构造函数返回对象问题

有时候面试题会问你构造函数返回一个对象，那么 new会怎么做。

我们直接实验出真知

function foo(name){
  this.name=name;
  return {age:18}
}
const boy=new foo('qiuyanxi')
boy // {age: 18}

结论：如果构造函数返回了对象，那new就返回这个对象，否则就返回new自己创建的对象。

这一点MDN 也有介绍

当代码 new Foo(...) 执行时，会发生以下事情：

1.一个继承自 Foo.prototype 的新对象被创建。
2.使用指定的参数调用构造函数 Foo，并将 this 绑定到新创建的对象。new Foo 等同于 new Foo()，也就是没有指定参数列表，Foo 不带任何参数调用的情况。
3.由构造函数返回的对象就是 new 表达式的结果。如果构造函数没有显式返回一个对象，则使用步骤1创建的对象。（一般情况下，构造函数不返回值，但是用户可以选择主动返回对象，来覆盖正常的对象创建步骤）

那么我们继续改一下代码

function likeNew(func,...args){
  if(typeof func !=='function'){
    throw new Error('first arg is not function')
  }
  let x={}
  if(func.prototype){
    x=Object.create(func.prototype)
  }else{
    x.__proto__={constructor:func} //手动创建一个原型接上
  }
  return typeof func.call(x,...args)==='object'?func.call(x,...args):x
}

一般面试不需要做 Polyfill，这里附上简单的几行代码

      function _new(initFunc, ...rest) {
        // let xx.__proto__ = initFunc.prototype
        let cache = Object.create(initFunc.prototype);
        let result = initFunc.call(cache, ...rest);
        return typeof result === "object" ? result : cache;
      }

结束~

enjoy！

Set

Set是ES6新产生的数据解构,它类似于数组，不一样的是它没有重复的值。

生成Set数据解构

Set本身是构造函数，所以我们需要用new来生成一个Set数据解构

参数生成

const set=new Set([1,2,3,4,5])
set //Set(5) {1, 2, 3, 4, 5}

传递一个数组可以生成Set数据解构，实际上并非数组可以实现，具有iterable接口的数据都可以通过这种方式生成Set数据。

原型方法生成生成

使用Set.prototype.add方法也可以生成Set数据解构

const s= new Set()
for(let v of [1,2,3,1,2,3]){
	s.add(v)
}
// Set(3) {1, 2, 3}

上面可以看到，Set并不会录重复值

iterable接口数组生成示例

function fn(){
    return new Set(arguments)
}
fn(1,2,3,4,5,6)
// Set(6) {1, 2, 3, 4, 5, 6}

const set=new Set()
document.querySelectorAll('div').forEach(div=>{set.add(div)})

去重

const a=[1,2,1,2]
const b=[...new Set(a)]

上面代码使用...展开运算符来展开Set数据解构，再用[]包起来就可以变成数组

或者也可以使用Array.from()转数组，取决于你的爱好

const a=[1,2,1,2]
const b=Array.from(new Set(a))

字符串也可以去重

const a='123412'
const b=[...new Set(a)].join('')
b // '1,2,3,4'

上面的代码用于字符串去重，因为字符串也具有iterable接口,可以当参数传递给Set构造函数

Set实例的属性

Set.prototype.constructor：默认为构造函数Set

Set.prototype.size：返回Set实例的成员总数,跟数组的length差不多

Set实例的方法

操作方法

增：Set.prototype.add(value)

删：Set.prototype.delete(value)

查：Set.prototype.has(value)

清除：Set.prototype.clear()

遍历操作方法

Set.prototype.keys()：返回键名的遍历器

Set.prototype.values()：返回键值的遍历器

Set.prototype.entries()：返回键值对的遍历器

Set.prototype.forEach()：使用回调函数遍历每个成员

由于Set数据结构的键和值是一样的，所以keys和values方法返回的结果是一致的，我们可以通过entries论证键和值是一致的这个观点

let set= new Set(['qiu','yan','xi'])
set.forEach((value,key)=>{
	console.log(`value：${value}=>key:${key}`)
})
//value：qiu=>key:qiu
//value：yan=>key:yan
//value：xi=>key:xi
for(let item of set.entries()){
	console.log(item)
}
//['qiu','qiu']
//['yan','yan']
//['xi','xi']

上面代码中，entries每次都会返回包含键值的数组。

遍历的应用

由于Set拥有iterable接口，也可以使用for of循环。

let set= new Set(['qiu','yan','xi'])
for(let x of set){
	console.log(x)
}
//qiu
//yan
//xi

配合...运算符就可以实现变相实现set的map或者filter等方法

let set=new Set([1,2,3,4,5,6])
new Set([...set].map((value,key)=>{return value*2}))
//Set(6) {2, 4, 6, 8, 10, 12}

new Set([...set].filter((value)=>{
return value>3
}))
//Set(3) {4, 5, 6}

Map

javascript中，object对象是以键值对的形式存在的，但是其键全部都是字符串，当我们希望使用hash表的时候，ES6提供的Map比对象更适合，它打破了键值对中键为字符串的限制，提供以值值对的数据结构。

生成Map数据结构

参数生成

Map也是一个构造函数，我们可以采用传入一个二元数组的方式来生成数据结构，数组内的数组会形成值值对。

let map=new Map([['name','qiuyanxi'],['age',10]])

//Map(2) {"name" => "qiuyanxi", "age" => 10}

原型方法生成

Map键的位置也可以是对象，我们采用set方法来生成Map数据结构（添加成员）

let map=new Map().set({name:'qiuyanxi'},'男')
//Map(1) {{name:'qiuyanxi'} => "男"}

实际上，在Map构造函数接收数组为参数时，实际上做的是以下操作

let array=[[name,'qiu'],[age,10]]
let map = new Map()
array.forEach(([key,value],index)=>{map.set(key,value)})
//Map(2) {"name" => "qiu", "age" => 10}

上面的代码中[key,value]实际上就是将[name,'qiu']进行解构赋值，然后对map对象进行set方法添加对应的成员。

事实上，只要持有iterable接口，且每个成员都是双元素数组结构都可以成为Map构造函数的参数。

Map原型方法

Map.prototype.size返回Map 结构的成员总数

Map.prototype.set(key, value)添加成员

Map.prototype.get(key)查成员

Map.prototype.delete(key)删除成员

Map.prototype.has(key)返回一个布尔值，表示某个键是否在当前 Map 对象之中。

Map.prototype.clear() 清除所有成员

const a = {'name':'qiu'}
const map = new Map()
map.set(a,'yanxi')
map.size //1
map.get(a) //'yanxi'
map.delete(a) //true
map.clear() 
// Map(0) {}

如果对同一个键多次赋值，则会覆盖原来的键

const map =new Map()
map.set(1,'123')
map.set(1,'456')
map.get(1) // '456'

需要注意的是，当键为对象类型时，我们读取它或者想覆盖它最好是使用引用的方式，而不是直接书写

const map=new Map()
map.set({name:"qiu"},'123')
map.set({name:"qiu"},'456')
map.get({name:"qiu"}) //undefined
map//Map(2) {{name:'qiu'} => "123", {name:'qiu'} => "456"}

上面的代码中，我使用map方法分别设置以{name:'qiu'}为对象的键名，但是实际上存在键名一致的情况，而并未出现值覆盖，并且get读取的时候读取出undefined，这是由于键的内存地址不同，Map不将其认同为一个键，所以我们要注意，在使用这种情况下，需要将键名转化为地址的引用

const map=new Map()
const n={name:"qiu"}
map.set(n,'123')
map.set(n,'456')
map.get(n) // '456'

由上可知，其实Map的键是和地址绑定的，只要内存地址不同，就被认为是两个不同的键。

如果 Map 的键是一个简单类型的值（数字、字符串、布尔值），则只要两个值严格相等，Map 将其视为一个键，比如0和-0就是一个键，布尔值true和字符串true则是两个不同的键。另外，undefined和null也是两个不同的键。虽然NaN不严格相等于自身，但 Map 将其视为同一个键。

const map=new Map()
map.set(0,'123')
map.set(-0,'456')
map //Map(1) {0 => "456"}
map.set(true,123)
map.set('true',456)
map.set(null,666)
map.set(undefined,777)
map.set(NaN,888)
map.set(NaN,999)
map //Map(6) {0 => "456", true => 123, "true" => 456, null => 666, undefined => 777, NaN => 999}

遍历方法

Map结构原生有以下方法遍历
Map.prototype.keys()返回键名的遍历器

Map.prototype.values()返回值的遍历器

Map.prototype.entries()返回所有成员的遍历器

Map.prototype.forEach()遍历所有成员
Map的遍历顺序就是插入顺序

const map=new Map([[1,'true'],[2,'false']])
for(let k of map.keys()){console.log(k)} // 1 2

for(let k of map.values()){console.log(k)} // 'true' 'false'

for(let k of map.entries()){console.log(k)} //[1, "true"][2, "false"]

map.forEach((value,key)=>{
	console.log(value+':'+key)
}) //  true:1  false:2

Map转化

转化为数组

使用扩展运算符能快速将Map转化为数组，同时由于Map没有Map方法，使用扩展运算符配合则可以使用filter方法或者map方法

const map=new Map([[1, 'one'],
  [2, 'two'],
  [3, 'three']])
 const a=new Map([...map].filter(([key,value])=>{
  	return key>2
  }))
  a //Map(1) {3 => "three"}

转化为对象

如果所有 Map 的键都是字符串，它可以无损地转为对象,如果是非字符串，则会转为字符串后再转化成对象

const map=new Map([[8, 'one'],
  [9, 'two'],
  [10, 'three']])
  const obj={}
map.forEach((value,key)=>{
    obj[key]=value
})
obj //{8: "one", 9: "two", 10: "three"}

对象转成Map

使用Object.entries()方法可以将对象转化成成员包含键名，键值的二元数组，然后再转化成Map

//接上面代码
let o =Object.entries(obj) 
// [[8, 'one'],[9, 'two'],[10, 'three']]
let map =new Map(o)

Map转成JSON

我们需要根据不同情况转成不同的JSON对象

当键名都是字符串时，可以转成对象JSON

const map=new Map()
map.set('qiu','yanxi')
map.set('height','180')
function mapToString(map){
	const obj=Object.create(null)
    map.forEach((value,key)=>{
    obj[key]=value
    })
    return obj
}
const obj=mapToString(map)
JSON.stringify(obj) //"{"qiu":"yanxi","height":"180"}"

当键名不单单是字符串时，可以转成数组JSON

const map=new Map()
map.set([1,2,3],'yanxi')
map.set(['height'],'180')
JSON.stringify([...map])
//"[[[1,2,3],"yanxi"],[["height"],"180"]]"

代码执行顺序

JS的代码会按照顺序执行，例如

var foo = function () {

    console.log('foo1');

}

foo();  // foo1

var foo = function () {

    console.log('foo2');

}

foo(); // foo2

如果把代码换成这样

function foo(){

     console.log('foo1');

}

foo() //foo2


function foo(){

    console.log('foo2')

}

foo() //foo2

全部打印foo2了，原因在于第一个代码示例中，是变量提升，也就是foo提升了。而第二个代码示例属于函数提升，也就是第二个函数foo覆盖了第一个foo。这个题目也许很多面试题中都会有，在这里不过多讨论，使用这两个例子，只是为了说明，JS的代码在运行时，JS引擎会做一些准备工作。

那么JS引擎遇到怎样的代码才会做这样的准备工作呢？

可执行代码

这就要说到 JavaScript 的可执行代码(executable code)的类型有哪些了。

可执行代码有三种，分别是全局代码、函数代码、eval代码

eval现在在规范中已经不再使用，所以不在讨论之内。

比如说：当执行到一个函数的时候，就会进行准备工作，这里的“准备工作”，让我们用个更专业一点的说法，就叫做"执行上下文(execution context)"。

函数的执行上下文栈

因为代码中函数很多，如何管理这么多的执行上下文呢？JavaScript 引擎创建了执行上下文栈（Execution context stack，ECS）来管理执行上下文。

既然叫栈，那么它的数据结构有点明朗了，它属于先进后出的数据结构，我们可以使用一个数组来模拟调用栈。

ECStack=[]

当遇到全局代码时，执行上下文栈会压入一个全局上下文，我们使用globalContext来表示

ECStack.push(globalContext)

只有当整个程序运行结束，执行上下文栈才会被清空，所以程序结束之前，在ECStack中始终有globalContext。

现在，JS引擎遇到函数代码了

function fun3() {
    console.log('fun3')
}

function fun2() {
    fun3();
}

function fun1() {
    fun2();
}

fun1();

ESCStack在fun1函数调用时会做以下事情

//每一个函数执行时都会创建一个执行上下文并被压入执行上下文栈中
//fun1执行了，创建一个context
//  压栈 
ECStack.push(<fun1 context>) //发现内部还有`fun2`调用
ECStack.push(<fun2 context>) //发现内部还有`fun3`调用
ECStack.push(<fun3 context>) //发现内部还有log函数调用
ECStack.push(<log context>) //里面没了
打印fun3 //代码执行完了，该弹栈了
ECStack.pop(<log context>)
ECStack.pop(<fun3 context>)
ECStack.pop(<fun2 context>)
ECStack.pop(<fun1 context>)

此时ECStack还剩下[globalContext]
// 继续处理其他代码
// globalContext在程序结束前一直会存在

小练习

下面我们来写一下以下代码的执行上下文栈

var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f;
}
checkscope()();

//遇到全局上下文
ECStack.push(globalContext) //此时的调用栈[globalContext]

//调用checkscope，进入checkscope的函数内
ECStack.push(<checkscope context>)  //压栈

//内部没有函数调用，返回函数f
ECStack.pop(<checkscope context>)  //弹栈

//返回的f被调用了
ECStack.push(<f context>)  //压栈
ECStack.pop(<f context>)  //弹栈

当JS代码遇到可执行代码时，会创建相应的上下文，每个上下文中有三个重要的属性：
1、变量对象

2、作用域链

3、this

我们结合以下代码谈谈具体处理过程
第一题：

var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f();
}
checkscope();

1、执行全局代码，生成全局上下文，并且压入执行栈

ECStack=[
     globalContext
]

2、全局上下文初始化

globalContext={
     VO=[global],
     this:globalContext.VO,
     Scope:[globalContext.VO]
}

3、创建函数[[scope]]属性,并将全局变量对象存入其中

checkscope.[[scope]]={
     globalContext.VO
}

4、调用函数，创建函数上下文，压栈

ECStack=[
     globalContext,
     checkscopeContext
]

5、此时函数还未执行，进入执行上下文

• 复制函数 [[scope]] 属性创建作用域链
• 用arguments属性创建活动对象
• 初始化变量对象，加入变量声明、函数声明、形参
• 活动对象压入作用域链顶端

    checkscopeContext = {
        AO: {
            arguments: {
                length: 0
            },
            scope: undefined,
            f: reference to function f(){}
        },
        Scope: [AO, globalContext.VO],
        this: undefined
    }

6、f函数被创建生成[[scope]]属性，并保存作用域链条

f.[[scope]]=[
     checkscopeContext.AO,
     globalContext.VO
]

7、f函数调用，生成f函数上下文，压栈

ECStack=[
     globalContext,
     checkscopeContext,
     fContext
] 

8、此时f函数还未执行，初始化执行上下文

• 复制函数 [[scope]] 属性创建作用域链
• 用arguments属性创建活动对象
• 初始化变量对象，加入变量声明、函数声明、形参
• 活动对象压入作用域链顶端

fContext = {
     AO: {
            arguments: {
                length: 0
            },
        },
        Scope: [fContext.AO, checkscopeContext.AO, globalContext.VO],
        this: undefined
    }

9、f 函数执行，沿着作用域链查找 scope 值，返回 scope 值

10、弹栈

// f函数弹栈
ECStack=[
     globalContext,
     checkscopeContext
]
// checkscope函数弹栈
ECStack=[
     globalContext
]
  ……

第二题

var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f;
}
checkscope()();

1、执行全局代码，创建全局上下文，压栈

ECStack=[
     globalContext,
]

2、初始化全局上下文

globalContext={
     VO:[global],
     Scope:[globalContext.VO]
     this:globalContext.VO
}

3、checkscope函数生成内部[[scope]]属性,并存入全局上下文变量对象

checkscope.[[scope]]=[
     globalContext.VO
]

4、调用checkscope函数，创建函数上下文，压栈

ECStack=[
     globalContext,
     checkscopeContext
]

5、checkscope函数还未执行，上下文初始化

• 复制函数的[[scope]]属性创建作用域链
• 用arguments创建活动对象
• 初始化活动对象，加入形参、函数声明、变量声明
• 将活动对象压入checkscope的作用域链

    checkscopeContext = {
        AO: {
            arguments: {
                length: 0
            },
            scope: undefined,
            f: reference to function f(){}
        },
        Scope: [AO, globalContext.VO],
        this: undefined
    }

6、checkscope函数执行阶段，赋值

    checkscopeContext = {
        AO: {
            arguments: {
                length: 0
            },
            scope: "local scope",
            f: reference to function f(){}
        },
        Scope: [AO, globalContext.VO],
        this: undefined
    }

7、遇到到f函数，内部[[scope]]属性产生，并放入父变量对象

f.[[scope]]=[checkscopeContext.AO,globalContext.VO]

8、返回函数f，此时checkscope函数执行完成，弹栈

ECStack=[
     globalContext
]

9、执行f函数，创建f函数上下文，压栈

ECStack=[
     globalContext,
     fContext
]

10、初始化f函数的上下文

• 复制函数的[[scope]]属性创建作用域链
• 用arguments创建活动对象
• 初始化活动对象，加入形参、函数声明、变量声明
• 将活动对象压入f函数的作用域链

fContext={
     AO:{
          arguments:{
               length:0
      }
   },
     Scope:[AO,checkscopeContext.AO,globalContext.VO]
     this:undefined
}

11、checkscope函数执行阶段，赋值

12、找到scope变量，返回，此时f函数执行完毕，弹栈

ECStack=[
     globalContext,
]

传输大文件的方法

数据压缩

在上面我们已经讲过 HTTP 传输数据时，有一个字段是 Accept-Encoding，它代表客户端支持的数据压缩的格式，这样服务器就可以选择其中一种，放到 Content-Encoding 中，再把原来的数据压缩后发送给浏览器。

如果压缩率有50%,那么原来100k 的数据就可以压缩成50k 大小，极大地提升传输效率。

这种压缩方式非常适合文本如（text/html）的压缩，不过并不适合传输图片、音频视频等数据，因为它们本身已经高度压缩了。

分块运输

除了数据压缩之外，还可以把大文件整体变小，分解成很多个小块，这样就可以把小块分发给浏览器，浏览器收到后复原。

这种方式有个好处，每次只收发一小部分，网络不会被大文件长时间占用，可以节省带宽资源。

这种方法在 HTTP 中叫 chunked 分块传输,在响应报文里用头字段 Transfer-Encoding:chunked 来表示。意思是报文的 body 可以分成多次发送。

分块传输可以用于流式数据，例如数据库动态生成的表单页面，这种情况下 body 数据的长度是未知的，无法在头字段 Content-Length 里给出确切的长度，所以也只能用 chunked 方式分块发送。

“Transfer-Encoding: chunked”和“Content Length”这两个字段是互斥的，也就是说响应报文里这两个字段不能同时出现，一个响应报文的传输要么是长度已知，要么是长度未知（chunked）。

范围请求

分块传输就是把大文件分成很多个小块，那么假设我希望获取大文件中特定的片段数据，显然没办法用分块传输做到。

HTTP 协议中，还有一种范围请求可（range requests）的概念，允许客户端在请求头里面使用专用字段来表示只获取文件的一部分。

在做范围请求前，需要 Web 服务器在响应头上使用字段 Accept-Ranges:bytes,明确告知客户端支持范围请求。不支持则可以不传这个字段或者设置为 none

请求头 Range 是 http 范围请求的专用字段，格式是 bytes=x-y，其中 x和 y 是以字节为单位的数据范围。

需要注意 x、y 表示的是偏移量，范围从0计算，比如前10个字节表示为0-9.

其中 x 和 y 是可以省略的，0-表示文档起点到终点，-1表示文档最后一个字节，-10表示从文档末尾倒数10个字节。

服务器收到 Range 字段后，需要做四件事

• 检查范围是否合法。不合法可以返回416编码。

• 范围正确，服务器需要根据 Range 头计算偏移量，读取文件的片段，返回206 Partial Content,表示 body 只是数据的一部分

• 服务器需要加上响应头 Content-Range，告诉片段的实际偏移量和资源的总大小，格式则是bytes x-y/length,和请求头的 Range 字段区别是没有=号且范围后多了总长度。

• 最后发送数据了

范围请求的常见应用是视频的拖拽进度和多段下载、断点续传等。

多段数据

范围请求还支持一次获取多个片段数据，可以在 Range 中使用多个x-y。

这种情况需要一种特殊的 MIME 类型：multipart/byteranges,表示报文的 body 是由多段字节序列组成的，并且还要给一个参数 boundary=xxx给出段之间的分割标记。

小结

压缩 HTML 等文件是传输大文件的基本方法

分块传输可以流式收发数据，节省内存和带宽。使用响应头 Transfer-Encoding:chunked

范围请求可以只获取部分数据。主要应用于断点续传和视频拖拽等。使用请求头字段 Range 和响应头字段 Content-Range。相关响应状态码416和206

也可以一次性请求多个范围，此时响应报文的Content-type 是multipart/byteranges,body 部分多个部分会用 boundary 字符串分隔。

前言

JavaScript是没有类这个概念的，区别于其他传统的强类型语言，例如Java，JS的类（构造函数）在设计根本上就有本质的不同，Java的类是代码的拷贝，而JS则用了原型链继承而已，所谓的构造函数只不过就是个普通函数，（只是大家习惯在使用时大写，这事也就成了规范）。

ES6的class本质上是构造函数的语法糖，只是这个语法糖写得更像是Java，为了做区分，我将在这篇博客上专门对比class和es5构造函数的不同写法

设置实例对象自身属性

构造函数写法

通过构造函数，我们能更了解JS的原型链设计原理，下面是构造函数的基本用法

function Person(name,age){
   this.name=name
   this.age=age
}
const p=new Person('jack',23)

class写法

class Person{
   constructor(name,age){
      this.name=name
      this.age=age
   }
}
const p=new Person('jack',23)

设置实例对象的共有方法

构造函数写法

Person.prototype={
   constructor:Person,
   fn1(){},
   fn2(){}
}

class写法

class Person{
   constructor(name,age){
   ...
   };
   fn1(){};
   fn2(){};
}

设置实例对象的自有方法

构造函数写法

function Person(name,age){
...
   this.saiHi=function(){console.log(this.name)}
}

class写法

class Person{
    name='';
    age='';
   constructor(name,age){
      ...
   };
   fn1(){};//prototype上的
   fn2(){};
   sayHi=function(){console.log(this.name)} //自有的
}