Heim >Web-Frontend >js-Tutorial >Gängige Handschriftfunktionen von JavaScript

Gängige Handschriftfunktionen von JavaScript

coldplay.xixi
coldplay.xixinach vorne
2020-09-18 16:55:402519Durchsuche

Gängige Handschriftfunktionen von JavaScript

Verwandte Lernempfehlungen: Javascript

1. Throttle

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

4. bind

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

5 . call

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;
}复制代码

6. 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;
};复制代码

8. Event-Bus | die restlichen Parameter

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;
};复制代码

11. Asynchrone Parallelität

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;
};复制代码

14

rrree

15. Versprochen

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;
}复制代码

Jeder kann gerne etwas hinzufügen~

Das obige ist der detaillierte Inhalt vonGängige Handschriftfunktionen von JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:juejin.im. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen