前端面试自测知识点-- apply、call 和 bind

最新推荐文章于 2024-08-10 15:40:21 发布

像树_

最新推荐文章于 2024-08-10 15:40:21 发布

阅读量441

点赞数 1

分类专栏：前端面试知识清单文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_33466661/article/details/120050323

版权

本文详细介绍了JavaScript中的apply、call和bind方法，它们用于改变函数调用时的this上下文。apply接收一个数组作为参数，call则逐个传入参数。bind返回一个新函数，保留指定的this上下文，但不会立即执行。它们的主要区别在于参数传递方式和执行时机。应用包括类型判断、伪数组操作、继承和函数参数保存等场景。

摘要由CSDN通过智能技术生成

apply 和 call

func.apply(thisArg, [argsArray]) // 第一个参数：必选，第二个：可选

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

apply 传入的第一个参数指定this的指向第二个参数是一个数组（接收传递过来的参数）

call 传入的第一个参数指定this的指向后面的参数是传递给函数的参数

const arr = [1,6,3,5,29,8,7]
let maxNumber = Math.max.apply(Math,arr)
let maxNummer = Math.max.call(Math,...arr)

apply 改变this 指向并传入参数（数组）
call改变this指向并传入参数（一个一个的参数）

例：伪数组使用数组方法
```
var domNodes =Array.prototyope.slice.call(document.getElementsByTagName("*)
```
同理也可以将数组的一些方法通过 apply 或者 call 的方法给其他伪数组使用
```
function log(){
     
 var args = Array.prototype.slice.call(arguments)
args.unshift('app')
}
```
call/apply都是返回函数执行的结果
辅助记忆：apply是以a开头，它传给function的参数是Array，也是以a开头的
调用call/apply/bind的必须是个函数

apply、call、bind之间的区别

call和apply的唯一区别：

传给function的参数写法不同：

apply是第2个参数，这个参数是一个数组，要传的参数都写在数组里
call从第2～n的参数都是传给function的

call/apply 与 bind的区别

执行：

call/apply 改变了函数的this上下文后，马上执行该函数
bind则是返回改变了上次文后的函数，不执行该函数

返回值：

call/apply返回function的执行结果
bind返回function的拷贝，并指定里function的this指向，保存了function的参数

call和apply的应用场景

判断数据类型：

Object.prototype.toString用来判断类型再合适不过，借用它我们几乎可以判断所有类型的数据：

function isType(data, type) {
     
    const typeObj = {
     
        '[object String]': 'string',
        '[object Number]': 'number',
        '[object Boolean]': 'boolean',
        '[object Null]': 'null',
        '[object Undefined]': 'undefined',
        '[object Object]': 'object',
        '[object Array]': 'array',
        '[object Function]': 'function',
        '[object Date]': 'date', // Object.prototype.toString.call(new Date())
        '[object RegExp]': 'regExp',
        '[object Map]': 'map',
        '[object Set]': 'set',
        '[object HTMLDivElement]': 'dom', // document.querySelector('#app')<