call、bind、apply究竟有什么魅力,让面试官总是提起它们

143 阅读2分钟

callbindapply这三者都是JavaScript中用于函数调用的和绑定this上下文的重要方法。虽然它们的功能十分相似,但在使用上和细节上都有所差别。接下来我们将详细探讨下这三种方法差别。

如何使用

  • call

call方法会立即调用函数,并可以指定函数执行时的this值。call的参数是一个个交给call的(thisBinder,a,b,c...参数)。

function.call(thisBinder, arg1, arg2, ...)

thisBinder:当函数被调用时,this指向的对象。如果传入nullundefined,则this指向全局对象(非严格模式)或undefined(严格模式)。

  • apply

applycall一样,也是立即调用函数,指定函数执行时的this值。但在传参数方面与call稍有不同。apply是一次性以数组的形式传给参数(thisBinder,[a,b,c...参数])。

function.apply(thisBinder, [argsArray])

在传参数方面也和call一样,当函数被调用时,this指向的对象。如果传入nullundefined,则this指向全局对象(非严格模式)或undefined(严格模式)。

  • bind 使用bind方法不会立即调用函数,而是返回一个新的函数,这个函数的this会被永久绑定到bind的第一个参数上。
function.bind(thisBinder, arg1, arg2, ...)

thisBinder:新函数被调用时this所指的对象。

Snipaste_2024-12-11_21-32-39.png 以上是对callapplybind三种方法的总结。

使用场景
  • call:当你需要立即调用函数,并且想要以一种简单的方式传递参数时。
  • apply:当你有一个参数数组,并希望将这些参数传递给函数时。
  • bind:当你需要创建一个具有固定 this 值的新函数,或者想要预设某些参数时。

隐式类型转换

在 JavaScript 中,隐式类型转换(也称为自动类型转换或类型强制转换)是指当不同的数据类型进行操作时,JavaScript 引擎会根据上下文自动将一个类型的值转换为另一个类型。

例如加法运算符(+),加法运算符具有双重功能。任意一个操作数为字符串时,会将两侧的操作数转换成字符串进行拼接;否则会被转换成数字进行加法运算。

var a = {
  name: 'Cherry',
  fn: function(a, b) {
    console.log(this.name)
    console.log(a + b)
  }
}
var b = a.fn;//普通函数
console.log(b.apply(a, [1, 2]))
console.log(b.call(a, 1, 2))

在面对简单数据类型如 undefined,直接调用方法( ToString)会导致类型错误( TypeError),因为 undefined 上没有任何方法。但是把 undefined 作为参数传给函数时,它就会被隐式类型转换直接转换成字符串。

let a = [1,2]
console.log(a.__proto__.__proto__)

总结

callbindapply 这三种方法和隐式类型转换都是 JavaScript 中的重要部分。理解掌握这些方法和细节,可以帮助我们编写出更加灵活和可维护的代码。