JS 函数的 call、apply 及 bind 超详细方法

目录
  • JS 函数的 call、apply 及 bind 方法
    • 一、call() 方法
      • 1、call()方法的模拟实现
    • 二、apply() 方法
      • 1、apply()方法的模拟实现
    • 三、bind() 方法
      • 1、bind() 方法的模拟实现
    • 四、总结

JS 函数的 call、apply 及 bind 方法

一、call() 方法

调用 call() 方法会立即执行目标函数，同时改变函数内部 this 的指向。this 指向由方法的第一个参数决定，后面逐个列举的任意个参数将作为目标函数的参数一一对应传入。

/* 正常模式 */

let obj = {
  sum(a, b) {
    console.log(this)
    return a + b
  }
}

// 执行 sum 函数的 apply、bind 方法，打印的 this 同下
obj.sum.call()  // 打印 window
obj.sum.call(undefined, 1, 2)  // 打印 window
obj.sum.call(null, 1, 2)  // 打印 window

/* 严格模式 */
'use strict'

// 执行 sum 函数的 apply、bind 方法，打印的 this 同下
obj.sum.call()  // 打印 undefined
obj.sum.call(undefined, 1, 2)  // 打印 undefined
obj.sum.call(null, 1, 2)  // 打印 null

1、call()方法的模拟实现

关键点：

  • myCall() 方法被添加在 Function 原型对象上，目标函数调用该方法时，myCall() 方法内部的 this 将指向目标函数。
  • 将目标函数作为 context 对象的方法来执行，由此目标函数内部的 this 将指向 context 对象。
  • 从 context 对象中删除目标函数
  • 使用扩展运算符 ... 处理传入目标函数的参数

call()、apply()、bind() 方法的模拟实现中，对于不传第一个参数或者传递 undefined、null 时，这里在 JS 正常模式和严格模式下做了统一处理，即目标函数内部的 this 均指向 window 对象。

代码如下：

Function.prototype.myCall = function (context, ...args) {
  if (context === undefined || context === null) {
    context = window
  }
  // 下面这行为核心代码
  context.fn = this
  const result = context.fn(...args)
  delete context.fn
  return result
}

let obj1 = {
  basicNum: 1,
  sum(a, b) {
    console.log(this)
    return this.basicNum + a + b
  }
}
let obj2 = {
  basicNum: 9
}
console.log(obj1.sum.call(obj2, 2, 3))  // 14
console.log(obj1.sum.myCall(obj2, 2, 3))  // 14

二、apply() 方法

调用 apply() 方法会立即执行目标函数，同时改变函数内部 this 的指向。this 指向由方法的第一个参数决定，第二个参数是一个参数数组或 arguments 对象，各数组元素或 arguments 对象表示的各参数将作为目标函数的参数一一对应传入。

1、apply()方法的模拟实现

关键点：

  • myApply() 方法被添加在 Function 原型对象上，目标函数调用该方法时，myApply() 方法内部的 this 将指向目标函数。
  • 将目标函数作为 context 对象的方法来执行，由此目标函数内部的 this 将指向 context 对象。
  • 从 context 对象中删除目标函数
  • 使用扩展运算符 ... 处理传入目标函数的参数

代码如下：

Function.prototype.myApply = function (context, args) {
  if (context === undefined || context === null) {
    context = window
  }
  // 下面这行为核心代码
  context.fn = this
  const result = context.fn(...args)
  delete context.fn
  return result
}

console.log(obj1.sum.apply(obj2, [2, 3]))  // 14
console.log(obj1.sum.myApply(obj2, [2, 3]))  // 14

三、bind() 方法

  • 调用 bind() 方法将返回一个新函数——目标函数的拷贝，该函数内部的 this 指向方法的第一个参数，后面逐个列举的任意个参数将作为目标函数的参数一一对应传入。之后执行新函数相当于执行了目标函数。
  • bind() 方法实现了函数柯里化，因此可以分两次向目标函数传递参数，第一次的参数列举在 bind() 方法首参后面，第二次的参数列举在新函数中。

1、bind() 方法的模拟实现

关键点：

  • myBind() 方法被添加在 Function 原型对象上，目标函数调用该方法时，myBind() 方法内部的 this 将指向目标函数。
  • 将目标函数作为 context 对象的方法来执行，由此目标函数内部的 this 将指向 context 对象。
  • 从 context 对象中删除目标函数
  • 使用扩展运算符 ... 处理传入目标函数的初始参数、后续参数。

代码如下：

Function.prototype.myBind = function (context, ...initArgs) {
  if (context === undefined || context === null) {
    context = window
  }
  // 缓存 this 值
  const _this = this
  return function (...args) {
    // 下面这行为核心代码
    context.fn = _this
    const result = context.fn(...initArgs, ...args)
    delete context.fn
    return result
  }
}

console.log(obj1.sum.bind(obj2, 2)(3))  // 14
console.log(obj1.sum.myBind(obj2, 2)(3))  // 14

四、总结

三个方法的相同点与不同点：

相同点：
都能够改变目标函数执行时内部 this 的指向
方法的第一个参数用于指定函数执行时内部的 this 值
支持向目标函数传递任意个参数
若不向方法的第一个参数传值或者传递 undefined、null，则在 JavaScript 正常模式下，目标函数内部的 this 指向 window 对象，严格模式下，分别指向 undefined、null。

区别：
apply() 方法可接收两个参数，而 call() 和 bind() 方法则可接收多个参数。
apply() 方法向目标函数传递参数时只需将参数数组或 arguments 对象作为方法的第二个参数即可，而 call() 和 bind() 方法则需要将传参逐个列举在方法的一个参数后面。
调用 call() 和 apply() 方法时会立即执行目标函数，而 bind() 方法则不会，它将返回一个新函数——目标函数的拷贝，该函数内部的 this 指向 bind() 方法的第一个参数，之后执行新函数相当于执行了目标函数。
只有 bind() 方法实现了函数柯里化，因此可以分两次向目标函数传递参数。

以上就是JS 函数的 call、apply 及 bind 超详细方法的详细内容，更多关于JS 函数的 call、apply 及 bind 方法的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • javascript中apply/call和bind的使用

    fun.apply(context,[argsArray]) 立即调用fun,同时将fun函数原来的this指向传入的新context对象,实现同一个方法在不同对象上重复使用. context:传入的对象,替代fun函数原来的this: argsArray:一个数组或者类数组对象,其中的数组参数会被展开作为单独的实参传给 fun 函数,需要注意参数的顺序. fun.call(context,[arg1],[arg2],[-]) 同apply,只是参数列表不同,call的参数需要分开一个一个传入.

  • 深入理解JavaScript中的call、apply、bind方法的区别

    深入理解JavaScript中的call、apply、bind方法的区别

    在JavaScript 中,this的指向是动态变化的,很可能在写程序的过程中,无意中破坏掉this的指向,所以我们需要一种可以把this的含义固定的技术,于是就有了call,apply 和bind这三个方法,来改变函数体内部 this 的指向,因为函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念 apply.call apply:应用某一对象的一个方法,用另一个对象替换当前对象 call:调用一个对象的一个方法,以另一个对象替换当前对象 function pers

  • Javascript中call，apply，bind方法的详解与总结

    以下内容会分为如下小节: 1.call/apply/bind方法的来源 2.Function.prototype.call() 3.Function.prototype.apply() 3.1:找出数组中的最大数 3.2:将数组的空元素变为undefined 3.3:转换类似数组的对象 4.Function.prototype.bind() 5.绑定回调函数的对象 6.call,apply,bind方法的联系和区别 1.call/apply/bind方法的来源 首先,在使用call,apply,

  • JavaScript函数之call、apply以及bind方法案例详解

    总结 1.相同点 都能够改变目标函数执行时内部 this 的指向 方法的第一个参数用于指定函数执行时内部的 this 值 支持向目标函数传递任意个参数 若不向方法的第一个参数传值或者传递 undefined.null,则在 JavaScript 正常模式下,目标函数内部的 this 指向 window 对象,严格模式下,分别指向 undefined.null. 2.区别 apply() 方法可接收两个参数,而 call() 和 bind() 方法则可接收多个参数. apply() 方法向目标函数

  • javascript中call,apply,bind函数用法示例

    本文实例讲述了javascript中call,apply,bind函数用法.分享给大家供大家参考,具体如下: 一.call函数 a.call(b); 简单的理解:把a对象的方法应用到b对象上(a里如果有this,会指向b) call()的用法:用在函数上面 var Dog=function(){ this.name="汪星人"; this.shout=function(){ alert(this.name); } }; var Cat=function(){ this.name=&qu

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

    目录 前言 call 用法 实现 简单的实现版本: 升级版: apply 用法 实现 bind 用法 基本版: 升级版: 总结 前言 众所周知 call.apply.bind 的作用都是'改变'作用域,但是网上对这这'改变'说得含糊其辞,并未做详细说明,'改变'是直接替换作用域?谁替换谁?怎么产生效果?这些问题如果不理解清楚,就算看过手写实现,估计也记不长久 所以本文介绍了call.apply.bind的用法和他们各自的实现原理. call call() 方法使用一个指定的 this 值和单独给

  • 如何使用50行javaScript代码实现简单版的call,apply,bind

    在实现自己的call,apply,bind前,需要复习一下this. 所谓的this其实可以理解成一根指针: 其实 this 的指向,始终坚持一个原理:this 永远指向最后调用它的那个对象,这就是精髓.最关键所在 this的四种指向: 当this所在的函数被普通调用时,指向window,如果当前是严格模式,则指向undefined function test() { console.log(this); }; test(); 指向window 输出下面的代码: // Window {speec

  • Javascript中apply、call、bind的巧妙使用

    apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. JavaScript 的一大特点是,函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念. 先来一个栗子: function fruits() {} fruits.prototype = { color: "red", say: function() { console

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

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

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

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

  • 全面解析JavaScript中apply和call以及bind(推荐)

    函数调用方法 在谈论JavaScript中apply.call和bind这三兄弟之前,我想先说下,函数的调用方式有哪些: •作为函数 •作为方法 •作为构造函数 •通过它们的call()和apply()方法间接调用 前面的三种调用方法,我们都知道且不在这篇文章的讨论范围内,就不说了. 下面我们来说说这第四种调用方法 通过call()和apply()间接调用 其实,我们可以将这两个函数看做是某个对象的方法,通过调用方法的方式来间接调用函数: function f(){} f.call(o); f.

  • 关于JS中的apply,call,bind的深入解析

    在Javascript中,Function是一种对象.Function对象中的this指向决定于函数被调用的方式.使用apply,call 与 bind 均可以改变函数对象中this的指向,在说区别之前还是先总结一下三者的相似之处: 1.都是用来改变函数的this对象的指向的. 2.第一个参数都是this要指向的对象. 3.都可以利用后续参数传参. call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一

  • javascript中apply、call和bind的使用区别

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

  • 实例讲解JavaScript中call、apply、bind方法的异同

    实例讲解JavaScript中call、apply、bind方法的异同

    以实例切入,讲解JavaScript中call,apply,bind方法,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function MAN(name, sex, age) { this.name =

  • 浅谈JavaScript中的apply/call/bind和this的使用

    fun.apply(context,[argsArray]) 立即调用fun,同时将fun函数原来的this指向传入的新context对象,实现同一个方法在不同对象上重复使用. context:传入的对象,替代fun函数原来的this: argsArray:一个数组或者类数组对象,其中的数组参数会被展开作为单独的实参传给 fun 函数,需要注意参数的顺序. fun.call(context,[arg1],[arg2],[-]) 同apply,只是参数列表不同,call的参数需要分开一个一个传入.

  • 详解JS中的this、apply、call、bind(经典面试题)

    这又是一个面试经典问题~/(ㄒoㄒ)/~~也是 ES5中众多坑中的一个,在 ES6 中可能会极大避免 this 产生的错误,但是为了一些老代码的维护,最好还是了解一下 this 的指向和 call.apply.bind 三者的区别. this 的指向 在 ES5 中,其实 this 的指向,始终坚持一个原理:this 永远指向最后调用它的那个对象,来,跟着我朗读三遍:this 永远指向最后调用它的那个对象,this 永远指向最后调用它的那个对象,this 永远指向最后调用它的那个对象.记住这句话

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

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

随机推荐