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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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(){
    
  }),
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值