当前位置:   article > 正文

前端常见原生方法的实现(bind,promise,new,extends,深拷贝,函数防抖,函数节流)...

fn(this.resolve.bind(this), this.reject.bind(this));

前端原生方法的实现,这里写一下常见的一些实现:

1.bind

  1. Function.prototype.bind2 = function (context) {
  2. var self = this;
  3. returnfunction () {
  4. self.apply(context);
  5. }
  6. }

2.promise

  1. class Promise {
  2. result: any;
  3. callbacks = [];
  4. failbacks = [];
  5. constructor(fn) {
  6. fn(this.resolve.bind(this), this.reject.bind(this));
  7. }
  8. resolve(res) {
  9. if (this.callbacks.length > 0) this.callbacks.shift()(res, this.resolve.bind(this), this.reject.bind(this));
  10. }
  11. reject(res) {
  12. this.callbacks = [];
  13. if (this.failbacks.length > 0) this.failbacks.shift()(res, this.resolve.bind(this), this.reject.bind(this));
  14. }
  15. catch(fn) {
  16. this.failbacks.push(fn);
  17. }
  18. then(fn) {
  19. this.callbacks.push(fn);
  20. return this;
  21. }
  22. }

3.new的实现

  1. function create() {
  2. // 创建一个空的对象
  3. let obj = new Object()
  4. // 获得构造函数
  5. let Con = [].shift.call(arguments)
  6. // 链接到原型
  7. obj.__proto__ = Con.prototype
  8. // 绑定 this,执行构造函数
  9. let result = Con.apply(obj, arguments)
  10. // 确保 new 出来的是个对象
  11. return typeof result === 'object' ? result : obj
  12. }

4.函数防抖

  1. // func是用户传入需要防抖的函数
  2. // wait是等待时间
  3. const debounce = (func, wait = 50) => {
  4. // 缓存一个定时器id
  5. let timer = 0
  6. // 这里返回的函数是每次用户实际调用的防抖函数
  7. // 如果已经设定过定时器了就清空上一次的定时器
  8. // 开始一个新的定时器,延迟执行用户传入的方法
  9. return function(...args) {
  10. if (timer) clearTimeout(timer)
  11. timer = setTimeout(() => {
  12. func.apply(this, args)
  13. }, wait)
  14. }
  15. }

5.函数节流

  1. functionthrottle(method,delay){
  2. var timer=null;
  3. returnfunction(){
  4. var context=this, args=arguments;
  5. clearTimeout(timer);
  6. timer=setTimeout(function(){
  7. method.apply(context,args);
  8. },delay);
  9. }
  10. }

6.深拷贝

  1. function deepClone(obj) {
  2. let result = typeof obj.splice === "function" ? [] : {};
  3. if (obj && typeof obj === 'object') {
  4. for (let key in obj) {
  5. if (obj[key] && typeof obj[key] === 'object') {
  6. result[key] = deepClone(obj[key]);//如果对象的属性值为object的时候,递归调用deepClone,即在吧某个值对象复制一份到新的对象的对应值中。
  7. } else {
  8. result[key] = obj[key];//如果对象的属性值不为object的时候,直接复制参数对象的每一个键值到新的对象对应的键值对中。
  9. }
  10. }
  11. return result;
  12. }
  13. return obj;
  14. }

7.extends实现

  1. //子类 extends 父类
  2. Function.prototype.extends = function(func, options){
  3. for(var key in func.prototype){
  4. this.prototype[key] = func.prototype[key];
  5. }
  6. for(var name in options){
  7. this.prototype[name] = options[name];
  8. }
  9. }

总结:以上是常见的方法实现,只是简单的实现

转载于:https://www.cnblogs.com/ysk123/p/10223594.html

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/2023面试高手/article/detail/388475
推荐阅读
相关标签
  

闽ICP备14008679号