• 手写new,call,apply,bind


    new

    new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。new 关键字会进行如下的操作:

    1. 创建一个空的简单JavaScript对象(即{});
    2. 链接该对象(即设置该对象的构造函数)到另一个对象 ;
    3. 将步骤1新创建的对象作为this的上下文 ;
    4. 如果该函数没有返回对象,则返回this。
    function objectFactory(){
        var obj = {};
        //取得该方法的第一个参数(并删除第一个参数),该参数是构造函数
        var Constructor = [].shift.apply(arguments);
        //将新对象的内部属性__proto__指向构造函数的原型,这样新对象就可以访问原型中的属性和方法
        obj.__proto__ = Constructor.prototype;
        //取得构造函数的返回值
        var ret = Constructor.apply(obj, arguments);
        //如果返回值是一个对象就返回该对象,否则返回构造函数的一个实例对象
        return typeof ret === "object" ? ret : obj;
    }
    ===================另一种写法=================================
    function myNew(fn,...args){
         var obj = {};
         obj.__proto__= fn.prototype;
         fn.call(obj,...args)
         return type of (obj) == "Object" ? obj : {}  
         //type of 换成Object.prototype.toString.call更严格一些
    }
    

    call

    1.判断调用对象是否为函数,即使我们是定义在函数的原型上的,但是可能出现使用 call 等方式调用的情况。
    2.判断传入上下文对象是否存在,如果不存在,则设置为 window 。
    3.处理传入的参数,截取第一个参数后的所有参数。
    4.将函数作为上下文对象的一个属性。
    5.使用上下文对象来调用这个方法,并保存返回结果。
    6.删除刚才新增的属性。
    7.返回结果。
    call函数实现

    Function.prototype.myCall = function(context) {
      // 判断调用对象
      if (typeof this !== "function") {
        console.error("type error");
      }
    
      // 获取参数
      let args = [...arguments].slice(1),
        result = null;
    
      // 判断 context 是否传入,如果未传入则设置为 window
      context = context || window;
    
      // 将调用函数设为对象的方法
      context.fn = this;
    
      // 调用函数
      result = context.fn(...args);
    
      // 将属性删除
      delete context.fn;
    
      return result;
    };
    ===========================最简单得实现方式============
    function myCall(context,...args){
          context.fn = this; //这一步是最重要得  要理解这一句需要转转弯
          delete context.fn;
    }
    //我来啰嗦一下把,简单来讲一下我得思路
    //现在我们有一个函数  function  add() 要通过我们刚刚声明得myCall函数来改变this指向
    //第一个参数为函数  ...args是剩余运算符,代表后续得参数集
    //我们现在有另一个函数 function obj()  现在吧add得this指向obj
    //调用myCall===> add.myCall(obj)===>{
          变成obj.fn = this;   this是谁?this在add函数里面调用的 this当然是add
          我们把this赋值给obj.fn,===>fn的this是obj,我们就做到了把add的this指向变为了obj
          有点绕,但是你好好想一想,会明白的。
          在对象里面 点一个属性,没有的话是新增,有的话是修改,我们刚刚新增了一个fn属性,
          用过之后应该删除掉它。 delete context.fn;  
    }
    
    

    apply

    
    // apply 函数实现
    
    Function.prototype.myApply = function(context) {
      // 判断调用对象是否为函数
      if (typeof this !== "function") {
        throw new TypeError("Error");
      }
    
      let result = null;
    
      // 判断 context 是否存在,如果未传入则为 window
      context = context || window;
    
      // 将函数设为对象的方法
      context.fn = this;
    
      // 调用方法
      if (arguments[1]) {
        result = context.fn(...arguments[1]);
      } else {
        result = context.fn();
      }
    
      // 将属性删除
      delete context.fn;
    
      return result;
    };
    
    
    

    bind

    // bind 函数实现
    Function.prototype.myBind = function(context) {
      // 判断调用对象是否为函数
      if (typeof this !== "function") {
        throw new TypeError("Error");
      }
    
      // 获取参数
      var args = [...arguments].slice(1),
        fn = this;
    
      return function Fn() {
        // 根据调用方式,传入不同绑定值
        return fn.apply(
          this instanceof Fn ? this : context,
          args.concat(...arguments)
        );
      };
    };
    

    柯里化

    // 函数柯里化指的是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。
    
    function curry(fn, args) {
      // 获取函数需要的参数长度
      let length = fn.length;
    
      args = args || [];
    
      return function() {
        let subArgs = args.slice(0);
    
        // 拼接得到现有的所有参数
        for (let i = 0; i < arguments.length; i++) {
          subArgs.push(arguments[i]);
        }
    
        // 判断参数的长度是否已经满足函数所需参数的长度
        if (subArgs.length >= length) {
          // 如果满足,执行函数
          return fn.apply(this, subArgs);
        } else {
          // 如果不满足,递归返回科里化的函数,等待参数的传入
          return curry.call(this, fn, subArgs);
        }
      };
    }
    
    // es6 实现
    function curry(fn, ...args) {
      return fn.length <= args.length ? fn(...args) : curry.bind(null, fn, ...args);
    }
    
  • 相关阅读:
    20191117-STD::讲解及求平均数例题
    计算机网络-ip分类
    游标cursor
    ajax
    django ORM
    urls
    templates
    views
    models
    setting
  • 原文地址:https://www.cnblogs.com/loveliang/p/13671575.html
Copyright © 2020-2023  润新知