JS中的apply方法和bind方法_js apply bind-CSDN博客

本文链接：https://blog.csdn.net/da_shuai_bi_a/article/details/129757124

apply

函数的一个属性, 作用和 call 方法极其相似:

函数.apply(对象): 把函数临时放到对象里执行, 修改函数中的this指向

不同点:

实参通过 数组类型 进行传递

用途:

如果函数接收的是实参列表, 但是我们只有数组类型, 则利用此函数实现数组转实参列表的效果

<script>
    // call: 临时把函数放对象里执行
    // apply: 临时把函数方对象执行
    var emp = { name: '凯凯', salary: 10000 }
    // 年终奖 , 扣税
    function total(zhong, shui) {
      return 12 * this.salary + zhong - shui //年终奖
    }
    // 区别: 实参传递不同
    // call: 实参要1个1个传递
    console.log(total.call(emp, 50000, 30000))
    // apply: 实参要放数组里传递
    console.log(total.apply(emp, [50000, 30000]))
  </script>

  // 制作一个 sum 函数, 能够计算出 所有实参的总和
    function sum() {
      var total = 0
      for (var i = 0; i < arguments.length; i++) {
        total += arguments[i]
      }
      return total
    }

    var nums = [21, 32, 43, 6546, 65, 3]
    // 用sum函数,求出 nums 数组中的元素总和

    // 利用 apply 把 数组 转为 参数列表的形式
    // 参数1: 是 sum 在哪个对象里执行, 即 this 的指向
    // 由于 sum 函数体中, 没有使用this, 则可以随意传递
    console.log(sum.apply(1, nums))	//可为任何数

bind

函数触发的三种方案:

call: 临时把函数放在对象中执行, 用于设定this的指向
apply: 临时放对象中执行, 可以把数组转为参数列表
bind: 提前绑定函数和运行时的资源, 简化后续调用时的格式

<body>
  <!-- 问题: 在HTML代码中, 掺杂过多的 JS 代码, 导致些许混乱 -->
  <button onclick="total.call(emp, 50000, 30000)">计算年薪</button>
  <br>
  <!-- 触发bind函数 -->
  <button onclick="total_bind()">计算年薪</button>

  <script>
    var emp = { ename: "凯凯", salary: 10000 }

    function total(zhong, shui) {
      alert(this.salary * 12 + zhong - shui)
    }


    // bind: 绑定
    // 作用: 把函数和其运行时需要的资源捆绑在一起, 返回新的函数
    var total_bind = total.bind(emp, 50000, 30000)

    console.dir(total_bind);
  </script>
</body>