js中apply,call和bind的使用

716 阅读3分钟

**       apply,call和bind的使用经常都是为了绑定this,那么,大家知道 this 是什么吗?this就是函数运行时所在的环境对象。而apply,call和bind的作用就是能够改变函数内部this的指向,也就是改变函数运行时所在的环境对象。**

      那么我们又该如何使用它们呢?它们三者之间又有什么相同点和不同点呢?

1. apply的使用

          apply方法可以在函数调用的使用链式进行拼接,例: this.test.apply(obj, arr)  ,apply方法主要有两个参数,第一个参数是要绑定给this的值,用于改变函数内部this的指向,第二个参数是一个参数数组,可以给调用函数内部传参,apply方式是立即执行函数,一经调用,立马执行。(注意:函数使用apply的时候,函数名后面不需要再加 () 了)

          传一个参数,改变函数内部this的指向,下面传入person,那么函数内部this的指向就是person了。

const person = {  name: '张三',  age: '22'}
function showPersonInfo () {  
  console.log(this.name, '年龄:', this.age)
}
showPersonInfo.apply(person) //  张三 年龄: 22

         给函数传入形参,apply方法的第二个参数需要是数组,这里需要注意,虽然apply传参时写的是数组,但是函数接受的时候并不是接收一个数组,而是以列表的形式接受,也就是一个一个接收。

const person = {  name: '张三',  age: '22'}
function showPersonInfo (name, age) {  
   console.log(this.name, '年龄:', this.age)  
   console.log(name, "年龄:", age)
}
showPersonInfo.apply(person, ['李四', 21]) 
//  张三 年龄: 22   李四 年龄: 21

2. call的使用

        call 方法的用法跟apply的用法差不多,只是第一个参数后面传入的参数有所不同而已,第一个参数后面传入的是一个参数列表,call方式也是立即执行函数,一经调用,立马执行。

const person = {  name: '张三',  age: '22'}
function showPersonInfo (name, age) {  
  console.log(this.name, '年龄:', this.age)
  console.log(name, "年龄:", age)
}
showPersonInfo.call(person, '李四', 21) 
//  张三 年龄: 22   李四 年龄: 21

3. bind的使用

         bind方法的第一个参数跟apply和call是一样的,第一个参数后面的传参则跟call是一样的,传入的是参数列表。bind方法并不是立即执行函数。

const person = {  name: '张三',  age: '22'}
function showPersonInfo (name, age) {  
  console.log(this.name, '年龄:', this.age)  
  console.log(name, "年龄:", age)
}
const func = showPersonInfo.bind(person, '李四', 21) //  张三 年龄: 22func()
// 张三 年龄: 22// 李四 年龄: 21

4. 总结

         apply方法和call方法是立即执行函数,一经调用,立马执行,而使用bind方法则不会立即执行;apply,call和bind的第一个参数都是一样的,用于改变函数的内部的环境对象;apply的第二个参数只能传数组,call和bind第一个参数后面传的是一个参数列表。

以上就是我对call,apply和bind的一些微薄的总结,由于本人此时的知识沉淀还不够,后面有机会会重写本文,此次只是做一些简单的记录以及复盘,希望能够对路过的小伙伴能够有所帮助,如果您有什么建议可以在下方留言。