call、apply、bind

最新推荐文章于 2022-12-05 23:18:18 发布

langmanboy

最新推荐文章于 2022-12-05 23:18:18 发布

阅读量101

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/langmanboy/article/details/124022121

版权

本文详细介绍了JavaScript中的call、apply、bind方法，它们都用于改变函数执行时的this指向。call方法直接调用函数并指定this值和参数，apply方法同样指定this值但参数以数组形式传递，bind方法返回一个新的函数，保留指定的this值和参数。文中还讨论了三者的区别和使用场景，包括类型判断、数组操作、伪数组转换、构造函数继承以及this在闭包中的应用。

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

call、apply、bind

call、apply 和 bind 是挂在 Function 对象上的三个方法,只有函数才有这些方法

作用：改变函数执行时的 this 指向

1. call

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

thisArg：在 function 函数运行时使用的 this 值
- 非严格模式下：thisArg 指定为 null，undefined，fun 中的this 指向 window 对象
- 严格模式下：fun 的 this 为 undefined
- 值为原始值（数字，字符串，布尔值）的 this 会指向该原始值的自动包装对象，如 String、Number、Boolean
arg1, arg2, ...：指定的参数列表
- 如果 arg 不传或为 null/undefined，则表示不需要传入任何参数

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

使用调用者提供的 this 值和参数调用该函数的返回值，若该方法没有返回值，则返回 undefined

function getInfo(arg1, arg2) {
   
	console.log(arg1, arg2)
	console.log(this.name);
}
let jsx = {
   
	name: 'jsx'
}

let ljj = {
   
	name: 'ljj'
}
getInfo.call(jsx, '蒋壮壮', '刘草草'); // 蒋壮壮 刘草草

2. apply

fun.apply(thisArg, argsArray)

thisArg：在 function 函数运行时使用的 this 值
- 非严格模式下：thisArg 指定为 null，undefined，fun 中的this 指向 window 对象
- 严格模式下：fun 的 this 为 undefined
- 值为原始值（数字，字符串，布尔值）的 this 会指向该原始值的自动包装对象，如 String、Number、Boolean
argsArray：可选的。一个数组或者类数组对象
- 数组元素将作为单独的参数传给 func 函数
- 如果 argsArray 不传或为 null/undefined，则表示不需要传入任何参数

apply() 方法调用一个具有给定this值的函数，以及以一个数组或类数组对象的形式提供的参数

调用有指定 this 值和参数的函数的结果

function getInfo(...arg) {
   
	console.log(arg)
	console.log(this.name);
}
let jsx = {
   
	name: 'jsx'
}

let ljj = {
   
	name: 'ljj'
}
let arr = ['html', 'css', 'js']
getInfo.apply(ljj, arr); //ljj 'html', 'css', 'js'