ES5-替换this-call

tech2022-07-05  253

1. 问题: 有些时候函数执行时,其中的this不是我们想要的!

2. 解决: ES5中提供了一组专门替换函数中不想要的this为想要的对象的函数

3. 包括: call/apply/bind

4. 如何临时替换this:

函数.call(替换this的对象, 其它实参值,... )

                ↓

               this

5. 原理: call做三件事:

1). 调用函数

2). 临时替换函数中的this为call()中第一个实参值对象

3). 将call()中第二个实参值及其之后的所有剩余实参值传给正在调用的函数作为函数的实参值。

 

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

</head>

<body>

  <script>

    //有一个公共的函数,不属于任何对象

    //函数可以计算一个员工的总工资

    //              底薪   奖金1    奖金2

    function jisuan(basebonus1bonus2){

      console.log(`${this.ename}的总工资是: ${base+bonus1+bonus2}`);

    }

 

    //有两个员工:

    var lilei={ ename:"Li Lei" };

    var hmm={ ename:"Han Meimei" };

 

    //lilei想计算自己这个月的工资: 

    //错误1: jisuan()既不再lilei对象内,又不再lilei的父对象内,所有lilei无权直接使用

    // lilei.jisuan();//lilei.jisuan不是一个函数

    //console.log(lilei);

    //错误2: jisuan()根本就没有定义员工姓名形参,所以即使传入员工姓名,也没有形参接住。

    //jisuan(lilei.ename,10000,2000,1000);

    //正确: 

    jisuan.call(lilei,1000010002000);

    //            ↓     ↓      ↓     ↓

    //          this   base bonus1 bonus2

    //3件事: 

    //1. 调用jisuan()

    //2. 用call的第一个参数临时代替jisuan中的this关键词

    //3. 将call中从第二个实参开始的所有剩余实参传给jisuan()函数的形参变量

    //             this.ename

    //       变成了lilei.ename

    //希望的输出结果: Li Lei的总工资是13000

    //hmm也想计算自己的总工资: 3000,4000,5000?

    jisuan.call(hmm,3000,4000,5000);

  </script>

</body>

</html>

运行结果:

Li Lei的总工资是: 13000

Han Meimei的总工资是: 12000

最新回复(0)