一个简单的例子让你很轻松地明白JavaScript中apply、call、bind三者的用法及区别

obj1.add(‘apple’)

//输出结果为: 我喜欢的水果是apple,但是我最爱的水果是banana

可以看到最后一行代码我们调用了obj1中的add函数,并传入了一个参数apple。add函数中的 this 指的是他所在的对象obj1,所以this.my_favorite 就是banana, 但是我们如果想获得obj2中的my_favorite, 该怎么办呢?接下来看一下每个函数的用法吧~

二、 apply


语法:fun.apply(obj,[arry])

  • 第一个参数: 传入的是this需要指向的对象

  • 第二个参数: 传入的是一个数组,作为 fun 函数的参数

let obj1 = {

my_favorite : ‘banana’,

add: function (…fruit) { //…fruit 表示的意思是可接收多个参数

console.log(‘我喜欢的水果是’ + fruit + ‘,但是我最爱的水果是’ + obj2.my_favorite)

}

}

let obj2 = {

my_favorite: ‘orange’

}

obj1.add.apply(obj2, [‘apple’, ‘Watermelon’])

//输出结果为:我喜欢的水果是apple,Watermelon,但是我最爱的水果是orange

obj1.add.apply(obj2, ['apple', 'Watermelon'])

这一行代码, 第一个参数将obj1中的add函数的 this 指向了obj2 , 第二个参数以数组形式传入多个参数,作为 obj1 中的 add 函数传入的参数, 所以最后能将 apple 和 watermelon 都输出。

三、 call


语法:fun.call(obj,[arg1, arg2, arg3...,argN]

  • 第一个参数: 传入的是this需要指向的对象

  • 其余参数: 除了第一个参数,其他的参数都是作为 fun 的传入参数

call 和 apply 唯一的区别就是在于给 fun 函数传入参数的形式不同, call是将多个参数逐个传入, apply 是 将多个参数放在一个数组中,一起传入

话不多说,直接来看看 call 的例子:

let obj1 = {

my_favorite : ‘banana’,

add: function (…fruit) {

console.log(‘我喜欢的水果是’ + fruit + ‘,但是我最爱的水果是’ + obj2.my_favorite)

}

}

let obj2 = {

my_favorite: ‘orange’

}

obj1.add.call(obj2, ‘apple’, ‘Watermelon’)

//输出结果为:我喜欢的水果是apple,Watermelon,但是我最爱的水果是orange

大家可以对比一下 call 和 apply 的区别到底在哪里

四、 bind


语法:fun.bind(obj)(arg)

  • bind的第一个参数:传入的是this需要指向的对象

  • 因为函数bind返回的是一个函数,即将 fun 的 this 指向 obj 后不进行自身调用, 我们需要自己进行一次调用, 所以要在函数bind后面再加一个小括号进行自身调用, 而小括号里则可以输出传给 fun 函数的参数, 输入的可以是数组形式的,也可以是逐个传入的。

简单看一下例子:

let obj1 = {

my_favorite : ‘banana’,

add: function (…fruit) {

console.log(‘我喜欢的水果是’ + fruit + ‘,但是我最爱的水果是’ + obj2.my_favorite)

}

}

let obj2 = {

my_favorite: ‘orange’

}

obj1.add.bind(obj2)(‘apple’, ‘Watermelon’)

obj1.add.bind(obj2)([‘apple’, ‘Watermelon’])

//输出结果为:我喜欢的水果是apple,Watermelon,但是我最爱的水果是orange

//输出结果为:我喜欢的水果是apple,Watermelon,但是我最爱的水果是orange

可以很清楚的看到, bind 有点类似 apply 和 call 的结合,只不过它返回的是一个函数,需要自己进行一下调用, 而传给 fun 函数的参数形式可以是像 apply 一样的数组形式, 也可以是像 call 一样的逐个传入的形式。

五、其他应用场景


  • 获取一个数组中的最大值或最小值

/* 普通情况,我们是这样获取数组中的最大值、最小值的 */

let max = Math.max(22, 33, 54, 88, 35, 44, 78, 80)

let min = Math.min(22, 33, 54, 88, 35, 44, 78, 80)

console.log(max, min)

//88 22

有没有感觉特别的麻烦,那接下来看看使用了这几个函数之后是什么样子的吧

/* 使用函数apply */

let arr = [22, 33, 54, 88, 35, 44, 78, 80]

let max = Math.max.apply(null, arr)

let min = Math.min.apply(null, arr)

console.log(max, min)

//88 22

这样看着是不是特别的简洁,因为我们不需要把arr 中的数组一个个传入进行比较,而是直接以数组形式传入就可以了。

算法刷题

大厂面试还是很注重算法题的,尤其是字节跳动,算法是问的比较多的,关于算法,推荐《LeetCode》和《算法的乐趣》,这两本我也有电子版,字节跳动、阿里、美团等大厂面试题(含答案+解析)、学习笔记、Xmind思维导图均可以分享给大家学习。

写在最后

最后,对所以做Java的朋友提几点建议,也是我的个人心得:

  1. 疯狂编程

  2. 学习效果可视化

  3. 写博客

  4. 阅读优秀代码

  5. 心态调整

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值