JavaScript中call、apply、bind实现原理详解

更新时间：2021年06月28日 09:22:05 作者：ClyingDeng

其实在很多文章都会写call，apply，bind,但个人觉着如果不弄懂原理,是很难理解透的,所以这篇文章主要介绍了JavaScript中call、apply、bind实现原理的相关资料,需要的朋友可以参考下

前言

众所周知 call、apply、bind 的作用都是‘改变'作用域，但是网上对这这‘改变'说得含糊其辞，并未做详细说明，‘改变'是直接替换作用域？谁替换谁？怎么产生效果？这些问题如果不理解清楚，就算看过手写实现，估计也记不长久

所以本文介绍了call、apply、bind的用法和他们各自的实现原理。

call

call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。

即：可以改变当前函数的this指向；还会让当前函数执行。

用法

function fun() {
  console.log(this.name, arguments)
}
let obj = { name: 'clying' }
fun.call(obj, 'deng', 'deng')
// clying [Arguments] { '0': 'deng', '1': 'deng' }

实现

call和apply的实现，都是使用将函数放到字面量obj的某个属性中，使函数中的this指向obj这个字面量对象。

简单的实现版本：

Function.prototype.mycall = function (context) {
  context = (context == null || context == undefined) ? window : new Object(context)
  context.fn = this
  context.fn()
  delete context.fn
}

给函数原型添加mycall方法，创建一个上下文对象context，如果传入的对象不存在时，将指向全局window。通过给context添加fn属性，context的fn引用调用该方法的函数fun，并执行fun。执行完成之后删除该属性fn。

当中需要先获取传入的参数，那它变成字符串数组。

执行方法使用的是eval函数，再通过eval计算字符串，并执行其中代码，返回计算结果。

升级版：

给call中传入参数。

Function.prototype.mycall = function (context) {
  context = (context == null || context == undefined) ? window : new Object(context)
  context.fn = this
  let arr = []
  for (let i = 1; i < arguments.length; i++) {
    arr.push('argument[' + i + ']') //  ["arguments[1]", "arguments[2]"]
  }
  let r = eval('context.fn(' + arr + ')') // 执行函数fun，并传入参数
  delete context.fn
  return r
}

此外，也可以通过解构的语法来实现call。

Function.prototype.mycall = function (context, ...args) {
  context = (context == null || context == undefined) ? window : new Object(context)
  context.fn = this
  context.fn(...args)
  delete context.fn
}

如果想要能够多次调用call方法，可以将context.fn(...args)保存到变量中，最后返回即可。

Function.prototype.mycall = function (context, ...args) {
  context = (context == null || context == undefined) ? window : new Object(context)
  context.fn = this
  let r = context.fn(...args)
  delete context.fn
  return r
}

apply

与call方法类似，call方法接收的是一个参数列表，而apply方法接收的是一个包含多个参数的数组。

用法

将函数中的this指向传入的第一个参数，第二个参数为数组。

function fun() {
  console.log(this.name, arguments);
}
let obj = {
  name: 'clying'
}
fun.apply(obj, [22, 1])
// clying Arguments(2) [22, 1]

实现

自己实现一个apply方法myapply。实现方法与call类似，不过在接收参数时，可以使用一个args作为传入的第二个参数。直接判断如果未传入第二个参数，直接执行函数；否则使用eval执行函数。

Function.prototype.myapply = function (context, args) {
 context = (context == null || context == undefined) ? window : new Object(context)
  context.fn = this
  if(!args) return context.fn()
  let r = eval('context.fn('+args+')')
  delete context.fn
  return r
}

bind

bind() 方法创建一个新的函数，不自动执行，需要手动调用bind() 。这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

用法

将obj绑定到fun函数的this上，函数fun可以使用obj内部的属性，和传入的变量。

function fun() {
  console.log(this.name, arguments);
}
let obj = {
  name: 'clying'
}
let b = fun.bind(obj,2)
b(3)
// clying Arguments(2) [2, 3]

此外，bind方法绑定的函数还可以new一个实例，不过此时的this会发生改变。

升级版-使用原型属性用法：

function fun() {
  console.log(this.name, arguments);
}
let obj = {
  name: 'clying'
}
fun.prototype.age = 23
let b = fun.bind(obj, 3)
let instance = new b(4)
console.log(instance.age);
//undefined Arguments(2) [3, 4]
// 23

实现

基本版：

bind的实现可以基于call和apply的基础上实现。

因为bind不是立即执行的，所以可以通过返回一个函数，让用户手动执行。在返回函数中利用call或者apply传入指定的this对象和参数。

apply实现bind

Function.prototype.mybind = function (context) {
  let that = this
  let bindargs = Array.prototype.slice.call(arguments, 1)
  return function () {
    let args = Array.prototype.slice.call(arguments)
    return that.apply(context, bindargs.concat(args))
  }
}

利用apply方法，主要是在获取处理bind传入的参数，以及用户执行函数传入的参数。利用Array原型方法的slice方法，截取所需的参数。

在获取bind传入的参数时，需要从第二个参数开始截取，所以开始位置为1。

call实现bind

Function.prototype.mybind = function (context, ...args1) {
  let that = this
  return function (...args2) {
    return that.call(context, ...args1, ...args2)
  }
}

call实现直接将参数拼接call方法的后面即可。

升级版：

bind除了可以改变this指向、用户可以在bind后面传入参数也可以在用户执行时传入参数外。还可以让执行函数进行new操作。

当一个绑定函数是用来构建一个值的，原来提供的 this 就会被忽略。不过提供的参数列表仍然会插入到构造函数调用时的参数列表之前。

apply

Function.prototype.mybind = function (context) {
  let that = this
  let bindargs = Array.prototype.slice.call(arguments, 1)
  function fBind() {
    let args = Array.prototype.slice.call(arguments)
    // 如果使用的是new，那么this会指向fBind实例，this作为当前实例传入 不是的话，使用context上下文对象
    return that.apply(this instanceof fBind ? this : context, bindargs.concat(args))
  }
  return fBind
}

在使用new操作符时，注意的是需要改变this的指向问题，如果是new，那么this指向的是实例，不使用new则指向bind当前传入的第一个参数。

此外，还牵扯到原函数可以添加自身方法属性。如果想要能够使用fun自身的原型方法还需要使用fBind.prototype = this.prototype，实现原型共用。但是对于引用类型属性值共享，不能在不改变其他实例情况下改变（一个原型方法或属性改变，所有引用的都会发生改变）。

Function.prototype.mybind = function (context) {
  let that = this
  let args = Array.prototype.slice.call(arguments, 1)
  function fBind() { // 执行bind函数
    let bindargs = Array.prototype.slice.call(arguments)
    return that.apply(this instanceof fBind ? this : context, args.concat(bindargs))
  }
  function Fn(){} // 两个类的原型并未公用，而是通过原型链的方式找到该原型方法
  Fn.prototype = this.prototype
  fBind.prototype = new Fn()
  return fBind
}

对于上述情况，可以使用一个函数中间件的形式，利用原型链去找到原函数原型方法或属性。

call

call与apply的差别只是处理参数的不同，其他均类似。

Function.prototype.mybind = function (context, ...args1) {
  let that = this
  function fBind(...args2) {
    return that.call(this instanceof fBind ? this : context, ...args1, ...args2)
  }
  function Fn() { }
  Fn.prototype = this.prototype
  fBind.prototype = new Fn()
  return fBind
}

总结

到此这篇关于JavaScript中call、apply、bind实现原理的文章就介绍到这了,更多相关call、apply、bind原理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

用JavaScript隐藏控件的方法
用JavaScript隐藏控件的方法有两种，分别是通过设置控件的style的“display”和“visibility”属性。
2009-09-09
JS动态创建DOM元素的方法
这篇文章主要介绍了JS动态创建DOM元素的方法,涉及javascript动态创建DOM元素及DOM元素事件绑定与删除的相关技巧,需要的朋友可以参考下
2015-06-06
快速解决select2在bootstrap模态框中下拉框隐藏的问题
今天小编就为大家分享一篇快速解决select2在bootstrap模态框中下拉框隐藏的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
浅析如何在Bash中调用Node运行JS文件进行数据通信
这篇文章主要来和大家探讨在 Bash 中调用 Node 运行 JS 文件时如何进行数据通信,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2024-03-03
JS实现简单tab选项卡切换
这篇文章主要为大家详细介绍了JS实现简单tab选项卡切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-10-10
js前端如何写一个精确的倒计时代码
关于写倒计时大家可能都都比较熟悉，使用 setTimeout 或 setInterval 就可以搞定。几秒钟或者几分钟的倒计时这样写没有问题，但是如果是长时间的倒计时，这样写就会不准确
2019-10-10
利用JavaScript编写一个简单的1024小游戏
在每年的10月24日,我们都会庆祝程序员节,这是一个向所有辛勤工作、创造出无数令人惊叹应用和系统的程序员们致敬的日子,为了纪念这个特殊的日子,我们将通过编写一个简单的1024小游戏来向所有程序员们表示敬意,本文将详细解释如何使用JavaScript编写这个小游戏
2023-10-10
使用Fuse.js实现高效的模糊搜索功能
在现代 Web 应用程序中,实现高效的搜索功能是至关重要的,Fuse.js 是一个强大的 JavaScript 库,它提供了灵活的模糊搜索和文本匹配功能,使您能够轻松实现出色的搜索体验,文中代码示例讲解的非常详细,需要的朋友可以参考下
2024-01-01
javascript跳转与返回和刷新页面的实例代码
这篇文章主要介绍了javascript跳转与返回和刷新页面的实例代码，简单介绍了javascript中window.open()与window.location.href的区别，感兴趣的朋友一起看看吧
2019-11-11
微信小程序预览二进制流文件的方法
这篇文章主要为大家详细介绍了微信小程序预览二进制流文件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08