关于apply、bind、call

最新推荐文章于 2025-08-09 20:51:19 发布

原创最新推荐文章于 2025-08-09 20:51:19 发布 · 194 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

前端JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了JavaScript中函数的三种调用方式：apply(), call()和bind()。通过实例解析了它们的区别和使用场景，特别是它们如何改变函数内部的this指向以及参数传递的不同方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

apply() 方法调用一个具有给定this值的函数，以及以一个数组（或类数组对象）的形式提供的参数。
bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。
call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。

  var name = 'a', age = 0, type = 'A'
  function fn () {
    console.log( this.name,'年龄是 ', this.age, '血型是 ', this.type );
  }
  var y = {
    name: 'YMAN',
    age: 25,
    type: 'B',
    fn: fn
  }
  fn() // expected output: a 年龄是  0 血型是  A
  fn.call(y) // expected output:  YMAN 年龄是  25 血型是  B
  fn.apply(y) // expected output:  YMAN 年龄是  25 血型是  B
  fn.bind(y)() // expected output:  YMAN 年龄是  25 血型是  B

传参：call( )方法的作用和 apply( ) 方法类似，区别就是call( )方法接受的是参数列表，而apply( )方法接受的是一个参数数组。

  var name = 'a', age = 0, type = 'A'
  var x = {
    name: 'XMAN',
    age: 24,
    type: this.type
  }
  function todo (para1, para2) {
    console.log(this.name,'年龄是:', this.age, '血型是:', this.type, '爱好:', para1, para2)
  }
  todo('篮球', '足球')            //  a 年龄是: 0 血型是: A 爱好: 篮球 足球
  todo.call(x, '篮球', '足球')    //  XMAN 年龄是: 24 血型是: A 爱好: 篮球 足球
  todo.call(x, ['篮球', '足球'])  //  XMAN 年龄是: 24 血型是: A 爱好: ["篮球", "足球"] undefined
  todo.apply(x, '篮球', '足球')   //  报错，apply不能这样的，其第二个参数得是一个数组或者类数组对象
  todo.apply(x, ['篮球', '足球']) //  XMAN 年龄是: 24 血型是: A 爱好: 篮球 足球
  todo.bind(x, '篮球', '足球')()  //  XMAN 年龄是: 24 血型是: A 爱好: 篮球 足球