前端开发Javascript中重难知识点常见问题集合

Posted 李猫er

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端开发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可以

…

以上是关于前端开发Javascript中重难知识点常见问题集合 的主要内容，如果未能解决你的问题，请参考以下文章

css与javascript重难点，学前端，基础不好一切白费！

web前端面试宝典——带你直击面试重难点（40个经典题目，涵盖近90%的考点，码字2w，干货满满！）

Javascript For循环中的重难点

JavaScript面试核心考点(精华)

Web前端培训知识分享：2种离线安装npm包的方法

JavaScript面试核心考点(精华)阿斯顿23