手写JavaScript各种骚操作

作者: LeoZzz | 来源:发表于2019-07-18 19:03 被阅读2次

    一、前言

    本篇文章是记录各种手写实现JavaScript中的各种操作,如:new apply等,如果有你有更好的方法,记得告诉我哦。

    二、实现

    1. 实现一个new操作符

    new的原理,大致分为四点:

    1. 创建一个空的对象;

    2. 让此空对象的__proto__指向构造函数的原型对象Constructor.prototype;

    3. 绑定this,执行构造函数;

    4. 返回新对象;

    function _New(func){
      let _tempObj = {};
      if(func.prototype !== null){
        _tempObj.__proto__ = func.prototype;
      }
     let obj = func.apply(_tempObj,Array.prototype.slice.call(arguments,1));
     return (typeof obj === "object") ? obj : _tempObj;
    }
    
    2. 实现一个call方法

    call的核心其实是:

    1. 将函数设置为对象的属性;

    2. 执行&删除此函数;

    3. 指定this到函数并传入给定参数执行函数;

    4. 如果不传入参数,默认指向为window;

    简单的
     var obj = {
      a:1,
      b:function(){
      console.log(this.a);
      }
     }
     obj.b();//1
    
    Function.prototype.ncall = function(contex=window){
        contex.fn = this;
        let args = [...arguments].slice(1);
        let res = contex.fn(..args);
        delete contex.fn;
        return res;
        
    }
    
    

    apply的实现和call基本一样,只是参数略有不同,如下代码:

    Function.prototype.napply = function(contex = window) {
      contex.fn = this;
      let res ;
      if(arguments[1]){
      //有参数
      res = contex.fn(...arguments[1]);
      }else{
      res = contex.fn();
      }
      delete context.fn;
      return res
    }
    

    bind的实现,会创建一个新函数。当这个新函数被调用时,bind() 的第一个参数将作为它运行时的 this,之后的一序列参数将会在传递的实参前传入作为它的参数。bind的实现会借助apply或者call;

    Function.prototype.nbind = function(contex = window) {
    if (typeof contex !== 'function'){throw Error('not a func')};
      let fn = this;
      newFunc = function(){};
      let arg = ...arguments[1];
      let resfunc = function(){
         fn.apply(this instanceof newFunc ? this : contex,args.concat(..arguments));
      }
    if(this.prototype){
      newFunc.prototype = this.prototype;
    }
      resfunc.prototype = new newFunc();
      return newFunc;  
    }
    
    

    bind的实现有一个难点,bind 返回的函数作为构造函数的时候,bind 时指定的 this 值会失效,但传入的参数依然生效.

    var value = 2;
    
    var foo = {
        value: 1
    };
    
    function bar(name, age) {
        this.habit = 'shopping';
        console.log(this.value);
        console.log(name);
        console.log(age);
    }
    
    bar.prototype.friend = 'kevin';
    
    var bindFoo = bar.bind(foo, 'daisy');
    
    var obj = new bindFoo('18');
    // undefined
    // daisy
    // 18
    console.log(obj.habit);
    console.log(obj.friend);
    // shopping
    // kevin
    
    

    具体参考

    3. 实现一个instanceof方法
    function ninstanceof(arg1,arg2){
     let proto = arg1.__proto__;
     let proto2 = arg2.prototype;
     while(true){
     if(proto == proto2) return true;
       if(proto == null) return false;
       proto = proto.__proto__;//深度继续往上早;
     }
    }
    
    
    4. 实现一个js的深copy
    function deepCopy(obj){
    var r ;
      if(typeof obj == "object"){
          r = obj.constructor == Array ? [] : {};
          for (let i in obj){
          r[i] = typeof obj[i] == "object" ? deepCopy(obj[i]) : obj[i];
          }
       
      }else{
      r = obj;
      }
      return r;
    }
    
    5. 实现节流和防抖函数

    节流:一段时间内函数只执行一次;

    防抖:如果事件执行时,又触发了事件,那事件会重新执行

    //isDebounce 是否防抖
    const throttle =  function(fn,delay, isDebounce){
      let timer ;
      let lastTimer = 0;
       return function(){
         if(isDebounce){
         //防抖
         if(timer) clearTimeout(timer);
         
        timer = setTimeout(() => {
      // Todo...
      fn();
    }, delay)
         }else{
         //节流
         let now = new Date().getTime();
         if(now - lastTimer < delay)return;
         lastTimer = now;
         fn();
         }
       }
    }
    
    

    三、总结

    函数柯里化和promise的原理,菜鸡正在学习中,之后会补充到这。已上有什么错误,请及时联系。

    相关文章

      网友评论

        本文标题:手写JavaScript各种骚操作

        本文链接:https://www.haomeiwen.com/subject/iajrlctx.html