js中的call,apply与bind

IT技术2年前 (2022)更新 IT大王

0 18

call,apply,bind都是一种方法。

一，call()

①：call() 是可以调用函数的。

1 function fn() {
2   console.log(12)
3 }
4 
5 fn.call()   // 12

②：通过给call() 内部传参，可以改变 this指向。

 1 let Dog = {
 2   name: '旺财',
 3   sayName() {
 4     console.log(this.name)
 5   },
 6 }
 7 
 8 let Cat = {
 9   name: '喵喵',
10 }
11 
12 Dog.sayName.call(Cat)   //喵喵

③：如果给 call() 内部传递多个参数，那么第一个默认为改变 this 的参数，后面为传给函数的参数。

 1 let Dog = {
 2   name: '旺财',
 3   sayName() {
 4     console.log(this.name)
 5   },
 6   eat(food1, food2) {
 7     console.log(this.name + '吃的食物是：' + food1 + ',' + food2)
 8   },
 9 }
10 
11 let Cat = {
12   name: '喵喵',
13 }
14 Dog.eat.call(Cat, '鱼', '骨头')
15 //喵喵吃的食物是：鱼,骨头

第十四行中call()的第一个参数，改变 this 指向，所以 this.name 为‘喵喵’，后面的连个参数为传递给 Dog中eat方法的参数。

二：apply()

apply() 与call() 类似，唯一的区别便是，在十四行传递参数时，后面的传递的参数写到了数组里面。

1 //call() 方法 传参数
2 Dog.eat.call(Cat, '鱼', '骨头')
3 
4 //apply()方法传参数
5 Dog.eat.apply(Cat, ['鱼', '骨头'])

三：bind()

bind()传递参数和call()方法一样，只是不会立即执行函数，而是会返回一个函数。

 1 let Dog = {
 2   name: '旺财',
 3   sayName() {
 4     console.log(this.name)
 5   },
 6   eat(food1, food2) {
 7     console.log(this.name + '吃的食物是：' + food1 + ',' + food2)
 8   },
 9 }
10 
11 let Cat = {
12   name: '喵喵',
13 }
14 let fn1 = Dog.eat.bind(Cat, '鱼', '骨头')
15  fn1()
16 //喵喵吃的食物是：鱼,骨头

大家只要牢记记住 call()方法怎么使用，然后小推一下就能明白 apply() 与bind()的用法了。

实际应用场景：

可以通过 this 的指向，进行函数方法的继承 .可以进行单个或者多个继承。

 1 function Animal() {
 2   this.say = function () {
 3     console.log('我能说话')
 4   }
 5 }
 6 function Fly() {
 7   this.fly = function () {
 8     console.log('我能飞')
 9   }
10 }
11 
12 function Cat() {
13   // Cat 的this指向为cat
14   Animal.call(this)
15   //Animal 中的 this 指向也为 cat
16   Fly.call(this)
17 //同理 Fly中的 this 也指向了 cat
18 }
19 let cat = new Cat()
20 cat.say()
21 cat.fly()

感谢观看！如果错误，还望指出。

# IT技术

文章版权归作者所有，未经允许请勿转载。

版权声明：
1、IT大王遵守相关法律法规，由于本站资源全部来源于网络程序/投稿，故资源量太大无法一一准确核实资源侵权的真实性；
2、出于传递信息之目的，故IT大王可能会误刊发损害或影响您的合法权益，请您积极与我们联系处理(所有内容不代表本站观点与立场)；
3、因时间、精力有限，我们无法一一核实每一条消息的真实性，但我们会在发布之前尽最大努力来核实这些信息；
4、无论出于何种目的要求本站删除内容，您均需要提供根据国家版权局发布的示范格式
《要求删除或断开链接侵权网络内容的通知》：https://itdw.cn/ziliao/sfgs.pdf，
国家知识产权局《要求删除或断开链接侵权网络内容的通知》填写说明： http://www.ncac.gov.cn/chinacopyright/contents/12227/342400.shtml
未按照国家知识产权局格式通知一律不予处理；请按照此通知格式填写发至本站的邮箱 wl6@163.com