返回顶部
首页 > 资讯 > 前端开发 > node.js >javascript怎么实现call、apply和bind方法
  • 563
分享到

javascript怎么实现call、apply和bind方法

2024-04-02 19:04:59 563人浏览 薄情痞子
摘要

本篇内容介绍了“javascript怎么实现call、apply和bind方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅

本篇内容介绍了“javascript怎么实现call、apply和bind方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

手写实现 call

ES3 版本

Function.prototype.myCall = function(thisArg){
    if(typeof this != 'function'){
        throw new Error('The caller must be a function')
    }
     if(thisArg === undefined || thisArg === null){
        thisArg = globalThis
    } else {
        thisArg = Object(thisArg)
    }   
    var args = []
    for(var i = 1;i < arguments.length;i ++){
        args.push('arguments[' + i + ']')
    }
    thisArg.fn = this
    var res = eval('thisArg.fn(' + args + ')')
    delete thisArg.fn
    return res
}

ES6 版本

Function.prototype.myCall = function(thisArg,...args){
    if(typeof this != 'function'){
        throw new Error('The caller must be a function')
    }
    if(thisArg === undefined || thisArg === null){
        thisArg = globalThis
    } else {
        thisArg = Object(thisArg)
    }
    thisArg.fn = this
    const res = thisArg.fn(...args)
    delete thisArg.fn
    return res
}

通过 call 调用函数的时候,可以通过传给 call  的 thisArg 指定函数中的 this。而只要使得函数是通过 thisArg 调用的,就能实现这一点,这就是我们的主要目标。

实现要点

  • 最终是通过函数去调用 myCall 的,所以 myCallcall 一样挂载在函数原型上。同时,也正因为是通过函数去调用 myCall 的,所以在 myCall 内部我们可以通过 this 拿到 myCall的调用者,也就是实际执行的那个函数。

  • 按理说,myCall 是挂载在函数原型上,当我们通过一个非函数去调用 myCall 的时候,肯定会抛出错误,那么为什么还要在 myCall 中检查调用者的类型,并自定义一个错误呢?这是因为,当一个调用者 obj = {} 是一个对象,但是继承自 Function 的时候(obj.__proto__ = Function.prototype),它作为一个非函数实际上也是可以调用 myCall 方法的,这时候如果不进行类型检查以确保它是个函数,那么后面直接将它当作函数调用的时候,就会抛出错误了

  • 传给 call 的 thisArg 如果是 null 或者 undefined,那么 thisArg 实际上会指向全局对象;如果 thisArg 是一个基本类型,那么可以使用 Object() 做一个装箱操作,将其转化为一个对象 —— 主要是为了确保后续可以以方法调用的方式去执行函数。那么可不可以写成 thisArg = thisArg ? Object(thisArg) : globalThis  呢?其实是不可以的,如果 thisArg 是布尔值 false,那么会导致 thisArg 最终等于 globalThis,但实际上它应该等于 Boolean {false}

  • 前面说过,可以在 myCall 里通过 this 拿到实际执行的那个函数,所以 thisArg.fn = this 相当于将这个函数作为 thisArg 的一个方法,后面我们就可以通过 thisArg 对象去调用这个函数了。

  • thisArg.fn = this 相当于是给 thisArg 增加了一个 fn 属性,所以返回执行结果之前要 delete 这个属性。此外,为了避免覆盖 thisArg 上可能存在的同名属性 fn,这里也可以使用 const fn = Symbol('fn') 构造一个唯一属性,然后 thisArg[fn] = this

  • ES3 版本和 es6 版本主要的区别在于参数的传递以及函数的执行上:

    • ES6 因为引入了剩余参数,所以不管实际执行函数的时候传入了多少个参数,都可以通过 args 数组拿到这些参数,同时因为引入了展开运算符,所以可以展开 args 参数数组,把参数一个个传递给函数执行

    • 但在 ES3 中没有剩余参数这个东西,所以在定义 myCall 的时候只接收一个 thisArg 参数,然后在函数体中通过 arguments 类数组拿到所有参数。我们需要的是 arguments 中除第一个元素(thisArg)之外的所有元素,怎么做呢?如果是 ES6,直接[...arguments].slice(1)就可以了,但这是 ES3,于是我们只能从索引 1 开始遍历 arguments,然后 push 到一个 args 数组中了。而且还要注意的是,这里 push 进去的是字符串形式的参数,这主要是为了方便后续通过 eval 执行函数的时候,将参数一个一个传递给函数。

    • 为什么必须通过 eval 才能执行函数呢?因为我们不知道函数实际上要接收多少个参数,况且也用不了展开运算符,所以只能构造一个可执行的字符串表达式,显式地传入函数的所有参数。

手写实现 apply

apply 的用法和 call 很类似,因此实现也很类似。需要注意的区别是,call 在接受一个 thisArg 参数之后还可以接收多个参数(即接受的是参数列表),而 apply 在接收一个 thisArg 参数之后,通常第二个参数是一个数组或者类数组对象:

fn.call(thisArg,arg1,arg2,...)
fn.apply(thisArg,[arg1,arg2,...])

如果第二个参数传的是 null 或者 undefined,那么相当于是整体只传了 thisArg 参数。

ES3 版本

Function.prototype.myApply = function(thisArg,args){
    if(typeof this != 'function'){
        throw new Error('the caller must be a function')
    } 
    if(thisArg === null || thisArg === undefined){
        thisArg = globalThis
    } else {
        thisArg = Object(thisArg)
    }
    if(args === null || args === undefined){
        args = []
    } else if(!Array.isArray(args)){
        throw new Error('CreateListFromArrayLike called on non-object')
    }
    var _args = []
    for(var i = 0;i < args.length;i ++){
        _args.push('args[' + i + ']')
    }
    thisArg.fn = this
    var res = _args.length ? eval('thisArg.fn(' + _args + ')'):thisArg.fn()
    delete thisArg.fn
    return res
}

ES6 版本

Function.prototype.myApply = function(thisArg,args){
    if(typeof thisArg != 'function'){
        throw new Error('the caller must be a function')
    } 
    if(thisArg === null || thisArg === undefined){
        thisArg = globalThis
    } else {
        thisArg = Object(thisArg)
    }
    if(args === null || args === undefined){
        args = []
    } 
    // 如果传入的不是数组,仿照 apply 抛出错误
    else if(!Array.isArray(args)){
        throw new Error('CreateListFromArrayLike called on non-object')
    }
    thisArg.fn = this
    const res = thisArg.fn(...args)
    delete thisArg.fn
    return res
}

实现要点

基本上和 call 的实现是差不多的,只是我们需要检查第二个参数的类型。

手写实现 bind

bind 也可以像 callapply 那样给函数绑定一个 this,但是有一些不同的要点需要注意:

  • bind 不是指定完 this 之后直接调用原函数,而是基于原函数返回一个内部完成了 this 绑定的新函数

  • 原函数的参数可以分批次传递,第一批可以在调用 bind 的时候作为第二个参数传入,第二批可以在调用新函数的时候传入,这两批参数最终会合并在一起,一次传递给新函数去执行

  • 新函数如果是通过 new 方式调用的,那么函数内部的 this 会指向实例,而不是当初调用 bind 的时候传入的 thisArg。换句话说,这种情况下的 bind 相当于是无效的

ES3 版本

这个版本更接近 MDN 上的 polyfill 版本。

Function.prototype.myBind = function(thisArg){
    if(typeof this != 'function'){
        throw new Error('the caller must be a function')
    }
    var fnToBind = this
    var args1 = Array.prototype.slice.call(arguments,1)
    var fnBound = function(){
        // 如果是通过 new 调用
        return fnToBind.apply(this instanceof fnBound ? this:thisArg,args1.concat(args2))     
    }
    // 实例继承
    var Fn = function(){}
    Fn.prototype = this.prototype
    fnBound.prototype = new Fn()
    return fnBound
}

ES6 版本

Function.prototype.myBind = function(thisArg,...args1){
    if(typeof this != 'function'){
        throw new Error('the caller must be a function')
    }
    const fnToBind = this
    return function fnBound(...args2){
        // 如果是通过 new 调用的
        if(this instanceof fnBound){
            return new fnToBind(...args1,...args2)
        } else {
            return fnToBind.apply(thisArg,[...args1,...args2])
        }
    }
}

实现要点

1.bind 实现内部 this 绑定,需要借助于 apply,这里假设我们可以直接使用 apply 方法

2.先看比较简单的 ES6 版本:

1). 参数获取:因为 ES6 可以使用剩余参数,所以很容易就可以获取执行原函数所需要的参数,而且也可以用展开运算符轻松合并数组。

2). 调用方式:前面说过,如果返回的新函数 fnBound 是通过 new 调用的,那么其内部的 this 会是 fnBound 构造函数的实例,而不是当初我们指定的 thisArg,因此 this instanceof fnBound会返回 true,这种情况下,相当于我们指定的 thisArg 是无效的,new 返回的新函数等价于 new 原来的旧函数,即 new fnBound 等价于 new fnToBind,所以我们返回一个 new fnToBind 即可;反之,如果 fnBound 是普通调用,则通过 apply 完成 thisArg 的绑定,再返回最终结果。从这里可以看出,bind 的 this 绑定,本质上是通过 apply 完成的。

3.再来看比较麻烦一点的 ES3 版本:

1). 参数获取:现在我们用不了剩余参数了,所以只能在函数体内部通过 arguments 获取所有参数。对于 myBind,我们实际上需要的是除开第一个传入的 thisArg 参数之外的剩余所有参数构成的数组,所以这里可以通过 Array.prototype.slice.call 借用数组的 slice 方法(arguments 是类数组,无法直接调用 slice),这里的借用有两个目的:一是除去 arguments 中的第一个参数,二是将除去第一个参数之后的 arguments 转化为数组(slice 本身的返回值就是一个数组,这也是类数组转化为数组的一种常用方法)。同样地,返回的新函数 fnBound 后面调用的时候也可能传入参数,再次借用 slice 将 arguments 转化为数组

2). 调用方式:同样,这里也要判断 fnBound 是 new 调用还是普通调用。在 ES6 版本的实现中,如果是 new 调用 fnBound,那么直接返回 new fnToBind(),这实际上是最简单也最容易理解的方式,我们在访问实例属性的时候,天然就是按照 实例 => 实例.__proto__ = fnToBind.prototype 这样的原型链来寻找的,可以确保实例成功访问其构造函数 fnToBInd 的原型上面的属性;但在 ES3 的实现中(或者在网上部分 bind 方法的实现中),我们的做法是返回一个 fnToBind.apply(this),实际上相当于返回一个 undefined 的函数执行结果,根据 new 的原理,我们没有在构造函数中自定义一个返回对象,因此 new 的结果就是返回实例本身,这点是不受影响的。这个返回语句的问题在于,它的作用仅仅只是确保 fnToBind 中的 this 指向 new fnBound 之后返回的实例,而并没有确保这个实例可以访问 fnToBind 的原型上面的属性。实际上,它确实不能访问,因为它的构造函数是 fnBound 而不是 fnToBind,所以我们要想办法在 fnBound 和 fnToBind 之间建立一个原型链关系。这里有几种我们可能会使用的方法:

 // 这里的 this 指的是 fnToBind
 fnBound.prototype = this.prototype

这样只是拷贝了原型引用,如果修改 fnBound.prototype,则会影响到 fnToBind.prototype,所以不能用这种方法

// this 指的是 fnToBind
fnBound.prototype = Object.create(this.prototype)

通过 Object.create 可以创建一个 __proto__ 指向  this.prototype 的实例对象,之后再让 fnBound.prototype 指向这个对象,则可以在 fnToBind 和 fnBound 之间建立原型关系。但由于 Object.create 是 ES6 的方法,所以无法在我们的 ES3 代码中使用。

// this 指的是 fnToBind
const Fn = function(){}
Fn.prototype = this.prototype
fnBound.prototype = new Fn()

这是上面代码采用的方法:通过空构造函数 Fn 在 fnToBind 和 fnBound 之间建立了一个联系。如果要通过实例去访问 fnToBind 的原型上面的属性,可以沿着如下原型链查找:

实例 => 实例.__proto__ = fnBound.prototype = new Fn() => new Fn().__proto__ = Fn.prototype = fnToBind.prototype

“javascript怎么实现call、apply和bind方法”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

--结束END--

本文标题: javascript怎么实现call、apply和bind方法

本文链接: https://www.lsjlt.com/news/73058.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • javascript怎么实现call、apply和bind方法
    本篇内容介绍了“javascript怎么实现call、apply和bind方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅...
    99+
    2024-04-02
  • JavaScript手写call,apply,bind方法
    目录前言改写this实现思路前期准备手写call方法手写apply方法手写bind方法前言 改变this指向在书写业务的时候经常遇到,我们经常采用以下方法进行改写 使用作用声明变量存...
    99+
    2024-04-02
  • JavaScript中bind、call、apply方法怎么使用
    这篇文章主要讲解了“JavaScript中bind、call、apply方法怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript中bind、call、apply方法怎么...
    99+
    2023-06-30
  • Javascript实现call,bind,apply的代码怎么写
    这篇文章主要介绍了Javascript实现call,bind,apply的代码怎么写的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Javascript实现call,bind,apply的代码怎么写文章都会有所收...
    99+
    2023-06-29
  • 怎么使用Javascript中apply、call、bind
    本篇内容介绍了“怎么使用Javascript中apply、call、bind”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读...
    99+
    2024-04-02
  • JavaScript中call、apply、bind实现原理详解
    目录前言call用法实现简单的实现版本:升级版:apply用法实现bind用法基本版:升级版:总结前言 众所周知 call、apply、bind 的作用都是‘改变'作用域,但是网上对...
    99+
    2024-04-02
  • JavaScript中call,apply,bind的区别与实现
    目录区别call实现apply实现bind实现bind 返回的函数 作为普通函数调用 代码实现bind 返回的函数 作为构造函数调用bind代码最终实现区别 call、apply、b...
    99+
    2024-04-02
  • 如何使用JS简单实现apply、call和bind方法
    这篇文章主要讲解了“如何使用JS简单实现apply、call和bind方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何使用JS简单实现apply、call和bind方法”吧!1.方法介...
    99+
    2023-06-29
  • 一文搞懂JavaScript中bind,apply,call的实现
    目录bind、call和apply的用法bindcall&apply实现bind实现call和apply总结bind、call和apply都是Function原型链上面的方法...
    99+
    2024-04-02
  • Javascript动手实现call,bind,apply的代码详解
    1.检查当前调用的是否为函数 2.如果当前没有传入指向的this,则赋值为window 3.将fn指向当前调用的函数 4.获取传入的参数 5.将参数传入fn进行调用 6.将对象上的f...
    99+
    2024-04-02
  • JavaScript实现手写call/apply/bind的示例代码
    目录callcall的作用是啥总结applybind优化总结还记得之前面试得物的时候,上来就是一道手写bind,当时咱也不知道啥情况,也没准备什么手写的题目,就这样轻轻松松的挂了 现...
    99+
    2023-02-08
    JavaScript实现call apply bind JavaScript call apply bind JavaScript call JavaScript apply JavaScript b
  • 使用JS简单实现apply、call和bind方法的实例代码
    目录1.方法介绍2.apply、call和bind方法的实现2.1.apply的实现2.2.call的实现2.3.bind的实现总结1.方法介绍 apply、call和bind都是系...
    99+
    2024-04-02
  • JS中call、apply和bind函数手写实现demo的方法是什么
    本篇内容介绍了“JS中call、apply和bind函数手写实现demo的方法是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!JavaS...
    99+
    2023-07-05
  • JavaScript函数之call、apply以及bind方法案例详解
    总结 1、相同点 都能够改变目标函数执行时内部 this 的指向 方法的第一个参数用于指定函数执行时内部的 this 值 支持向目标函数传递任意个参数 ...
    99+
    2024-04-02
  • JS中call()、apply()和bind()函数怎么使用
    今天小编给大家分享一下JS中call()、apply()和bind()函数怎么使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下...
    99+
    2023-07-04
  • 原生js如何实现call,apply以及bind
    1、实现call 步骤: 将函数设为对象的属性; 指定this到函数,并传入给定参数执行函数; 执行之后删除这个函数; 如果不传入参数,默认指向w...
    99+
    2024-04-02
  • JS 函数的 call、apply 及 bind 超详细方法
    目录JS 函数的 call、apply 及 bind 方法一、call() 方法1、call()方法的模拟实现二、apply() 方法1、apply()方法的模拟实现 三、bind(...
    99+
    2024-04-02
  • 再谈JavaScript中bind、call、apply三个方法的区别与使用方式
    call的基本使用 var ary = [12, 23, 34]; ary.slice(); 以上两行简单的代码的执行过程为:ary这个实例通过原型链的查找机制找到Array.pro...
    99+
    2024-04-02
  • Javascript 的caller,callee,call,apply怎么使用
    本篇内容主要讲解“Javascript 的caller,callee,call,apply怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Javascript 的caller,callee...
    99+
    2023-06-03
  • JavaScript的call与apply怎么定义使用
    这篇文章主要介绍“JavaScript的call与apply怎么定义使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JavaScript的call与apply怎么定义使用”文章能帮助大家解决问题。...
    99+
    2023-06-30
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作