前端开发

 首页 > 前端开发 > javascript > 手写call方法最新评论添加评论

手写call方法最新评论添加评论

分享到:
【字体:
导读:
         [导读] 源码: Function.prototype.selfCall=function(ctx,...args){ctx=ctx===null||ctx===undefined?globalThis:Object(ctx);constfn=this;constkey=Symbol();Object.defeineProperty(ctx,key,{value:fn,enumberable:false,});constr=ctx[key](...args);deletec...

源码:

Function.prototype.selfCall = function(ctx, ...args) {
    ctx = ctx === null || ctx === undefined ? globalThis : Object(ctx);
    const fn = this;
    const key = Symbol();
    Object.defeineProperty(ctx, key, {
        value: fn, enumberable: false,
    });
    const r = ctx[key](...args);
    delete ctx[key];
    return r;
    
}

调用

function methods(a,b) {
    console.log('args', a, b);
    console.log('this', this);
}

methods.selfCall({ fn(){} })

解读:

这段代码定义了一个名为 selfCall 的方法,该方法被添加到了 Function.prototype 上,从而可以在任何函数对象上调用。这个方法模拟了 JavaScript 中的 Function.prototype.call 方法的功能,用于在指定的上下文(ctx)中调用函数,并且可以传递任意数量的参数。

让我们逐行进行详细解析:


1.Function.prototype.selfCall = function(ctx, ...args) {: 这行代码定义了一个名为 selfCall 的方法,该方法将被添加到 Function.prototype 上,这意味着任何函数对象都可以调用这个方法。该方法接受两个参数:ctx 表示要将函数调用应用到的上下文,args 是一个包含要传递给函数的参数的数组。

2.ctx = ctx === null || ctx === undefined ? globalThis : Object(ctx);: 这行代码检查传入的 ctx 参数是否为 null 或 undefined,如果是,则将 globalThis(全局对象,在浏览器中为 window 对象)赋给 ctx,否则将 ctx 转换为一个对象。这样做是为了确保函数调用的上下文不会是 null 或 undefined,因为在 JavaScript 中如果调用一个函数时上下文为 null 或 undefined,它会默认使用全局对象作为上下文。

3.const fn = this;: 这行代码将当前函数对象保存在 fn 变量中,以便后续可以在指定的上下文中调用它。

4.const key = Symbol();: 这行代码创建了一个新的唯一的 Symbol,用作临时属性的键,以确保在上下文对象中不会与现有属性冲突。

5.Object.defineProperty(ctx, key, { value: fn, enumberable: false, });: 这行代码使用 Object.defineProperty 方法将 fn 函数作为值,使用新创建的 Symbol 作为属性键,将其定义在 ctx 上。设置 enumberable 为 false,以确保这个属性不会出现在对象的枚举属性中。

6.const r = ctx[key](...args);: 这行代码调用了在上下文对象 ctx 上定义的函数,并传入了参数数组 args。这里利用了刚刚定义的临时属性键 key 来获取保存的原函数。

7.delete ctx[key];: 这行代码删除了之前定义的临时属性,在函数调用结束后,清理上下文对象中的临时属性,以防止污染。

8.return r;: 最后,将函数调用的返回值返回给调用者。


总的来说,这段代码实现了一个自定义的函数调用方法 selfCall,用于在指定的上下文中调用函数,并支持传递参数。在实现过程中,使用了 Symbol 作为临时属性的键,以确保在调用结束后能够正确清理上下文对象。


分享到:
防抖和节流防抖:节流:最新评论添加评论
防抖: 就是指连续触发事件但是在设定一段时间内种 只执行最后一次 列如:设定1000毫秒执行,当你触发事件了,他会1000毫秒后执行,但是还剩500毫秒的时候你又触发了事件,那就会重新开始1000毫秒之后再执行 记忆核心:从新开始 应用场景: 搜索框搜索,文本编辑器实时保存 代码实现:定时器 let timer = null; let do...
js监听localStorage溢出错误最新评论添加...
在JavaScript中,localStorage的存储容量是有限的,通常约为5-10MB,具体取决于浏览器和配置。当你试图将更多数据存储在localStorage中,超过了其容量限制时,浏览器不会抛出特定的"溢出错误",而是触发一个异常,通常是QuotaExceededError。 要监听localStorage存储溢出错误,你可以使用try...catch块来捕获异常,然后采取...
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……