手写call、apply、bind

张太难

已于 2023-03-10 19:22:26 修改

阅读量145

点赞数

分类专栏：手写call、bind、apply 前端面试题文章标签： javascript 前端面试

于 2023-03-10 18:55:49 首次发布

本文链接：https://blog.csdn.net/m0_52726759/article/details/129449866

版权

手写call、bind、apply 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

前端面试题

1 篇文章 0 订阅

订阅专栏

这篇文章探讨了JavaScript中的闭包概念和函数内部的this指向问题。通过实现Function.prototype上的myCall、myApply和myBind方法，展示了如何在不同上下文中调用函数，确保正确绑定this值。myCall和myApply重写了原生的call和apply方法，而myBind则创建了一个新函数，保持对原始函数的引用以及预设的上下文和参数。

摘要由CSDN通过智能技术生成

关键是要搞懂闭包，和函数this指向。写出这三个其中的一个，另外的迎刃而解。

Function.prototype.myCall = function (context, ...args) {
  // 如果没有指定context,让context指向globalThis全局对象，
  // 如果context不是对象，将其强转为对象
  context =
    context === null || context === void 0 ? globalThis : Object(context);
  let s = Symbol("fn"); // 定义一个符号防止覆盖context原本的属性
  Object.defineProperty(context, s, {
    value: this,
    enumerable: false,
  });
  return context[s](...args); // 将参数数组展开调用
};

Function.prototype.myApply = function (context, args) {
  context =
    context === null || context === void 0 ? globalThis : Object(context);
  const fn = Symbol(); // 定义一个符号防止覆盖context原本的属性
  Object.defineProperty(context, fn, {
    value: this,
    enumerable: false,
  });
  return context[fn](...args); // 将参数数组展开调用
};

Function.prototype.myBind = function (context, ...args) {
  const fn = this;
  return function (...params) {
    return fn.myApply(context, [...args, ...params]);
  };
};