JS知识树

Js回忆目录知识点:

个人便记，如有新知识点望告知！

• var let const

• 运算符

• String Number Boolean + object array + undefined null +symbol

• math库Date库

• promise 常用

• generator 状态机

• async await 常用 async await 也算是* yield 的语法糖

• pc端DOM

  • 节点，属性，js操作css变量，操作style

• pc端BOM

• 存储 永久 临时 cookie

• 原生ajax

• 事件

• 内置顶级函数

• 函数

  • arguments.callee
  • 函数的toString/valueOf隐式调用
  • Environment标记环境
  • 函数尾调用 到函数的尾递归
    • let digui = (n,num=1)=> n===1? num : digui(n-1,n*num)
  • 蹦床函数 将递归执行转为循环执行，防止爆栈
  • 柯里化 参数复用，延迟执行，提前确认

    let curry = (fn)=>{
        return function curried(...arg1){
            if( arg1.length >= fn.length){
                return fn.call(this,...arg1)
            }else{
                // 递归收集参数
                return function (...arg2){
                    return curried.apply(this,arg1.concat(arg2))
                }
            }
        }
    }
    

  • 偏函数 固定部分参数，生成另外一个参数更少的方法
  • 箭头 不可new 不可arguments
  • call bind apply 闭包
  • 匿名函数 具名函数 函数表达式 IIFE
  • compose函数
    • 递归写法 从右往左的
    • reduce写法 从左往右的
    • promose写法
    • Generator写法
    • AOP写法
  • 柯里化 参数复用，延迟执行
    • 防抖 短时间内触发同一函数，只给执行一次，比如重复点赞取消点赞，频繁时间内点一次我清空一次计时操作等你点累了，计时的时间到了自动将接口发给服务端
    • 节流 短时间内触发同一函数，只给一段时间执行一次，比如监听滚动条的事件

• integrator 一个数据 结构只要具有Symbol.iterator属性，就可遍历

  • 主要为for of 服务
  • 自定义底层遍历器的next方法 let yang = { a:666,[Symbol.iterator]: function() {return next(){}} }
  • 自定义底层遍历器的return方法
  • 自定义底层遍历器的throw方法

• 对象 Es5的api

  • 构造函数创对象
    • 构造函数.leng是参数长度
    • 构造函数.name是名字
  • 旧API
    • assign浅 继承属性和不可枚举属性不可拷贝 且出现异常会打断
    • JSON.parse(JSON.stringify(对象)) 深
    • 手写递归判断 深
      • 先instanceof判断 分出 [] 和{}
      • getOwnPropertyNames获取键名
      • for循环
        • 是否是对象或数组 是就赋值递归结果，不是就赋值结果
    • create 创对象
    • defineProperty 添加新属性 数据描述符和存取描述符的搭配
      • writable,enumerable,configurable
    • defineProperties
    • entries 可枚举 const [key, value] of Object.entries(obj)
    • freeze 冻结对象 深浅冻结 — isFrozen 是否可冻结
    • seal密封 — isSealed 是否可密封
    • preventExtensions 使之不可拓展 — isExtensible 是否可拓展
    • getOwnPropertyDescriptor 获取属性描述
    • getOwnPropertyNames 获取键名
    • hasOwnProperty 判断对象是否包含特定的自身（非继承）属性。
    • keys 获取键值
    • getOwnPropertySymbols 返回带有Symbol 属性的
    • getPrototypeOf 获取原型 — setPrototypeOf 设置原型
    • is 鸡肋
    • call bind apply
  • new 做了什么
    • 1.新建一个对象，2. 修改对象原型指向，3.修改this指向

• 继承

  • ES5

    • 原型链继承 原型链引用 方法可复用 缺：引用类型

    • 构造函数继承 call改变this 缺：1.超类方法对子类不可见，2.方法不可复用

    • 组合式继承 原型链引用 + call 优:上面的优的结合 。 缺:超类型构造函数会被调2次

      • father.call(this, name);
      • son.prototype = new father(); // 第二次调用 father
      • son.prototype.constructor = son;

    • 原型式继承 利用空对象，接住原型链

      Object.prototype._create = function(o, obj) {
          function F() {
              Object.assign(this, obj); //将obj参数拆成this.的形式(IE又不支持。。。)
          }
          F.prototype = o
          return new F()
      }
      

    • 寄生式继承 在内部已某种方式来增强对象，最后返回对象。

    • 寄生组合式继承(优秀)

      function _extend(son, father) {
          var prototype = Object.create(father.prototype); // 创建对象 
          prototype.constructor = son // 增强对象 　　　　　　
          son.prototype = prototype // 指定对象 
      }
      function son(name, job) {
      	// 继承属性 
      	father.call(this, name)
      	this.job = job
      }
      

  • ES6
    • extends 继承
    • super()关键字 相当于call改变this
    • super.aaa()调用父类的方法
    • 静态方法
    • 静态属性
    • super作为对象时，在普通方法中，指向父类的原型对象；在静态方法中，指向父类。
    • new.target 返回new命令作用于的那个构造函数
    • 传统的构造函数创类会将this自动装箱，class的方法不会
    • mixin模式

• proxy 代理器 Vue3.0的底层应用之一

  • 13个方法

• reflect 替代旧的对象api

• try catch finally

• 模块化的 四大知识点

  • commonJS (服务端)
    • module.exports = fn
    • exports.names = "第二种"
    • require（"../../"） require（"../../"）[default]
  • commonJS (游览器) 使用browserify这个包
  • AMD（游览器，异步）使用require.js这个文件
    • define 配置文件
  • CMD（游览器，异步）下载sea.js这个文件
  • ES6的module 最好装下babel-cli browserify和babel-preset-es2015
    • export let arr =[1,2,3,4] 或 export {fn2, module2 } 或 export default aaa
    • import {fn1,arr} from './module1
    • as 语法 *语法
    • export { a as fn } from './index.js'
  • CommomJS动态加载，import是静态加载

• 正则

• 容器

  • Set 去重 add delete has clear size
  • Map set get delete has clear size
    • map和对象互转
      WeakMap 引用的对象都是弱引用，不会内存泄漏

• blob arraybuffer

• atomics

• 垃圾回收机制

• http协议

• websocket

• 跨域

• webgl

• defer和 async

• 作用域

设计模式

• 单例模式 创建的类只调用一次且只能被调用一次往后都是调用第一次实例化的那个类对象

  优点：适用于单一对象，只生成一个对象实例，避免频繁创建和销毁实例，减少内存占用。
  缺点：不适用动态扩展对象，或需创建多个相似对象的场景

• 工厂模式 js语言在ES6的类出现之后 自带工厂模式

  优点：能解决创建多个相似对象的问题。
  缺点：1.违背了开放封闭原则。每增加一个产品，都需要修改工厂类的代码
  2.对象的类型不知道

• 建造者模式 分步构建一个复杂的对象

  优点：建造者模式的“加工工艺”是暴露的，这样使得建造者模式更加灵活，并且建造者模式解耦了组装过程和创建具体部件，使得我们不用去关心每个部件是如何组装的。

• 原型模式 JS语言天生有原型优势
  • 实验发现后不止ES5用原型构造函数可以写多继承，ES6也可以像python一样用多继承
• 策略模式 定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。

  优点：1. 策略模式利用组合，委托等技术和思想，有效的避免很多if条件语句。
  2. 策略模式提供了开放-封闭原则，使代码更容易理解和扩展。
  3. 策略模式中的代码可以复用。

• 代理模式 当一个用户访问一个重量级对象时，它的权限不足，代理模式就可以提供一个替身对象来控制一个重量级对象

  优点：代理模式能够将代理对象与被调用的对象分离，降低了系统的耦合度。代理模式在客户端 和目标对象之间起到一个中介作用，这样，可以起到保护目标对象的作用。代理对象也可以对目标对 象调用之前进行其他的操作。
  缺点： 增加系统的复杂度

  • 保护代理
  • 虚拟代理
  • 透明代理
  • 缓存代理
• 发布订阅模式

  优点：1.支持简单的广播通信，当对象状态发生改变时，会自动通知已经订阅过的对象。
  2.发布者与订阅者耦合性降低，发布者只管发布一条消息出去，它不关心这条消息如何被订阅者使用
  缺点：创建订阅者需要消耗一定的时间和内存。
  虽然可以弱化对象之间的联系，如果过度使用的话，反而使代码不好理解及代码不好维护等等。