2 - JS 面试题

1 什么是作用域

1 理解: 
  1 就是一块独立的区域空间
  2 一个作用域内的代码和变量, 对该作用域外部的环境, 毫无影响

2 存在作用域的地方: js文件, script标签, 函数内部, ES6的大括号

3 关于作用域的生命周期: 
  1 全局作用域: 进入页面创建, 关闭页面销毁
  2 局部作用域: 函数执行的时候创建, 执行完毕销毁

4 作用域链: 
  1 内部作用域可以访问外部作用域, 且遵守就近原则
  2 作用域 a内部创建作用域b, b可以访问a中的变量, a不可访问b中的变量
  3 如上关系, 层层嵌套的作用域, 就被称之为作用域链

2 this指向的方法有哪些？它们有什么区别

1 bind 方法: 
  1 用于函数表达式的后面, 参数为想要指向的对象
  2 只改变 this指向, 并不会调用函数
  
2 call 方法: 
  1 用于函数表达式的后面, 参数为想要指向的对象, 或方法调用传递的实参
  2 改变this指向的同时, 且会执行函数
  
3 apply 方法: 
  1 用于函数表达式的后面, 参数为想要指向的对象, 或方法调用传递的实参 (注意参数为一个数组)
  2 改变this指向的同时, 且会执行函数

4 注意事项: 声明式命名函数, 调用改变 this指向的相关方法, 是通过函数名, 才可以调用的

5 他们之间的区别: 
  1 bind 和 其他俩个方法的区别: 只会改变 this 指向, 不能调用函数, 以及传参
  2 call 和 apply 的区别: apply 的实参是以数组的形式传递的

3 什么是闭包, 闭包的应用

1 产生原因: 
  1 俩个相互嵌套的函数, 内部函数作用域访问了外部函数作用域中的变量
  2 当内部函数被 return到外部, 声明变量接收且执行的时候
  3 这个函数会在执行体处访问它所在环境的外部函数的变量
  4 这个访问的过程, 或者被访问的函数, 就叫做闭包

2 作用: 
  1 延申了变量的作用范围
  2 实现封装, 属性私有化 (防止污染全局变量)

3 危害: 
  1 正常情况那个外部函数在不执行的时候, 内部变量是销毁状态的, 
  2 闭包会导致原有作用域链不释放, 变量未被销毁, 造成内存泄漏  (即使内存占用过多) 

4 闭包的应用: 
  1 React 中的高阶函数 (执行函数返回值是另外一个函数)

4 什么是原型, 什么是原型链

1 原型: 就是指开发中的俩个原型对象
----------------------------------------------------------------------------------------
  1 函数对象都有 prototype 原型属性, 它是 JS语言中定义的原型对象
  2 所有对象都有 __proto__ 原型属性, 它是主流浏览器自带的 (并不是用来给开发者操作的)
----------------------------------------------------------------------------------------

2 原型链: 
----------------------------------------------------------------------------------------
1 描述: 就是多个原型之间的特殊的访问关系

2 原型之间的关系: 
  1 作用描述: 一个对象可以访问它原型链上的所有方法
  2 访问关系: 普通对象的 __proto__ 指向, 该对象构造器的 prototype

  3 原型链的末端: 
    1 Object 是跟构造器
    2 Object.prototype 就是原型链的末端  (该原型对象没有 __proto__ 了, 为 null)

3 简单描述一个原型链: 
  1 例如创建了一个字符串: let str = '我好累阿'
  2 str.__proto__ == String.prototype   // str 的构造器是 String
  3 String.prototype.__proto__ == Object.prototype  // 
----------------------------------------------------------------------------------------

5 熟悉面向对象吗? 能聊聊 JS 中的继承吗

1 面向对象  //面向对象是一种开发思想
----------------------------------------------------------------------------------------
2 它的核心概念: 类和对象 
  1 类的描述: 类是一组相关属性和行为的集合, 可以看成某一类事物的模板; 是具体对象的抽象概念的集合
  2 对象描述: 是某一大类的一个具体的对象, 是带有自身属性和方法的集合, 对象是类的具体某一个

3 面向对象的特点: 
  1 封装: 
  2 继承: 
  3 多态: 

4 面向对象和面向过程的区别: 
  1 面向对象: 
    1 把事物分解为一个个对象, 分析每个对象所需要属性和功能, 然后创建该类对象的类
    2 我们可以封装很多不同的类来实例化很多不同的对象  //达到按需生产对象, 快速开发的目的
    3 分析这些不同对象作用, 然后分工合作, 实现复杂的行为或功能
    4 优点是: 开发效率高, 可维护性高, 灵活可复用, 适合开发较大的项目
    
  2 面向过程: 
    1 分析出解决问题的步骤 --> 然后使用函数一步一步实现这些步骤
    2 性能比面向对象好, 适合于跟硬件联系很紧密的情况

5 用到的场景: 模块化开发 + 封装插件
----------------------------------------------------------------------------------------

2 JS 中的继承  //有俩种常用的继承方式
----------------------------------------------------------------------------------------
1 混合继承: //原生
  1 
  2 
  3 
  
2 class类继承: //ES6 的class类
  1 
  2 
  3 
----------------------------------------------------------------------------------------

6 什么是浏览器事件循环机制(轮训机制) 以及任务列队中的 宏任务\微任务？

1 JS引擎会从上到下依次执行所有代码

2 事件循环
-----------------------------------------------------------------------------------
  1 先执行执栈中的同步任务 -> 把遇到的异步任务交给异步处理进程 -> 然后由异步处理进程决定放入任务队列的时间
  2 等执行栈中的同步任务执行完毕 -> 再依次读取任务列队中等待的异步任务 -> 放入执行栈中开始执行
  3 主线程 -> 执行栈 -> 不断重复获取任务列队的任务并执行, 这种循环的机制被称为 --> 事件循环 (或轮训机制)
-----------------------------------------------------------------------------------

3 知识点: 
  1 对于定时器, 只有等待时间过了, 才会被异步进程写到任务列队里面
  2 对于事件, 只有触发了, 才会被异步进程写到任务列队里面
  3 在事件列队中会优先执行微任务区的微任务, 然后执行宏任务, 
  4 ajax只要请求到数据就放在第一位执行  (ajax不是微任务, 也不是宏任务)  //特殊
  5 常见宏任务: 定时器
  6 常见微任务: Promise.

7 谈谈 Promise

1 简单描述: 
  1 Promise 是ES6对异步编程的一种解决方案
  2 Promise 是一个构造函数, 用来创建一个Promise对象的
  3 Promise 简单说就是一个容器, 里面保存着一个尚未完成且预计在未来完成的异步操作

  4 Promise对象代表一个异步操作
	pending（进行中）
	fulfilled（成功） [房饭熬的]
	rejected（失败）

  5 Promise 对象的状态改变有两种  //一旦状态改变，就不会再变，任何时候都可以得到这个结果
	1 从 pending 变为 fulfilled
	2 从 pending 变为 rejected

  6 有了Promise对象, 就可以将异步操作以同步操作的流程表达出来, 可解决回调地狱  //就是层层嵌套的回调函数

2 async 和 await: [爱晒你嗯可] / [əˈweɪt] 
---------------------------------------------------------------------------------
1 简单描述: async + await 的函数中,
  1 async 用来表示函数里有异步操作
  2 await 表示紧跟在后面的表达式需要等待结果
  3 async 函数返回一个 Promise 对象, 可以使用then方法添加回调函数
  4 async 函数内部 return语句返回的值, 会成为then方法回调函数的参数
  5 async 有多种使用方式
---------------------------------------------------------------------------------

8 谈谈 ES6

1 用到的字面量对象增强写法, 比较好用
2 定义变量的 let 和 const 也比较规范
------------------------------------------------------------------------------------------
1 定义
  1 let name = "zxc"     定义变量
  2 const name = "CAN"     定义常量
  
2 let 特点
  1 在一个作用域下不能声明相同的变量名      错误示例: {
    
    let a = 2;  let a = 3}
  2 可识别块级作用域      所以不能在外部访问 --> 错误示例: {
    
    let a = 2;}  console.log(a)
  3 变量的声明不被提升
  4 let声明的变量不会添加到 window对象下
  
3 const 基于 let增加的特点
  1 声明的同时必须赋值
  2 赋值后它值的地址不能改变
  3 通常命名大写
  4 在ES6开发中, 优先使用const, 如果需要改变某个标识符的时候就使用 let  (会让代码尽可能的规范)
------------------------------------------------------------------------------------------

3 模板字符串也极大的方便了, 我们在 JS 中灵活的操作字符串
4 ... 运算符, 以及结合 解构赋值, 也极大地方便了我们的一些操作
5 箭头函数的使用也极大的方便了我们的操作
6 还有 class 类, 基于原型继承的, 语法糖

9 Cookie 和 localStorage 的区别

1 cookie 简单描述: 是由web服务器存储在用户电脑硬盘上的一个小的文本文件

2 localStorage 简单描述: 在本地存储一些数据, 需要的时候就可以去拿了
-----------------------------------------------------------------------------------------
localStorage 如何设置有效期: 
  1 在存储数据的时候, 会加一条, 希望删除此缓存时间的, 时间戳进去, 
  2 然后每次打开页面, 用到该存储的时候, 都会先判断一下设置的时间戳跟当前的时间戳大小
  3 从而判断是否删除当前的, localStorage 数据
-----------------------------------------------------------------------------------------

3 cookie 和 localStorage 的相同点: 
-----------------------------------------------------------------------------------------
1 说明: 
  1 跨页面, 同域名, 共享数据
  2 都是用于存储一些用户信息的
-----------------------------------------------------------------------------------------

4 cookie 和 localStorage 的不同:
-----------------------------------------------------------------------------------------
1 cookie 可存储空间小 4K左右 -- localStorage 存储空间大 20M左右
2 cookie 没有方便操作的 API -- localStorage 有
3 cookie 存储的数据是有有效期的 -- localStorage 永久保存
4 cookie 适合存储小而敏感的数据 (浏览器对该文件有响应的保护) -- localStorage 很容易被别人获取到
5 cookie 在每次发起 http 请求的时候, 都会跟着发送给服务器 (增加了数据流量) -- localStorage 不会
-----------------------------------------------------------------------------------------

10 事件机制 (事件委托) – 事件流

1 事件发生时会在元素节点之间按照特定的顺序传播 -- 分为冒泡和捕获

2 冒泡: 开始由最具体的元素触发, 然后逐级向上传播到 document的最顶层节点

3 绑定事件在祖先元素上, 子元素可以通过冒泡触发这个事件, 来代替直接给子元素绑定事件的情况

4 默认不存在冒泡的事件: blur  focus   mouseenter   mouseleave

11 怎么解决跨域问题的

1 描述: 
-------------------------------------------------------------------------------------------
  1 概念: 当前网站去访问其他网站的数据, 的这种行为  (俩个域名之间的联系)
  2 目的: 是浏览器的安全机制, 禁止 Ajax从一个域名请求另外一个域名上的数据 (保护隐私信息)
  3 产生: 不同源的请求就是跨域 (同源: 是相同的 -> 协议、域名、端口)
-------------------------------------------------------------------------------------------

2 跨域解决方案: //在某些情况下, 是需要跨域去请求一些数据的
-------------------------------------------------------------------------------------------
  1 jsonp: 利用 script 等标签的跨域能力, 去请求数据资源  //需要前端自己去请求
  2 服务端代理: 后端去请求其它域名下的数据, 给自己的前端去使用  //正常请求自己的后端数据即可
  3 CORS 跨域资源共享: 需要浏览器, 和数据站点, 全部支持的情况 (W3C 标准)  //取消了俩者的跨域跨域限制
-------------------------------------------------------------------------------------------

12 GET请求 和 POST请求的区别

1 本质上 GET和POST, 都是HTTP协议中的两种发送请求的方法 

2 但是有序各种限制和规定, 使的俩者在使用上有了很多不一样的地方  (如下)
  1 GET请求可以传送的数据量小 (因为会受到 url 的长度限制) -- POST 则不受限制
  2 GET在浏览器回退时是无害的, 而POST会再次提交请求
  3 GET请求只能进行url编码, 而POST支持多种编码方式  //等等很多

3 总结: 如果请求很简短用GET, 如果请求数据比较多就用 POST

13 响应状态码

2开头 -- 表示成功
    200 -- 表示服务器已成功处理了请求
    202 -- 表示服务器已接受请求 -- 但未处理

3开头 -- 请求被重定向，要完成请求，需要进一步操作
	300 – 针对请求，服务器可执行多种操作；
	301 – 请求的网页已永久的移动到新的位置，服务器返回此响应时，会自动将请求转到新位置；
	302 – 临时移动；
	304 – 未修改；

4开头 -- 表示请求错误
    400 – 语法错误，服务器无法处理；
	401 – 未授权，请求要求身份验证；
	403 – 服务器拒绝请求；
	404 – 服务器找不到请求的网页；
	405 – 禁用请求中的方法

5开头 -- 表示服务器错误，服务器在尝试处理请求时，发生内部错误
	500 – 服务器遇到错误，无法完成请求；
	501 – 服务器不具备完成请求的功能；
	502 – 服务器作为网关或代理，从上游服务器收到无效响应；
	503 – 服务器目前无法使用；
	504 – 服务器作为网关或代理，没有及时从上游服务器接收到请求；
	505 – 服务器不支持请求中的HTTP协议版本；

14 移动端适配方案 (要了解怎么实现的说的上来)

1 配置代码  //老陶的移动端适配, JS配置文件
--------------------------------------------------------------------
// 移动端适配方案: 以750px设计稿为基准, 1rem = 100px, eg: 50px -> 0.5rem
;(function (document, window) {
    
     
  let designWidth = 750;  // 设计稿的宽度 -- 根据设计稿进行调整
  let deviceWidth = document.documentElement.clientWidth;  // 设备宽度 / 可视区宽度
  document.documentElement.style.fontSize = deviceWidth / designWidth * 100 + 'px'; //得到根元素字体大小
  
  window.onresize = function () {
    
      //当窗口发生变化的时候, 重置根元素字体大小
    document.documentElement.style.fontSize = deviceWidth / designWidth * 100 + 'px';
  }
})(document, window)

15 关于移动端的一些解决方案

1 移动端开发的方案选择
----------------------------------------------------------------------------------------------
  1 单独制作移动端页面 
    1 简单流式布局  //就是百分比布局
    2 rem 配合媒体查询
    3 通过 JS 配置文件实现移动端适配
    
  2 响应式PC端页面 
    1 媒体查询
----------------------------------------------------------------------------------------------

16 说说你对文档碎片的理解

1 轻量级节点, 虚拟的节点对象, 常作为仓库使用, 不存在于 DOM 树上
2 将多个需要插入的新节点放在文档碎片上, 再插入文档中可以优化 DOM 操作
3 否则大量操作 DOM 会降低效率

17 浏览器的垃圾回收机制

1 当我们打开一个页面时候, 我们的变量会开辟空间, 放在内存中
2 关闭页面的时候, 销毁变量, (不关闭一直存在)
3 函数内的变量, 用完就销毁, 全局的会一直存在, 所以我们推荐少使用全局变量

18 构造函数

1 用于创建特定类型的对象
2