Javascript动手实现call,bind,apply的代码详解

 更新时间:2022年02月22日 11:44:11   作者:krysliang  
这篇文章主要为大家详细介绍了Javascript动手实现call,bind,apply的代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

1.检查当前调用的是否为函数

2.如果当前没有传入指向的this,则赋值为window

3.将fn指向当前调用的函数

4.获取传入的参数

5.将参数传入fn进行调用

6.将对象上的fn删除

7.返回结果

  //普通call的实现
  function hello(){
      console.log('hello 我是'+this.name);
  };
  let person = {
      name:'krys'
  };
  var name = 'liang';//只有var的变量属于window
  hello();// 'hello 我是liang'
  hello.call(person);//'hello 我是krys'
  hello.call();//'hello 我是liang'
  let person2 = {
      name:'lwl'
  }
  Function.prototype.mycall = function(context){
      //不传入参数的时候,默认为window
      if(typeof this !== "function"){
          throw new TypeError('Error');
      }
      context = context || window;
      context.fn = this;//fn就是上面的hello方法
      const args = [...arguments].slice(1);//第一个参数不要
      const result = context.fn(...args);//把剩下的其他参数传给hello
      delete context.fn;
      return result;
  }
  hello.mycall(person2);
function getParams(){
        console.log('我是',this.name,'获取一些参数',...arguments);
    }
    let person3 = {
        name:'hhh'
    };
    getParams.apply(person3,['hello','world'])
    Function.prototype.myApply = function(context){
        if(typeof this !== "function"){
            throw new TypeError()
        }
        context = context || window;
        context.fn = this;
        let result;
        if(arguments[1]){
            //如果有传入参数数组
            console.log(arguments[1])
            result  = context.fn(...arguments[1]);
        }else{
            result  = context.fn();
        }
        delete context.fn;
        return result;
    }
    getParams.myApply({name:'llll'},['jjj','kkkk','llll']);
function getParams(){
        console.log('我是',this.name,'获取一些参数',...arguments);
    }
    let person3 = {
        name:'hhh'
    };
    let person4 = {
        name:'tttt'
    };
    getParams.bind(person3,'hello','world')
    getParams.bind(person4,'hello','world')('jjj','kkk');
    Function.prototype.myBind = function(context){
        if(typeof this !== "function"){
            throw new TypeError()
        }
        context = context || window;
        const _that = this;
        const args = [...arguments].slice(1);
        return function F(){
            if(this instanceof F){
                return new _that(...args,...arguments);//这里的arguments是上面的jjj kkk
            }
            return _that.apply(context,args.concat(...arguments));//这里的arguments是上面的jjj kkk
        }
    }
    getParams.myBind({name:'llll'},'jjj','kkkk','llll')('hhhhllll');

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!  

相关文章

  • js实现iframe动态调整高度的代码

    js实现iframe动态调整高度的代码

    iframe,尤其是不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,现在,让我来告诉大家一种iframe动态调整高度的方法,主要是以下JS函数:
    2008-01-01
  • 使用 JScript 创建 .exe 或 .dll 文件的方法

    使用 JScript 创建 .exe 或 .dll 文件的方法

    JScript 是由微软开发的活动脚本语言,基于 ECMAScript 规范实现。Internet Explorer 中的 JavaScript,实际上是指 JScript。
    2011-07-07
  • JavaScript实现的内存数据库LokiJS介绍和入门实例

    JavaScript实现的内存数据库LokiJS介绍和入门实例

    这篇文章主要介绍了JavaScript实现的内存数据库LokiJS介绍和入门实例,LokiJS是一个内存数据库,将性能考虑放在第一位,使用JavaScript编写,需要的朋友可以参考下
    2014-11-11
  • JavaScript ParseFloat()方法

    JavaScript ParseFloat()方法

    parseFloat()方法可以解析一个字符串,并返回一个浮点数。本文给大家分享javascript parsefloat()方法的相关知识,对javascript parsefloat相关知识感兴趣的朋友一起学习吧
    2015-12-12
  • javascript实现的图片预览和上传功能示例【兼容IE 9】

    javascript实现的图片预览和上传功能示例【兼容IE 9】

    这篇文章主要介绍了javascript实现的图片预览和上传功能,结合实例形式分析了javascrpt图片预览和上传功能相关实现技巧与操作注意事项,需要的朋友可以参考下
    2020-05-05
  • javascript 随机数 与高级应用 附vbscript(asp) 随机数总结

    javascript 随机数 与高级应用 附vbscript(asp) 随机数总结

    有时忘了程序的随机数函数或javascript和vbscript的随机数混乱了,特总结下两者的随机数函数,以备以后使用方便。
    2007-10-10
  • 详解用场景去理解函数柯里化(入门篇)

    详解用场景去理解函数柯里化(入门篇)

    这篇文章主要介绍了用场景去理解函数柯里化(入门篇),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 探究Javascript模板引擎mustache.js使用方法

    探究Javascript模板引擎mustache.js使用方法

    这篇文章主要为大家介绍了Javascript模板引擎mustache.js使用方法,mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • Js动态创建div

    Js动态创建div

    因为功能需要,需要动态创建DIV
    2008-09-09
  • 微信小程序学习笔记之函数定义、页面渲染图文详解

    微信小程序学习笔记之函数定义、页面渲染图文详解

    这篇文章主要介绍了微信小程序学习笔记之函数定义、页面渲染,结合实例形式较为详细的分析了微信小程序中函数的定义、生命周期、模板调用、样式控制等操作技巧,并配合图文形式进行了详细说明,需要的朋友可以参考下
    2019-03-03

最新评论