知识点11.作用域是定义变量的区域。词法作用域（静态作用域）：作用域在函数定义时就决定了。动态作用域：作用域在函数调

1.作用域是定义变量的区域。

词法作用域（静态作用域）：作用域在函数定义时就决定了。动态作用域：作用域在函数调用时决定。 eval和with 缺点：导致性能下降这样由多个执行上下文的变量对象构成的链表就叫做作用域链

2.闭包：能够访问自由变量的函数。

自由变量：既不是闭包函数的参数也不是局部作用域的变量。

3.原型链：由相互关联的原型构成的链状结构。

作用域链：由多个执行上下文的变量对象构成的链表。

4.tcp建立连接三次握手：刚开始客户端处于 closed 的状态，服务端处于 listen 状态。

第一次握手：客户端给服务端发一个 SYN 报文，并指明客户端的初始化序列号 SN(c)。此时客户端处于 SYN_Send 状态。第二次握手：服务器收到客户端的 SYN 报文之后，会以自己的 SYN 报文作为应答，并且也是指定了自己的初始化序列号 ISN(s)，同时会把客户端的 ISN + 1 作为 ACK 的值，表示自己已经收到了客户端的 SYN，此时服务器处于 SYN_REVD 的状态。第三次握手：客户端收到 SYN 报文之后，会发送一个 ACK 报文，当然，也是一样把服务器的 ISN + 1 作为 ACK 的值，表示已经收到了服务端的 SYN 报文，此时客户端处于 establised 状态。服务器收到 ACK 报文之后，也处于 establised（稳定的）状态，此时，双方以建立起了链接。

5.tcp断开连接四次挥手刚开始双方都处于 establised 状态，假如是客户端先发起关闭请求，则：

第一次挥手：客户端发送一个 FIN 报文，报文中会指定一个序列号。此时客户端处于FIN_WAIT1状态。第二次握手：服务端收到 FIN 之后，会发送 ACK 报文，且把客户端的序列号值 + 1 作为 ACK 报文的序列号值，表明已经收到客户端的报文了，此时服务端处于 CLOSE_WAIT状态。第三次挥手：如果服务端也想断开连接了，和客户端的第一次挥手一样，发给 FIN 报文，且指定一个序列号。此时服务端处于 LAST_ACK 的状态。第四次挥手：客户端收到 FIN 之后，一样发送一个 ACK 报文作为应答，且把服务端的序列号值 + 1 作为自己 ACK 报文的序列号值，此时客户端处于 TIME_WAIT 状态。需要过一阵子以确保服务端收到自己的 ACK 报文之后才会进入 CLOSED 状态服务端收到 ACK 报文之后，就处于关闭连接了，处于 CLOSED 状态。这里特别需要主要的就是TIME_WAIT这个状态了，这个是面试的高频考点，就是要理解，为什么客户端发送 ACK 之后不直接关闭，而是要等一阵子才关闭。这其中的原因就是，要确保服务器是否已经收到了我们的 ACK 报文，如果没有收到的话，服务器会重新发 FIN 报文给客户端，客户端再次收到 ACK 报文之后，就知道之前的 ACK 报文丢失了，然后再次发送 ACK 报文。至于 TIME_WAIT 持续的时间至少是一个报文的来回时间。一般会设置一个计时，如果过了这个计时没有再次收到 FIN 报文，则代表对方成功就是 ACK 报文，此时处于 CLOSED 状态。这里我给出每个状态所包含的含义，有兴趣的可以看看。 LISTEN - 侦听来自远方TCP端口的连接请求； SYN-SENT -在发送连接请求后等待匹配的连接请求； SYN-RECEIVED - 在收到和发送一个连接请求后等待对连接请求的确认； ESTABLISHED- 代表一个打开的连接，数据可以传送给用户； FIN-WAIT-1 - 等待远程TCP的连接中断请求，或先前的连接中断请求的确认； FIN-WAIT-2 - 从远程TCP等待连接中断请求； CLOSE-WAIT - 等待从本地用户发来的连接中断请求； CLOSING -等待远程TCP对连接中断的确认； LAST-ACK - 等待原来发向远程TCP的连接中断请求的确认； TIME-WAIT -等待足够的时间以确保远程TCP接收到连接中断请求的确认； CLOSED - 没有任何连接状态；

6.事件循环

首先我们需要知道js是单线程的，是基于事件循环。

在主线程执行同步任务的时候，会形成一个执行栈；
当主线程执行完执行栈中的同步任务，会先去执行微任务队列，执行过程中遇到微任务，直接放在队列的最后，直到执行完当前的微任务；
然后主线程去执行宏任务队列中的一个事件（如果最先来的事件还没返回结果，那就去看第二先来的事件是否准备就绪，如果准备就绪就先执行它，否则继续向下找）；在处理宏任务的过程中遇到微任务，会放入微任务队列中，
当该宏任务处理完成之后，会再去执行微任务队列中的事件，执行完成之后才会去宏任务队列中执行，这样就形成了EventLoop，重复这样的过程直到执行完所有的任务。

7.//模拟call方法

obj = obj ? Object(obj) : window; var args = []; // 注意i从1开始 
for (var i = 1, len = arguments.length; i < len; i++) { args.push("arguments[" + i + "]"); }; obj.fn = this; // 此时this就是函数
fn eval("obj.fn(" + args + ")"); // 执行
fn delete obj.fn; //删除
fn }; fn.call_(obj, "我的", "名字", "是"); // 我的名字是听风是风

8.执行上下文：代码执行前的准备工作（变量对象、作用域链、this）。执行上下文栈管理执行上下文

9.简单实现promise

            // Promise resolve时的回调函数集
            this.cbs = [];

            // 传递给Promise处理函数的resolve
            // 这里直接往实例上挂个data
            // 然后把onResolvedCallback数组里的函数依次执行一遍就可以
            const resolve = (value) => {
                // 注意promise的then函数需要异步执行
                setTimeout(() => {
                    this.data = value;
                    this.cbs.forEach((cb) => cb(value));
                });
            }

            // 执行用户传入的函数 
            // 并且把resolve方法交给用户执行
            fn(resolve);
        }
        Promise.prototype.then = function (onResolved) {
            // 这里叫做promise2
            return new Promise((resolve) => {
                this.cbs.push(() => {
                    const res = onResolved(this.data);
                    if (res instanceof Promise) {
                        // resolve的权力被交给了user promise
                        res.then(resolve);
                    } else {
                        // 如果是普通值 就直接resolve
                        // 依次执行cbs里的函数 并且把值传递给cbs
                        resolve(res);
                    }
                });
            });
        };
        new Promise((resolve) => {
            setTimeout(() => {
                resolve(1);
            }, 500);
        }).then((res) => {
            console.log(res);
            return new Promise((resolve) => {
                setTimeout(() => {
                    resolve(2);
                }, 500);
            });
        }).then(() => {
        });

10.### axios是什么？

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

11.axios有什么特性？（不得不说面试被问到几次）

1.从浏览器中创建 XMLHttpRequests
2.从 node.js 创建 http 请求
3.支持 Promise API
4.拦截请求和响应
5.转换请求数据和响应数据
6.取消请求
7.自动转换 JSON 数据
8.客户端支持防御 XSRF

实际上，axios可以用在浏览器和 node.js 中是因为，它会自动判断当前环境是什么，如果是浏览器，就会基于XMLHttpRequests实现axios。如果是node.js环境，就会基于node内置核心模块http实现axios

简单来说，axios的基本原理就是

1.axios还是属于 XMLHttpRequest，因此需要实现一个ajax。或者基于http 。

2.还需要一个promise对象来对结果进行处理。

12.垃圾回收方式（developer.mozilla.org/zh-CN/docs/…

1.引用计数（无法解决循环引用） 2.标记清除（可以解决循环引用）

13.Vue数据双向绑定（www.cnblogs.com/libin-1/p/6…

14.defer和async区别

async和defer的最主要的区别就是async是异步下载并立即执行，然后文档继续解析，defer是异步加载后解析文档，然后再执行脚本

15.new

function newMethod (fn, ...p) {
        // 1.创建一个临时对象
        let o = {};
        // 2.将临时对象的原型链指向构造函数的原型链(原型链继承)
        o.__proto__ = fn.prototype;
        // 3.执行构造函数，将this绑定到临时对象上，并且拿到构造函数返回值（借用构造函数继承）
        let res = fn.apply(o, p);
        // 判断构造函数返回值类型，决定new构造出来的实例对象的值
	    return res instanceof Object ? res : o
    }

16.回调函数、Promise、async/await、 Generator（异步编程解决方案）

参考链接：blog.csdn.net/lunahaijiao…

17.vue2源码分析

源码地址：git clone github.com/vuejs/vue.g… 参考链接：blog.csdn.net/dclnet/arti…

18# V8中的隐藏类（Hidden Classes）和内联缓存（Inline Caching）

第一，V8会为每个对象关联一个隐藏类，第二，隐藏类的目的是优化属性的访问速度。

优化相关建议

保证以相同的顺序实例化对象属性，这样可以保证它们共享相同的隐藏类。
在对象实例化后向对象添加属性将会迫使隐藏类改变，这将会使也已经进行行内缓存的方法的访问速度变慢。所以，请尽量保证，在构造器内进行所有的属性声明。
不停执行相同方法的代码会比总在执行不同方法的代码速度快。参考链接：segmentfault.com/a/119000003…

19 vue2与vue3 diff算法

vue2、vue3 的 diff 算法实现差异主要体现在：处理完首尾节点后，对剩余节点的处理方式。
vue2 是通过对旧节点列表建立一个 { key, oldVnode }的映射表，然后遍历新节点列表的剩余节点，根据newVnode.key在旧映射表中寻找可复用的节点，然后打补丁并且移动到正确的位置。
vue3 则是建立一个存储新节点数组中的剩余节点在旧节点数组上的索引的映射关系数组，建立完成这个数组后也即找到了可复用的节点，然后通过这个数组计算得到最长递增子序列，这个序列中的节点保持不动，然后将新节点数组中的剩余节点移动到正确的位置。

知识点1