原生js如何实现call,apply以及bind

1、实现call

步骤:

  1. 将函数设为对象的属性;
  2. 指定this到函数,并传入给定参数执行函数;
  3. 执行之后删除这个函数;
  4. 如果不传入参数,默认指向window;
Function.prototype.mycall = function (context, ...args) {
    //判断是否为函数,如果不是函数,则报错
    if (typeof this !== "function") {
        throw new Error("不是函数");
    }
    context = context || window;
    context.fn = this;
    const res = context.fn(...args);
    delete context.fn;
    return res;
}

  测试代码:

var name = "李辉", age = 25;
var obj = {
    name: "周果",
    objAge: this.age,
    myFun: function (fm, to) {
        console.log(`名字:${this.name},年龄:${this.age},来自:${fm},去往:${to}`)
    }
};
var person = {
    name: "弟弟",
    age: 12,
};

Function.prototype.mycall = function (context, ...args) {
    //判断是否为函数,如果不是函数,则报错
    if (typeof this !== "function") {
        throw new Error("不是函数");
    }
    context = context || window;
    context.fn = this;
    const res = context.fn(...args);
    delete context.fn;
    return res;
}

obj.myFun.mycall(person, "成都", "仁寿"); //名字:弟弟,年龄:12,来自:成都,去往:仁寿

2、实现apply

Function.prototype.myApply = function (context, ...args) {
    //判断是否为函数,如果不是函数,则报错
    if (typeof this !== "function") {
        throw new Error("不是函数");
    }
    context = context || window;
    context.fn = this;
    args = args && args[0] || [];
    const result = context.fn(...args);
    delete context.fn;
    return result;
}

  测试代码:

obj.myFun.myApply(person, ["成都", "仁寿"]); //名字:弟弟,年龄:12,来自:成都,去往:仁寿

3、实现bind

  bind()方法主要就是将函数绑定到某个对象,bind()会创建一个函数,函数体内的this对象的值会被绑定到传入bind()中的第一个参数的值。

  方法1:使用apply

Function.prototype.myBind = function () {
    let self = this; //保存原函数
    let context = [].shift.call(arguments); //保存需要绑定的this上下文
    let args = [...arguments]; //将传入的剩余参数转换成数组
    return function () {                 //返回一个新的函数
        self.apply(context,[].concat.call(args,[...arguments]));
    }
}

  ES6简化一下:

Function.prototype.myBind = function (context, ...args1) {
        return (...args2) => {  //返回箭头函数, this绑定调用这个方法的函数对象
            context = context || window;
            return this.apply(context, args1.concat(args2));//合并参数
        }
    }

  方法2:不使用call以及apply

  将上面的代码和js手写实现apply的代码合并一下:

Function.prototype.myBind = function (context, ...args1) {
    return (...args2) => {  //返回箭头函数, this绑定调用这个方法的函数对象
        context = context || window;
        context.fn = this;
        const args = args1.concat(args2);
        const res = context.fn(...args);
        delete context.fn;
        return res;
    }
}

  测试代码:

obj.myFun.myBind(person, "成都", "仁寿")();//名字:弟弟,年龄:12,来自:成都,去往:仁寿

以上就是原生js如何实现call,apply以及bind的详细内容,更多关于js实现call,apply以及bind的资料请关注我们其它相关文章!

(0)

相关推荐

  • JavaScript函数Call、Apply原理实例解析

    这篇文章主要介绍了JavaScript函数Call.Apply原理实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一.方法重用 使用 call() 方法,您可以编写能够在不同对象上使用的方法. 1.函数是对象方法 在 JavaScript 中,函数是对象的方法. 如果一个函数不是 JavaScript 对象的方法,那么它就是全局对象的函数(参见前一章). 下面的例子创建了带有三个属性的对象(firstName.lastName.full

  • JS apply用法总结和使用场景实例分析

    本文实例讲述了JS apply用法总结和使用场景.分享给大家供大家参考,具体如下: apply是绑定this到指定函数或类,也可以说把函数或者类的方法和属性给到当前作用域. 1,使用apply实现继承 function A(name, age){ this.name = name; this.age = age; } function B(name, age, time){ A.apply(this,[name]) //这里的name必须加上[] } const b = new B('继承');

  • javascript中call,apply,bind的区别详解

    在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢. 在说区别之前还是先总结一下三者的相似之处: 1.都是用来改变函数的this对象的指向的. 2.第一个参数都是this要指向的对象. 3.都可以利用后续参数传参. 那么他们的区别在哪里的,先看一个例子. var xw = { name : "小王", gender : "男", age : 24, say : function() { alert(this.name + " ,

  • JS中call()和apply()的功能及用法实例分析

    本文实例讲述了JS中call()和apply()的功能及用法.分享给大家供大家参考,具体如下: 1.call()和apply()的作用 首先引出问题:用call()和apply()的目的是什么? 来看个例子,在javascript OOP中,我们经常会这样定义: function cat(){ } cat.prototype={ food:"fish", say: function(){ alert("I love "+this.food); } } var bla

  • 分析ES5和ES6的apply区别

    目录 概述 函数签名 可选参数 非严格模式 异常处理 实际使用 总结 概述 众所周知, ES6 新增了一个全局.内建.不可构造的Reflect对象,并提供了其下一系列可被拦截的操作方法.其中一个便是Reflect.apply()了.下面探究下它与传统 ES5 的Function.prototype.apply()之间有什么异同. 函数签名 MDN 上两者的函数签名分别如下: Reflect.apply(target, thisArgument, argumentsList) function.a

  • JS call()及apply()方法使用实例汇总

    最近又遇到了JacvaScript中的call()方法和apply()方法,而在某些时候这两个方法还确实是十分重要的,那么就让我总结这两个方法的使用和区别吧. 每个函数都包含两个非继承而来的方法:call()方法和apply()方法. 相同点:这两个方法的作用是一样的. 都是在特定的作用域中调用函数,等于设置函数体内this对象的值,以扩充函数赖以运行的作用域. 一般来说,this总是指向调用某个方法的对象,但是使用call()和apply()方法时,就会改变this的指向. call()方法使

  • Javascript call及apply应用场景及实例

    一.作用及应用场景 call和apply是Function的方法,他的第一个参数是this,第二个是Function的参数.call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向.因为 JavaScript 的函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念.二者的作用完全一样,只是接受参数的方式不太一样. call 需要把参数按顺序传递进去,而 apply 则是把参数放在数组里.

  • JavaScript中的this/call/apply/bind的使用及区别

    一.this 1.什么是this this 关键字在大部分语言中都是一个重要的存在,JS中自然不例外,其表达的意义丰富多样甚至有些复杂,深刻理解this是学习JS.面向对象编程非常重要的一环. 2.this 代表什么 this代表函数(方法)执行的上下文环境(上下文,类似与你要了解一篇文章,了解文章的上下文你才能清晰的了解各种关系). 但在 JavaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变. 1.在方法中,this 表示该方法所属的对象. 2.如果单独使用,thi

  • javascript中call,apply,callee,caller用法实例分析

    本文实例讲述了javascript中call,apply,callee,caller用法.分享给大家供大家参考,具体如下: 实践一:call,apply 用来让一个对象去调用本不属于自己的方法,两者都可以传递参数,call的参数是列表形式,apply的参数是数组形式 var person = { "name":"Tom", "say":function(){ console.log("person say"); }, &quo

  • JS中apply()的应用实例分析

    本文实例讲述了JS中apply()的应用.分享给大家供大家参考,具体如下: 先从Math.max()函数说起,Math.max后面可以接收任意个参数,最后返回所有参数中的最大值. 比如: alert(Math.max(5,8));//8 alert(Math.max(5,7,3,1,9,2));//9 但是在很多情况下,我们需要找出数组中最大的元素. 比如: /* * 找出数组中最大的数 */ var arr = [1,4,9,6]; //alert(Math.max(arr));//NaN,这

随机推荐