JS手写call方法

call方法是JS function中内置的一个方法,主要的作用有两个:

  • 改变函数的this指向
  • 向函数中传递参数

使用方式如下:

javascript 复制代码
fn.call(obj, 100, 200)

实现代码示例:

javascript 复制代码
Function.prototype.myCall = function(ctx, ...args) {

  ctx = ctx === undefined || ctx === null ? globalThis : Object(ctx)
  // 定义一个符号,使其唯一
  const key = Symbol()

  // 这样定义,使符号不可枚举
  Object.defineProperty(ctx, key, {
    value: this,
    enumerable: false
  })
  const r = ctx[key](...args)

  // 运行完没用了,就可以删除掉
  delete ctx[key]

  return r
}

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

const a = {
  a: 2
}

method.myCall(a, 2, 3)
// 输出结果:{ a: 2 } this
//          2 3 args


method.myCall(this, 2, 3)
// node 环境没有 this
// 输出结果:{} this
//          2 3 args

method.myCall(1, 2, 3)
// 输出结果:[Number: 1] this
//          2 3 args
相关推荐
excel21 分钟前
JavaScript 中的二进制数据:ArrayBuffer 与 SharedArrayBuffer 全面解析
前端
晨非辰1 小时前
#C语言——刷题攻略:牛客编程入门训练(六):运算(三)-- 涉及 辗转相除法求最大公约数
c语言·开发语言·经验分享·学习·学习方法·visual studio
ZXT1 小时前
代码规范与提交
前端
柑橘乌云_1 小时前
vue中如何在父组件监听子组件的生命周期
前端·javascript·vue.js
北海天空2 小时前
react-scripts的webpack.config.js配置解析
前端
LilyCoder2 小时前
HTML5中华美食网站源码
前端·html·html5
钢铁男儿2 小时前
C# 异步编程(计时器)
开发语言·c#
拾光拾趣录2 小时前
模块联邦(Module Federation)微前端方案
前端·webpack
江湖人称小鱼哥3 小时前
react接口防抖处理
前端·javascript·react.js
小王不爱笑1323 小时前
Java项目基本流程(三)
java·开发语言