【前端开发】Javascript中重难知识点、常见问题集合 (原型与原型链、事件委托、闭包、节流防抖、异步编程、深浅拷贝等）

闭包

• 闭包就是能够读取其他函数内部变量的函数，即指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量，利用闭包可以突破作用链域。
• 闭包特性：
  • 函数内再嵌套函数；
  • 内部函数可以引用外层的参数和变量；
  • 参数和变量不会被垃圾回收机制回收；
• 闭包的优缺点：
  • 优点：能够实现封装和缓存等；
  • 缺点：消耗内存，使用不当会内存溢出；
  • 内存溢出解决方法：在退出函数之前，将不使用的局部变量全部删除。

变量对象

• 变量对象，是执行上下文中的一部分，可以抽象为一种数据作用域，液可以理解为就是一个简单的对象，它存储着该执行上下文中的所有变量和函数生命，其中不包含表达式；
• 活动对象(AO)：当变量·对象所处的上下文为active EC 时，则称之为活动对象；

作用域

• 作用域，可以简单理解为该上下文中声明的变量和声明的作用范围，可分为块级作用域和函数作用域，执行上下文中还包含作用域链。
• 作用域链
  • 作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的；
  • 简单来说，作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。

原型与原型链

• 每个对象都会在其内部初始化一个属性，就是prototype（原型），当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去prototype里找这个属性，这个 prototype又会有自己的prototype，于是就这样一直找下去，这也就是js中经常提及的原型链的概念；
• 它们之间的关系：instance.constructor.prototype = instance._*proto*_
• 特点： javascript对象是通过引用来传递的，我们创建的每个新对象实体中并未有一份属于自己的原型副本，当我们修改原型时，与之相关的对象也会继承这一改变，当我们需要一个属性的时候，javascript引擎会先看当前对象中是否有这个属性，如果没有就会查找它的Prototype对象是否有这个属性，如此地推下去，一直检索到Object内建对象。

事件委托

• 事件代理（Event Delegation），又称之为事件委托，是javascript中常用的绑定事件的常用技巧，顾名思义，“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务，事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能；
• 可以大量节省内存占用，减少事件注册，比如在table上代理所有的td的click事件就非常棒；
• 可以实现当新增子对象时无需再次对其进行绑定。

实现继承的方法

• 构造继承
• 原型继承
• 实例继承
• 拷贝继承
• 原型 prototype 机制或 apply 和call 方法去实现较简单，建议使用构造函数与原型混合方式

function Parent(){
  this.name = 'lili';
}

function Child(){
  this.age =  12;
}

Child.prototype = new Parent(); //继承了Parent，通过原型
var demo = new Child();
alert(demo.age);
alert(demo.name);//得到被继承的属性

This 对象的理解

• this 总是指向函数的直接调用者（而非间接调用者）
• 如果有 new 关键字， this 指向 new 出来的那个对象
• 在事件中， this 指向触发这个事件的对象，特殊的是，IE 中的attachEvent中的this 总是指向全局对象Window

事件模型

W3C 中定义事件的发生经历三个阶段：捕获阶段（ capturing ）、目标阶段 （ targetin ）、冒泡阶段（ bubbling ）

• 冒泡型事件：当你使用事件冒泡时，子级元素先触发，父级元素后触发
• 捕获型事件：当你使用事件捕获时，父级元素先触发，子级元素后触发
• DOM 事件流：同时支持两种事件模型：捕获型事件和冒泡型事件
• 阻止冒泡：在 W3c 中，使用 stopPropagation()方法；在IE下设置cancelBubble =true
• 阻止捕获：阻止事件的默认行为，例如 click - a 后的跳转。在 W3c 中，使用preventDefault()方法，在 IE 下设置window.event.returnValue = false

new 操作符操作过程

• 创建一个空对象，并且this变量引用该对象，同时还继承了该函数的原型
• 属性和方法被加入到this引用的对象中；
• 新创建的对象由this所引用，并且最后隐式的返回this；

js基本数据类型

• Undefined
• Null
• Boolean
• Number
• String
• Bigint
• Symbol

null与undefined的区别

• undefined：表示不存在这个值;表示没有初始化的变量
• null： 表示一个一个对象被定义了，值为"空”；是一个空对象，没有任何属性和方法；
• 作为参数的时候，表示该函数的参数不是对象；

异步编程的实现方式

• 回调函数
• 事件监听
• 发布/订阅（观察者模式）
• Promise对象
• Generator 函数
• async函数

原生js

数据类型、运算、对象、Function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Ajax、DOM、内存泄漏、跨域、异步装载、模板引擎、前端MVC、路由、模块化、ECMAScript等；

数组去重操作

• ES6 Set
• for 循环 indexOf
• for 循环 inCludes
• sort

js 原生拖拽节点

给需要拖拽的节点绑定mousedown、mousemove、mouseup 事件（需要注意浏览器边界值，设置拖拽范围）

• mousedown时， 事件触发，开始拖拽；
• mousemove 时，需要通过 event.clientX和 clientY获取拖拽位置，并实时更新位置；
• mouseup 时，拖拽结束；

深拷贝、浅拷贝

• 深拷贝： JSON.parse(JSON.stringity(object)) 深层递归
  • 所有的基础数据类型的赋值都是深拷贝
  • 通常利用基础数据类型的赋值来对引用数据类型做递归深拷贝
  • 局限性：会忽略 undefined，不能序列化函数，不能解决循环引用的对象
• 浅拷贝： Object.assign 或者扩展运算符

节流防抖

• 防抖：只有在某个时间内，没有再次触发某个函数，才真正的调用这个函数，一段时间内连续触发，不执行，直到超出限定时间执行最后一次。例如：input 模糊搜索；
  • 防抖的过程：
    • 当事件触发时，相应的函数并不会立即触发，而是会等待一定的时间；
    • 当事件密集触发时，函数的触发会被频繁的推迟；
    • 只有等待了一段时间也没有事件触发，才会真正的执行响应函数；
  • 防抖应用场景：
    • 输入框中频繁的输入内容，搜索或者提交信息；
    • 频繁的点击按钮，触发某个事件；
    • 监听浏览器滚动事件，完成某些特定操作；
    • 用户缩放浏览器的resize事件；

简单的理解，当密集的事件触发，而我们只希望触发比较靠后发生的事件，就可以使用防抖函数；

• 节流：在某个时间内（比如500ms），某个函数只能被触发一次，这就是节流，通常用在高频率触发的地方，降低频率。
  • 应用场景：
    • 监听页面的滚动事件；
    • 鼠标移动事件；
    • 用户频繁点击按钮操作；
    • 游戏中的一些设计；

实现防抖方法

方法一：利用第三方库，可以帮助我们实现防抖操作：

• lodash
• underscore

方法二：自定义防抖函数

与防抖类似，依然是密集的事件触发，但是这次密集事件触发的过程，不会等待最后一次才进行函数调用，而是会按照一定的频率进行调用；

ajax、axios、fetch区别

• ajax

  • 基于原生的XHR开发，XHR 本身的结构不清晰
  • 本身是针对MVC 的编程,不符合现在前端MVVM的浪潮
  • 依靠JQuery，JQuery 整个项目太大，单纯使用 ajax却要引入整个 JQuery 非常的不合理（采取个性化打包的方案又不能享受CDN服务）

• axios

  • 从浏览器中创建XMLHttpReqquest
  • 从node.js 发出http请求
  • 支持Promise API
  • 转换请求和响应数据
  • 取消请求
  • 自定转换JSON数据
  • 客户端支持防止CSRF/XSRF

• fetch

  • 只对网络请求报错，对 400 ， 500 都当做成功的请求，需要封装去处理
  • 对于 cookie的处理比较特殊，不同浏览器对credentials的默认值不一样，也就使得默认情况下cookie变的不可控
  • 本身无自带abort，无法超时控制，可以使用AbortController解决取消请求问题。没有办法原生监测请求的进度，而XHR可以

…