【面试题】 JavaScript 中 call()、apply()、bind() 的用法

简介: 【面试题】 JavaScript 中 call()、apply()、bind() 的用法

JavaScript学习过程中,经常会看到这三个函数的使用,但是却并不是了解他们的具体使用和区别。这次做笔记分享一下,同时也让自己加深一下记忆。

call

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

语法:

// thisArg: 可选,在 function 函数运行时使用的 this 值
// arg1, arg2, ... :可选: 指定的参数列表
function.call(thisArg, arg1, arg2, ...)

示例:

let person1 = { 
  firstName: "John", 
  lastName : "Doe", 
  fullName: function (args1, args2) {
    // 在方法中,不改变this指向的情况下,this 表示该方法所属的对象,也就是person1
    return this.firstName + " " + this.lastName 
    + " " + args1 + " " + args2;
  } 
}
var person2 = { 
  firstName:"Tom", 
  lastName: "Liming", 
} 
let result = person1.fullName.call(person2, 'a', 'b')
console.log(result) // Tom Liming a b

apply

apply() 方法调用一个具有给定 this 值的函数,以及以一个数组的形式提供的参数。 虽然这个函数的语法与 call() 几乎相同,但根本区别在于,call()接受一个参数列表,而 apply() 接受一个参数的单数组。

语法:

// thisArg: 在 func 函数运行时使用的 this 值。
// argsArray: 可选,一个数组或者类数组对象,其中的数组元素将作为单独的参数传给 func 函数。
apply(thisArg, argsArray)

示例:

let person1 = { 
  firstName: "John", 
  lastName : "Doe", 
  fullName: function (args) {
    return this.firstName + " " + this.lastName 
    + " " + args[0] + " " + args[1];
  } 
}
var person2 = { 
  firstName:"Tom", 
  lastName: "Liming", 
}
let result = person1.fullName.call(person2, ['a','b'])
console.log(result) // Tom Liming a b

bind

bind()  方法创建一个新的函数,在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数,供调用时使用

语法:

bind(thisArg, arg1, arg2, /* …, */ argN)

示例:

let person1 = { 
  firstName: "John", 
  lastName : "Doe", 
  fullName: function (args1, args2) {
    return this.firstName + " " + this.lastName 
    + " " + args1 + " " + args2;
  },
  getfullName: function (args) {
    return this.firstName + " " + this.lastName 
    + " " + args[0] + " " + args[1];
  } 
}
var person2 = { 
  firstName:"Tom", 
  lastName: "Liming", 
} 
let result1 = person1.fullName.bind(person2, 'a', 'b')()
let result2 = person1.getfullName.bind(person2, ['a','b'])()
console.log(result1) // Tom Liming a b
console.log(result2) // Tom Liming a b

总结

  1. 三者均可以改变函数体内部this的指向。
  2. 第一个参数都是 this 的指向对象,如果没有这个参数或参数为undefined或null,则this指向全局的window。
  3. 传参的形式不同,apply的参数要放在数组中传入,call的参数是列表形式(以逗号分割),bind的参数可以是列表形式也可以是数组形式,apply和call是一次性传入,而bind可以分多次传入
  4. bind返回的是有指定的 this值和初始参数的原函数拷贝,便于稍后调用,apply、call则是立即调用。

给大家推荐一个实用面试题库

1、前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

相关文章
|
8月前
|
自然语言处理 JavaScript 前端开发
当面试官再问我JS闭包时,我能答出来的都在这里了。
闭包(Closure)是前端面试中的高频考点,广泛应用于函数式编程中。它不仅指函数内部定义的函数,还涉及内存管理、作用域链和垃圾回收机制。闭包可以让函数访问其外部作用域的变量,但也可能引发内存泄漏等问题。通过合理使用闭包,可以实现模块化、高阶函数和回调函数等应用场景。然而,滥用闭包可能导致代码复杂度增加、调试困难以及潜在的性能问题。为了避免这些问题,开发时应谨慎处理闭包,避免不必要的嵌套,并及时清理不再使用的变量和监听器。
359 16
当面试官再问我JS闭包时,我能答出来的都在这里了。
|
7月前
|
JavaScript 前端开发 Java
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
柯里化是一种强大的函数式编程技术,它通过将函数分解为单参数形式,实现了灵活性与可复用性的统一。无论是参数复用、延迟执行,还是函数组合,柯里化都为现代编程提供了极大的便利。 从 Redux 的选择器优化到复杂的数据流处理,再到深度嵌套的函数优化,柯里化在实际开发中展现出了非凡的价值。如果你希望编写更简洁、更优雅的代码,柯里化无疑是一个值得深入学习和实践的工具。从简单的实现到复杂的应用,希望这篇博客能为你揭开柯里化的奥秘,助力你的开发之旅! 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
10月前
|
前端开发 Java 程序员
面试官刁钻提问?轻松应对 break、continue 和 return 的巧妙用法
小米,一位技术博主,针对 Java 面试中常见的 `break`、`continue` 和 `return` 关键字进行了详细讲解。通过打怪故事和代码实例,解释了它们的使用场景及注意事项,帮助读者更好地理解和应用这些控制语句。
130 12
面试官刁钻提问?轻松应对 break、continue 和 return 的巧妙用法
|
JavaScript 前端开发
JS try catch用法:异常处理
【10月更文挑战第12天】try/catch` 是 JavaScript 中非常重要的一个特性,它可以帮助我们更好地处理程序中的异常情况,提高程序的可靠性和稳定性。
529 56
|
11月前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
190 1
|
11月前
|
JavaScript 前端开发
JS中的构造函数的含义和用法
构造函数是JavaScript中用于创建新对象的特殊函数,通常首字母大写。通过`new`关键字调用构造函数,可以初始化具有相同属性和方法的对象实例,从而实现代码复用。例如,定义一个`Person`构造函数,可以通过传入不同的参数创建多个`Person`对象,每个对象都有自己的属性值。此外,构造函数还可以包含方法,使每个实例都能执行特定的操作。构造函数的静态属性仅能通过构造函数本身访问。ES6引入了`class`语法糖,简化了类的定义和实例化过程。
196 1
|
12月前
|
JavaScript 前端开发
JS高级—call(),apply(),bind()
【10月更文挑战第17天】call()`、`apply()`和`bind()`是 JavaScript 中非常重要的工具,它们为我们提供了灵活控制函数执行和`this`指向的能力。通过合理运用这些方法,可以实现更复杂的编程逻辑和功能,提升代码的质量和可维护性。你在实际开发中可以根据具体需求,选择合适的方法来满足业务需求,并不断探索它们的更多应用场景。
116 1
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
|
前端开发 JavaScript 开发者
揭秘JavaScript魔法三剑客:call、apply、bind,解锁函数新世界,你的前端之路因它们而精彩!
【8月更文挑战第23天】在 JavaScript 的世界里,`call`、`apply` 和 `bind` 这三个方法常常让新手感到困惑。它们都能改变函数执行时的上下文(即 `this` 的指向),但各有特点:`call` 接受一系列参数并直接调用函数;`apply` 则接收一个参数数组,在处理不确定数量的参数时特别有用;而 `bind` 不会立即执行函数,而是创建一个新版本的函数,其 `this` 上下文已被永久绑定。理解这三个方法能帮助开发者更好地运用函数式编程技巧,提升代码灵活性和可维护性。
137 0
|
JavaScript 前端开发
js 中call()和apply()
js 中call()和apply()
78 1

热门文章

最新文章