简洁的代码,详细的解释,每个前端er都要会的手写call方法。

手写call

  • 前言
    • 一、思路梳理
    • 二、call方法的实现
    • 三、测试结果展示
    • 四、实现的详解
      • 4.1 获取需要调用目标function的对象
      • 4.2 获取被调用的目标function
      • 4.3 目标function参数的获取
  • 结语

前言

又是一年的金三银四,疯狂的手写剧情再度上演,接下来就让我们一起来实现下JavaScript里的call函数。

一、思路梳理

在实现手写call之前让我们先来梳理下call函数的使用场景。通常我们在使用call的时候,需要两个对象(所有的一切都是对象):

  1. 想要执行的function(我们假设叫foo)。
  2. 希望能够调用foo的对象(我们假设叫obj)。

那我们在实现call函数的时候主要突破点就是能够获取到foo以及obj。那么接下来我们就带着这样的一个思路来实现call方法吧。

二、call方法的实现

function jCall(thisArg,...args) {
   
  // 传进来的是null和undefined时将this指向为window
  thisArg = thisArg ?? window

  // 确保传进来的是Object
  thisArg = Object(thisArg)

  // 生成一个唯一的key值,防止和传进来的对象的key重复
  const key = Symbol()
  thisArg[key] = this

  // 获得函数的执行结果
  const result = thisArg[key](...args)

  // 删除手动添加的属性,使thisArg回到最初的样子
  delete obj[key]

  // 返回函数的执行结果
  return result
}

Function

你可能感兴趣的:(前端笔记,JavaScript手写,前端,javascript,面试,程序人生,es6)