2022.06.12

Vue3

slot APi的变化

全局API使用规范

teleport

Composition API

v-model变化

指令API的变化

算法

手撕

call

// call用于改变this指向，第一个参数要指向的对象，剩余参数是传入的参数
Function.prototype.myCall(context){
  // 调用者校验
  if(typeof this !== 'function'){
    throw new Error('not a function');
  }
  // 参数校验，为null的话执行window
  context = context || window;
  // 参数处理
  let args = [...arguments].slice(1);
  let result = null;
  // 设置对象的临时属性 指向this
  context.fn = this;
  // 存储
  result = context.fn(args);
  // 删除
  delete context.fn;
  return result;
}

apply

Function.prototype.myApply(context){
  if(typeof this !== 'function'){
    throw new Error('Not A Function');
  }
  context = context || window;
  let args = arguments[1];
  let result = null;
  context.fn = this;
  result = context.fn(args);
  delete context.fn;
  return result;
}

bind

Function.prototype.myBind(context){
  if(typeof this !== 'function'){
    throw new Error('Not A Function');
  }
  // bind方法会返回一个新函数
  let fn = this;
  // 参数处理
  let args = [...arguments].slice(1);
  let TempFn = function(){};
  let resFn = function(){
    let newArgs = [...arguments]
    // 根据调用方式不同，传入不同this
    return fn.apply(
      // 当返回出去的函数作为普通函数调用时，this指向window
      // 当返回出去的函数作为构造函数调用时，this指向实例，resFn其原型链上
      this instanceof resFn ? this : context, args.concat(newArgs);
    )
  }
  // 继承实现
  TempFn.prototype = this.prototype;
  resFn.prototype = new TempFn();
  return resFn;
}

new

// 调用new的过程中会发生以下四件事
// 1. 创建一个空对象
// 2. 将对象的原型设置为函数的prototype对象
// 3. 改变函数的this指向，让构造函数的this指向该对象，然后执行构造函数代码
// 4. 判断构造函数的返回类型
  // 4.1 如果是值类型，那么返回刚刚创建的对象
  // 4.2 如果是引用类型，就返回这个引用
// 使用方法，第一个参数为构造函数，剩余的为其他参数
function objectFactory(){
  // 拿到构造函数然后做一个校验
  let constructor = Array.prototype.shift.call(arguments);
  if(typeof constructor !== 'function'){
    throw new Error('Not A Function');
  }
  // 1 2
  let newObject = Object.create(constructor.prototype);
  // 3
  let result = constructor.apply(newObject, arguments);
  // 4
  let flag = result && (typeof result === 'object' || typeof result === 'function');
  return flag ? result : newObject;
}

Curry

// 把传入的参数保存在闭包中，等到参数数量足够函数执行了，再执行函数
function createCurry(func){
  let len = func.length;
  function resFunction(...args){
    if(args.length >= len){
      return func.apply(this, args);
    }else{
      function tempCurry(...newArgs){
        return resFunction.apply(this, [...args, ...newArgs]);
      }
      return tempCurry;
    }
  }
  return resFunction;
}