【面试题】 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、前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

相关文章
|
20天前
|
JavaScript 前端开发
JS高级—call(),apply(),bind()
【10月更文挑战第17天】call()`、`apply()`和`bind()`是 JavaScript 中非常重要的工具,它们为我们提供了灵活控制函数执行和`this`指向的能力。通过合理运用这些方法,可以实现更复杂的编程逻辑和功能,提升代码的质量和可维护性。你在实际开发中可以根据具体需求,选择合适的方法来满足业务需求,并不断探索它们的更多应用场景。
8 1
|
24天前
|
JavaScript 前端开发
JS try catch用法:异常处理
【10月更文挑战第12天】try/catch` 是 JavaScript 中非常重要的一个特性,它可以帮助我们更好地处理程序中的异常情况,提高程序的可靠性和稳定性。
14 1
|
30天前
|
JavaScript 前端开发
js的math.max的用法
js的math.max的用法
24 6
|
30天前
|
JavaScript
JS中的splice的三种用法(删除,替换,插入)
JS中的splice的三种用法(删除,替换,插入)
139 4
|
1月前
|
JavaScript 前端开发
js 中call()和apply()
js 中call()和apply()
27 1
|
2月前
|
JavaScript 前端开发
JavaScript用法
JavaScript用法
|
29天前
|
前端开发 JavaScript 开发者
深入理解JavaScript中的Promise:用法与最佳实践
【10月更文挑战第8天】深入理解JavaScript中的Promise:用法与最佳实践
51 0
|
2月前
|
JavaScript 前端开发 索引
JavaScript 数组中splice()的用法
本文介绍了JavaScript数组方法splice()的三种用法:删除元素、插入元素和替换元素,通过具体代码示例展示了如何使用splice()方法进行数组的修改操作。
|
3月前
|
前端开发 JavaScript 开发者
揭秘JavaScript魔法三剑客:call、apply、bind,解锁函数新世界,你的前端之路因它们而精彩!
【8月更文挑战第23天】在 JavaScript 的世界里,`call`、`apply` 和 `bind` 这三个方法常常让新手感到困惑。它们都能改变函数执行时的上下文(即 `this` 的指向),但各有特点:`call` 接受一系列参数并直接调用函数;`apply` 则接收一个参数数组,在处理不确定数量的参数时特别有用;而 `bind` 不会立即执行函数,而是创建一个新版本的函数,其 `this` 上下文已被永久绑定。理解这三个方法能帮助开发者更好地运用函数式编程技巧,提升代码灵活性和可维护性。
37 0
|
2月前
|
JavaScript 前端开发
this指向的几种情况以及js简单实现call、apply、bind___六卿
本文讨论了JavaScript中`this`的指向规则,并提供了`call`、`apply`和`bind`方法的简单实现,用于改变函数的`this`指向。
17 0
this指向的几种情况以及js简单实现call、apply、bind___六卿
下一篇
无影云桌面