javascript函数方法中bindcallapply的使用和区别

Posted 2022-12-16 coderkey

一，this的指向

this.name = 'pink'
const obj = 
    name: 'coderkey',
    way(age,sex) 
        console.log(`姓名:$this.name 年龄:$age 性别:$sex`);
    

obj.way(24,'男')  // 姓名:coderkey 年龄:24 性别:男   对象obj的方法
let fn = obj.way
fn(24,'男')  // 姓名:pink 年龄:24 性别:男      全局window 

---

二，call( )方法的使用

（1）语法：

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

（2）参数：

thisArg

可选的。在 function 函数运行时使用的 this 值。

arg1, arg2, ...

指定的参数列表。

（3）返回值：

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

（4）用法：

this.name = 'pink'
const obj = 
    name: 'coderkey',
    way(age,sex) 
        console.log(`姓名:$this.name 年龄:$age 性别:$sex`);
    

const newObj = 
    name: 'why'

let fn = obj.way
fn.call(obj,17,'女')  // 姓名:coderkey 年龄:17 性别:女
fn.call(newObj,17,'女')  // 姓名:why 年龄:17 性别:女 

---

三，apply( )方法的使用

（1）语法：

apply(thisArg)
apply(thisArg, argsArray)

（2）参数：

thisArg

在 function 函数运行时使用的 this 值。

argsArray 可选

一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 function 函数

（3）返回值:

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

（4）用法：

this.name = 'pink'
const obj = 
    name: 'coderkey',
    way(age,sex) 
        console.log(`姓名:$this.name 年龄:$age 性别:$sex`);
    

const newObj = 
    name: 'why'

let fn = obj.way
fn.apply(obj,[18,'女'])   // 姓名:coderkey 年龄:18 性别:女
fn.apply(newObj,[18,'女'])   // 姓名:why 年龄:18 性别:女

---

四，bind( )方法的使用

（1）语法：

function.bind(thisArg[, arg1[, arg2[, ...]]])     // 创建一个新的函数

（2）参数：

thisArg

调用绑定函数时作为 this 参数传递给目标函数的值。

arg1, arg2, ...

当目标函数被调用时，被预置入绑定函数的参数列表中的参数。

（3）返回值:

返回一个原函数的拷贝，并拥有指定的 this 值和初始参数。

（4）用法：

this.name = 'pink'
const obj = 
    name: 'coderkey',
    way(age,sex) 
        console.log(`姓名:$this.name 年龄:$age 性别:$sex`);
    

const newObj = 
    name: 'why'

let fn = obj.way
fn.bind(obj,19,'女')()  // 姓名:coderkey 年龄:19 性别:女
fn.bind(newObj,19,'女')()  // 姓名:why 年龄:19 性别:女

---

五、bind、call、apply的区别

相同点：

三个都是用于改变this指向；
接收的第一个参数都是this要指向的对象；

不同点：

call( )和bind( )传参相同，多个参数依次传入的；
apply( )只有两个参数，第二个参数为数组；
call( )和apply( )都是对函数进行直接调用，而bind( )方法不会立即调用函数，而是返回一个修改this后的函数；

---