apply和call还有bind都是函数的方法, 三个方法都能改变函数里面 this 的指向,改变后的函数 this 指向方法内的第一个参数。 apply和call 的主要区别在于,apply 后面向函数传递参数是借用的数组的形式,而 call 则使用逗号将参数分隔开即可。而 bind 的作用和传参方式都和call是一样的,但是bind不会主动调用函数,而是返回一个函数,所以多了个接收->调用的步骤,详情请看下方示例。

call: 可以直接调用函数:

function fun(){
    console.log('hello world!')
}
fun.call() //会直接输出 hello world!

然后一个关于改变 this 指向的直观例子:

function say(){
    console.log(this.name)    //可以看到这里并没有name
}
//定义一个对象
const cat = { name: '小花' }
say.call(cat)        //这里会直接输出 小花

示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    //call 的方法会把函数的 this指向 指向函数的第一个参数,call传参的方式是逗号分隔开
    const sm = {
      name: '蜘蛛侠',
      age: 25,
      dreams(truthName ,truthAge){
        this.name = truthName
        this.age = truthAge
      }
    }
    sm.dreams('托比', 23)
    console.log(`sm的`,sm);

    const em = {
      name: '钢铁侠',
      age: 25
    }
    sm.dreams.call(em , '小罗伯特唐尼' , 88)
    console.log(`em的`,em);


    //apply 的方法也会把 this指向 指向函数的第一个参数,和 call 不同的是, apply的参数是以数组的方式传递的
    const today = {
      weather: '晴天',
      date: '5月9号',
      correct(weather,date){
        this.weather = weather
        this.date = date
      }
    }

    today.correct('暴雨','5月10号')
    console.log('today', today);
    const tomorrow = {
      weather: '小雨',
      date: '不知道'
    }
    today.correct.apply(tomorrow, ['大晴天', '5月中旬'])
    console.log('tomorrow' ,tomorrow);

    //bind 和上面的两个方法的效果差不多, 但是 bind 不会调用函数进行操作, 而是返回一个函数,所以需要使用一个变量去接收
    const cat = {
      name: '小花',
      like(food1, food2){
        console.log(`我是${this.name},我喜欢吃${food1}和${food2}`)
      }
    }
    cat.like('🐟','猫粮')

    const dog = {
      name: '旺财'
    }
    //因为 bind 不会直接调用函数而是返回一个函数,所以需要接收一下 ,其实和call差不多,只是多了接收和调用
    let bindFun = cat.like.bind(dog, '🥩','骨头')
    bindFun()   //调用输出


  </script>
</body>
</html>

图示:

欢迎指错!


张嘀嗒
9 声望2 粉丝

一个前端小白,更新学习笔记~~