JavaScript 中 call、apply、bind 用法和区别

wind3110991 发布于2019-08-23 16:06 / 2393人阅读

摘要：和类似，都是调用函数，并指定函数的值和参数，区别在于传入参数是通过参数列表的形式，传入参数是通过数组的形式方法与前两个不同，它创建一个新的函数，在调用新函数时，会调用原函数，并指定原函数的值和参数。执行的时候并没有调用函数。

简介

JavaScript 中有三个方法Function.prototype.call()、Function.prototype.apply()和Function.prototype.bind()可以用来指定函数 this 值。call() 和 apply() 类似，都是调用函数，并指定函数的 this 值thisArg和参数，区别在于call()传入参数是通过参数列表的形式arg1, arg2, ...，apply()传入参数是通过数组的形式[arg1, arg2, ...]：

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

bind()方法与前两个不同，它创建一个新的函数，在调用新函数时，会调用原函数，并指定原函数的 this 值和参数。bind() 执行的时候并没有调用函数。bind()传入参数的方式和call()一样，都是用参数列表：

fucntion.bind(thisArg, arg1, arg2, ...)

用法 call()

使用call()调用父类构造函数来实现继承，也可以用apply()，只不过传参方式略有区别：

// 使用 call 实现继承
var Pet = function (name, age) {
  this.name = name
  this.age = age
}
var Cat = function (name, age, color) {
  Pet.call(this, name, age)
  this.color = color
}
var cat = new Cat("Garfield", 1, "orange")
console.log(cat.name)  // Garfield
console.log(cat.age)  // 1
console.log(cat.color)  // orange

// 使用 apply 实现继承：
var Dog = function (name, age, size) {
  Pet.apply(this, [name, age])
  this.size = size
}

当调用一个对象的方法时，方法中 this 指向的是对象本身，用call()改变方法的 this 值：

var utils = {
  setName: function (name) {
    this.name = name
  }
}
// 使用 call 指定 setName 中的 this 指向自己
var Person = function (name) {
  utils.setName.call(this, name)
}
var p = new Person("John")
console.log(p.name)  // "John"

apply()

apply()方法除了用来指定函数 this 值，还可以用来传递参数。例如，Math.max()允许传入多个参数，求它们的最大值，可以用apply()方法将数组元素作为参数传递给Math.max()方法：

// 使用循环求最大值
var numbers = [1, 0, 0, 8, 6], max = -Infinity
for (var i = 0; i < numbers.length; i++) {
  max = Math.max(numbers[i], max)
}

// 使用 apply 求最大值，代码更简洁
var numbers = [1, 0, 0, 8, 6]
max = Math.max.apply(null, numbers)

// 使用 apply 给数组添加元素
var numbers = [1, 0, 0, 8, 6], arr = []
arr.push.apply(arr, numbers)

另外，因为 JS 引擎有参数长度的限制，如果参数数组太长，可能会造成程序异常。所以，对于超长参数数组，应切分成更小的尺寸，分多次调用该方法。

bind()

在给setTimeout和setInterval传入函数时，函数中 this 指向的是全局 window 对象。使用bind()方法，重新指定 this 值：

var Person = function (name) {
  this.name = name
}
Person.prototype.say = function () {
  setTimeout(function () {
    console.log("My name is " + this.name)
  }.bind(this))
}
var p = new Person("John")
p.say()  // My name is John

在给 Dom 对象添加监听函数时，监听函数作为 Dom 对象的一个方法，函数中 this 指向的是 Dom 对象。使用bind()方法，重新指定 this 值，使用箭头函数也可以达到同样的效果：

var fakeDom = { a: "fakeDom" }
var addEvent = function () {
  this.a = "addEvent"
  fakeDom.onClick = function () {
    console.log(this.a)
  }
  fakeDom.onClickBind = function () {
    console.log(this.a)
  }.bind(this)
  fakeDom.onClickArrow = () => {
    console.log(this.a)
  }
}
addEvent()
fakeDom.onClick()  // "fakeDom"
fakeDom.onClickBind()  // "addEvent"
fakeDom.onClickArrow()  // "addEvent"

使用bind()绑定参数后，新函数只需要传入剩余参数：

var add = function (a, b) {
  return a + b
}
var add5 = add.bind(null, 5)
console.log(add5(3))  // 8

云服务器 GPU云服务器 JS中bind、call和apply的作 apply与call的区别 js中的call和apply javascript_bind用法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102689.html

JavaScript 函数作用域、执行环境(this)、call、apply、bind 的用法

摘要：什么是函数的作用域函数作用域在中，作用域为可访问变量，对象，函数的集合。函数作用域作用域在函数内修改。与函数又有什么关系呢对象是在运行时基于函数的执行环境绑定的。什么是函数的作用域函数作用域：在 JavaScript 中，作用域为可访问变量，对象，函数的集合。JavaScript 函数作用域: 作用域在函数内修改。 this 与函数又有什么关系呢？ this对象是在运行时基于函数的...

1fe1se 2019-08-26 13:47 评论0 收藏0
关于javascript中的bind、call、apply等函数的用法

摘要：其实它们都很简单，但是在处理一些与相关的函数的时候，用来改变函数中的指向，却是必不可少的工具，所以必须掌握好它们的用法。关于javascript中的bind、call、apply等函数的用法我GitHub上的菜鸟仓库地址：点击跳转查看其他相关文章文章在我的博客上的地址：点击跳转前面的文章已经说到this的指向了，那么这篇文章就要说一说和this相关的三个...

lordharrd 2019-08-22 10:53 评论0 收藏0
理解 JavaScript call()/apply()/bind()

摘要：理解文章中已经比较全面的分析了在中的指向问题，用一句话来总结就是的指向一定是在执行时决定的，指向被调用函数的对象。与和直接执行原函数不同的是，返回的是一个新函数。这个新函数包裹了原函数，并且绑定了的指向为传入的。理解 JavaScript this 文章中已经比较全面的分析了 this 在 JavaScript 中的指向问题，用一句话来总结就是：this 的指向一定是在执行时决定的，...

duan199226 2019-08-23 14:27 评论0 收藏0
call、apply、bind的用法小结

摘要：新手经常犯的一个错误是将一个方法从对象中拿出来，然后再调用，希望方法中的是原来的对象。如果不做特殊处理的话，一般会丢失原来的对象。 call、apply、bind是JavaScript中Function函数自带的方法，主要用于改变this的指向区别： call（） 1.语法： fun.call(this, arg1,arg2) 2.this取值的几点说明：（1）处于非严格模式下，...

woshicixide 2019-08-26 11:36 评论0 收藏0
复习javascript中call,apply,bind的用法

摘要：绑定函数被调用时，也接受预设的参数提供给原函数。一个绑定函数也能使用操作符创建对象这种行为就像把原函数当成构造器。一直很难理解js中的call apply bind，在w3schools,mdn阅读了，也看了很多相关的文章，今天我来写下我理解的call apply bind 首先创建一个函数 function man(){} man.prototype = { name: ...

darryrzhong 2019-08-26 11:30 评论0 收藏0