call bind apply 三这都是改变函数体内部this的指向

最新推荐文章于 2023-03-15 19:54:55 发布

原创最新推荐文章于 2023-03-15 19:54:55 发布 · 259 阅读

0 ·

CC 4.0 BY-SA版权

本文详细解析了JavaScript中this指向的问题，通过实例展示了call、bind和apply三个方法如何改变函数内部this的指向。同时，介绍了小程序中实现节流函数的方法，用于控制函数调用频率，避免过度触发。

call bind apply
三这都是改变函数体内部this的指向，

const module = {
  x: 42,
  getX: function() {
    return this.x;
  }
};

const unboundGetX = module.getX;
console.log(unboundGetX()); // The function gets invoked at the global scope
// expected output: undefined

const boundGetX = unboundGetX.bind(module);
console.log(boundGetX());
// expected output: 42

bind（）方法创建一个新的函数，在bind（）被调用时，这个新函数的this被指定为bind（）的第一个参数，而其余参数作为新函数的参数，供调用时使用。

返回一个原函数的拷贝，并拥有指定的 this 值和初始参数。

apply（）方法条调用一个具有给定this值的函数，以及作为一个数组（或类似数组对象）提供的参数。
call（）方法使用一个指定的this值和单独给出的一个或多个参数来调用函数
注意：call()方法的作用和 apply() 方法类似，区别就是call()方法接受的是参数列表，而apply()方法接受的是一个参数数组。

小程序中写一个节流函数。

//在 utils/throttle.js

const throttle = (fn, timeout = 1000) => {
  let t;
  return function(...args){
    const ctx = this;

    if(t){
      return;
    }
    t = setTimeout(() => {
      t = clearTimeout(t);
      fn.apply(ctx, [...args]);
    }, timeout);
  }
};

module.exports = {
  throttle
}

在小程序page下的js中使用

import { throttle } from "../../utils/throttle";
  updateInfo: throttle(function(){
    
  }),