Fonctions d'écriture manuscrites courantes de JavaScript

Recommandations d'apprentissage associées : javascript

1. Prévention Secouez

function debounce(func, ms = 500) {  let timer;  return function (...args) {    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      func.apply(this, args);
    }, ms);
  };
}复制代码

2. Accélérateur

function throttle(func, ms) {  let canRun = true;  return function (...args) {    if (!canRun) return;
    canRun = false;
    setTimeout(() => {
      func.apply(this, args);
      canRun = true;
    }, ms);
  };
}复制代码

3. nouveau

function myNew(Func) {  const instance = {};  if (Func.prototype) {    Object.setPrototypeOf(instance, Func.prototype);
  }  const res = Func.apply(instance, [].slice.call(arguments, 1));  if (typeof res === "function" || (typeof res === "object" && res !== null)) {    return res;
  }  return instance;
}复制代码

4. apply

Function.prototype.myBind = function (context = globalThis) {  const fn = this;  const args = Array.from(arguments).slice(1);  const newFunc = function () {    if (this instanceof newFunc) {      // 通过 new 调用，绑定 this 为实例对象
      fn.apply(this, args);
    } else {      // 通过普通函数形式调用，绑定 context
      fn.apply(context, args);
    }
  };  // 支持 new 调用方式
  newFunc.prototype = fn.prototype;  return newFunc;
};复制代码

7. deepCopy

Function.prototype.myCall = function (context = globalThis) {  // 关键步骤，在 context 上调用方法，触发 this 绑定为 context
  context.fn = this;  let args = [].slice.call(arguments, 1);  let res = context.fn(...args);  delete context.fn;  return res;
};复制代码

8. Bus d'événement | mode publication-abonnement

Function.prototype.myApply = function (context = globalThis) {  // 关键步骤，在 context 上调用方法，触发 this 绑定为 context
  context.fn = this;  let res;  if (arguments[1]) {
    res = context.fn(...arguments[1]);
  } else {
    res = context.fn();
  }  delete context.fn;  return res;
};复制代码

9. , Laissez-le renvoyer une fonction pour gérer les paramètres restants

function deepCopy(obj, cache = new WeakMap()) {  if (!obj instanceof Object) return obj;  // 防止循环引用
  if (cache.get(obj)) return cache.get(obj);  // 支持函数
  if (obj instanceof Function) {    return function () {
      obj.apply(this, arguments);
    };
  }  // 支持日期
  if (obj instanceof Date) return new Date(obj);  // 支持正则对象
  if (obj instanceof RegExp) return new RegExp(obj.source, obj.flags);  // 还可以增加其他对象，比如：Map, Set等，根据情况判断增加即可，面试点到为止就可以了

  // 数组是 key 为数字素银的特殊对象
  const res = Array.isArray(obj) ? [] : {};  // 缓存 copy 的对象，用于出来循环引用的情况
  cache.set(obj, res);  Object.keys(obj).forEach((key) => {    if (obj[key] instanceof Object) {
      res[key] = deepCopy(obj[key], cache);
    } else {
      res[key] = obj[key];
    }
  });  return res;
}复制代码

10. Héritage de l'implémentation es5

class EventEmitter {  constructor() {    this.cache = {};
  }

  on(name, fn) {    if (this.cache[name]) {      this.cache[name].push(fn);
    } else {      this.cache[name] = [fn];
    }
  }

  off(name, fn) {    const tasks = this.cache[name];    if (tasks) {      const index = tasks.findIndex((f) => f === fn || f.callback === fn);      if (index >= 0) {
        tasks.splice(index, 1);
      }
    }
  }

  emit(name) {    if (this.cache[name]) {      for (let fn of this.cache[name]) {
        fn();
      }
    }
  }


  emit(name, once = false) {    if (this.cache[name]) {      // 创建事件副本，如果回调函数内继续注册相同事件，触发时，会造成死循环
      const tasks = this.cache[name].slice()      for (let fn of tasks) {
        fn();
      }      if (once) {        delete this.cache[name]
      }
    }
  }
}复制代码

11 instanceof

function curry(func) {  return function curried(...args) {    if (args.length >= func.length) {
      func.apply(this, args);
    } else {      return function (...args2) {
        curried.apply(this, args.concat(args2));
      };
    }
  };
}复制代码

12. 🎜>13. Série asynchrone | Parallèle asynchrone

function create(proto) {  function F() {}
  F.prototype = proto;  return new F();
}// Parentfunction Parent(name) {  this.name = name;
}

Parent.prototype.say = function () {  console.log(this.name);
};// Childfunction Child(age, name) {
  Parent.call(this, name);  this.age = age;
}
Child.prototype = create(Parent.prototype);
Child.prototype.constructor = Child;

Child.prototype.say = function () {  console.log(this.age);
};复制代码

14. vue réactive

function instanceOf(instance, klass) {  let proto = instance.__proto__;  let prototype = klass.prototype;  while (true) {    if (proto === null) return false;    if (proto === prototype) return true;
    proto = proto.__proto__;
  }
}复制代码

15.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!