前端知识点-个人梳理

ppzhang
282 阅读5分钟

主要针对我不熟悉的前端知识点进行梳理，因为是我个人的理解，可能不够深入，欢迎探讨。

JS 高级部分

作用域、作用域链、闭包

  • 什么是js作用域：在js中一个函数内部定义的变量只在当前函数中有效，在函数外部是无法访问到这个变量的
  • 作用域链：如果在当前函数使用一个没有定义在本函数内部的变量，就会到父级作用域（可能是另一个函数，也可能是document）当中去寻找，如果在父级作用域中还是没有获取到就会继续到父级的父级作用域去寻找，这种向上查询的方式叫做js的作用域链
  • 什么是闭包： 闭包指的是一个函数有权访问在另一个函数中定义的变量，将这种现象称之为闭包
  • 闭包的作用： 闭包可以保存变量不被污染，在有闭包之后变量就会常驻内存中，这样我们可以将常用的变量保存起来防止被篡改
  • 闭包的缺点：闭包会将变量常驻内存中，会导致变量得不到释放占用内存空间

原型、原型链、继承

  1. js分为函数对象和普通对象，每个对象都有__proto__属性，但是只有函数对象才有prototype属性
  2. Object、Function都是js内置的函数，类似的还有我们常用到的Array、RegExp、Date、Boolean、Number、String
  3. 属性__proto__是一个对象，它有两个属性，constructor和__proto__
  4. 原型对象prototype有一个默认的constructor属性，用于记录实例是由哪个构造函数创建
1. Person.prototype.constructor == Person // **准则1： 原型对象（即Person.prototype)的constructor指向构造函数本身**
2. person01.__proto__ == Person.prototype // **准则2： 实例（即person01）的__proto__和原型对象指向同一个地方**
  • 原型对象的作用：用存放实例中共有的那部分属性、方法、可以大大减少内存消耗。

函数上下文、this指向

  • 函数上下文：（留个白，等会再来填）
  • this指向：
    • 在普通函数中，谁调用函数就指向谁，特别的有定时器this指向windows。
    • 箭头函数中this会指向外层的this
    • bind：在函数名后面直接接.bind()绑定，this指向括号中的对象
    • call: 在函数名后面直接接.call()调用的同时改变this指向，call的第一个参数是this指向的对象，第二个参数开始就是传递过去的参数，用逗号分割，如：func.call(obj, a, b)

js的运行机制，事件队列和循环、同步, 异步编程：

  • 事件队列：分为同步事件队列和异步事件队列
  • js的EventLoop:
    • js任务进入执行栈，先区分出同步任务和异步任务，同步任务进入主线程执行；异步任务送入EventTable事件队列中，并注册异步回调函数；
    • 在同步任务执行完成后就会查看事件队列中的任务有没有需要执行的，有的话就会执行，执行完成之后又继续检查事件队列，直到没有可执行的任务时才会停止，这就是事件循环（Event Loop)
  • 继续细分下去又分为宏任务和微任务
    • 宏任务包含整个script代码块，setTimeout，setInterval，
    • 微任务包括await后面的语句，以及promise、process.nextTick。
    • js会先执行宏任务，宏任务中如果有新的宏任务会被放进宏任务事件队列，遇到微任务会放进微任务队列，在当前宏任务执行完之后会检查有无可执行的微任务，执行完所有微任务后开始执行新的宏任务。
    image.png

ES6相关

字符串, 数组, 对象 扩展的api

变量扩展: let const 解构赋值 块级作用域

函数扩展: 箭头函数 默认参数, rest参数

展开运算符, 模板字符串

set 和 map数据结构

  • Set和Map主要的应用场景在于数组去重和数据存储
  • Set是一种叫做集合的数据结构，Map是一种叫做字典的数据结构
const s = new Set();// 用new创建set集合
// 数组去重set用法
let arr = [1,2,1,4,5,3];
arr = [...new Set(arr)]

Set实例的属性和方法

  • Set的属性：
    • size：返回集合所包含元素的数量
  • Set的方法：
    • 操作方法：
      • add(value): 向集合添加一个新的项
      • delete(value): 从集合移除一个值
      • has(value): 如果值在集合中存在，返回true，否则false
      • clear(): 移除集合里所有的项
    • 遍历方法：
      • keys(): 返回一个包含集合中所有键的数组
      • value(): 返回一个包含集合中所有值的数组
      • entries: 返回一个包含集合中所有键值对的数组
      • forEach(): 变量集合成员，对集合成员执行操作
集合和字典的区别：
  • 共同点：集合、字典可以存储不重复的值
  • 不同点：集合是以[值，值]的形式存储元素，字典是以[键，值]的形式存储

迭代器和生成器函数 next 和 yield的理解

proxy对象 属性代理器: 属性的读取（get）和设置（set）相关操作

promise对象, 异步编程的解决方案

async + await: 异步编程的终极方案 promise + generator的语法糖

class语法 构造函数的语法糖

模块化编程 export + import 的 导出和导入

Vue相关

vue-router: 搭建SPA

路由,组件的配置

路由间的传值

路由跳转

路由的导航守卫

记住在router.js 和 组件页面中的使用方式

vuex: 状态管理: 数据仓库store

实例化仓库的5大属性的使用

$nextTick

在vue中，data数据被更新时vue不会马上将其渲染到模板，vue会在所有对data操作结束之后再去操作模板，如果我们想让指令在vue更新模板之后再执行，有两种方法：

1. 定时器延时

可以不加延时，也会在模板更新之后进行

setTimeout(() => {
    this.$ref.inputTitle.focus();
})

2. $nextTick

this.$nextTick(function() {
    this.$ref.inputTitle.focus();
})
avatar
文章
阅读
粉丝