于永雨的学习笔记
  • 学海无涯
  • 前端基础
    • HTML
      • 语义化标签
      • script标签中defer和async
      • 本地存储
      • 拖拽
      • Web Workers
      • WebSocket
    • CSS
      • 盒模型和box-sizing
      • BFC(块级格式化上下文)
      • 浮动和清除浮动
      • 伪类和伪元素
      • 2倍图、3倍图
      • flex
      • 水平居中、垂直居中
      • 经典布局
        • 两列布局
        • 三列布局
      • 经典实践
      • CSS样式隔离
      • Less vs Sass
    • JavaScript
      • ES
        • 数据类型
          • 1-string
          • 2-number
          • 3-boolean
          • 4-null
          • 5-undefined
          • 6-symbol
          • 7-object
          • 常见类型判断
          • 浅拷贝、深拷贝
        • 数据集合
          • Array
          • 类数组对象
          • Map、WeakMap
          • Set、WeakSet
          • 常见遍历方式
        • 变量
          • 修饰符
          • 变量提升
        • 函数
          • apply、call、bind
          • new
          • this
          • 箭头函数
          • 闭包
          • 防抖和节流
          • 柯里化
        • 原型
          • 原型链
        • 异步
          • 单线程&事件循环
          • 常见异步
          • Promise
            • all和allSettled
            • race和any
            • resolve和reject
        • 模块化
        • 版本特性一览表
      • DOM
        • DOM事件
        • 事件分类
      • BOM
    • TypeScript
    • 浏览器
      • 页面渲染
      • 重绘和回流
      • 跨域
      • 垃圾回收
      • 取消请求
    • Web API
      • EventSource
      • XMLHttpRequest
      • WebSocket
      • IntersectionObserver
  • 前端框架
    • Vue
      • 2.0
        • 列表渲染的key
        • 生命周期
        • diff算法
      • 3.0
        • 改变
        • provide/inject
        • 组件间可复用逻辑封装
        • diff算法
    • React
      • Component
      • Props
      • State
      • Context
      • Effect
      • Hooks
        • hook依赖列表
        • useMemo
        • useCallback
        • useEffect
      • API
        • memo
      • 子组件的无效渲染
      • 组件在开发模式下渲染两次
    • Vue-Router
    • Taro
    • Qiankun
  • 前端方案
    • 错误上报
    • 性能优化
    • 长列表优化原理
    • H5移动端适配
  • 工程化
    • 前端
      • 防止package-lock.json删除
      • 打包ESM和CommonJS
      • babel
      • webpack
      • pnpm
      • 多包管理
      • vite
      • 各种base
    • 服务端
      • Maven
  • 小程序
    • 小程序历史
    • 双线程架构
    • 生命周期
    • 更新机制
  • 服务端
    • Redis
    • Node.js
      • 核心
      • 进程守护
      • Koa
    • Java
      • 安装与配置
    • Restful API
  • DevOps
    • Nginx
    • Docker
      • 核心概念
      • 基础命令
    • K8s
    • Linux
      • shell及脚本
      • 文件目录操作
      • vi/vim
  • 计算机基础
    • 数据结构
      • 栈(Stack)
      • 队列(Queue)
      • 数组(Array)
      • 链表(Linked List)
      • 树(Tree)
      • 图(Graph)
      • 堆(Heap)
      • 散列表(Hash Table)
    • 算法
      • 查找
      • 排序
  • 计算机网络
    • 基础
    • TCP
      • 建立连接(三次握手)
      • 断开连接(四次挥手)
    • UDP
    • HTTP
      • HTTP/2
      • HTTPS
    • 常见网络攻击
      • XSS
      • CSRF
      • DDos
      • MITM
    • 浏览器缓存
  • 经典面试题
    • 箭头函数this-1
    • 箭头函数this-2
    • 数组转树
    • 控制并发数
    • 动态规划-二维数组全排列
    • 柯里化
Powered by GitBook
On this page
  • 一、apply
  • 二、call
  • 三、bind
  • 总结
  1. 前端基础
  2. JavaScript
  3. ES
  4. 函数

apply、call、bind

apply、call、bind实现原理

一、apply

语法:

fn.apply(thisArg[, argsArray])

注:有时候容易搞混apply和call的传参数到底谁接受的是数组,记忆小诀窍:apply和Array开头都是字母a,所以apply接受数组

实现:

Function.prototype.myApply = function (context, args) {
    //第一个参数为null或者undefined时,this指向全局对象window;值为原始值时(例如fn.apply('hello')),this指向该原始值的自动包装对象,如 String、Number、Boolean
    context = (context ?? window) || Object(context);

    //第二个参数可以不传,但类型必须为数组或者类数组
    if (args && !Array.isArray(args)) {
        throw new Error('第二个参数必须为数组')
    }

    //为了避免函数名与上下文(context)的属性发生冲突,使用Symbol类型作为唯一值
    const key = Symbol();
    context[key] = this; // this === fn

    const result = args ? context[key](...args) : context[key]();

    //函数执行完成后删除该属性
    delete context[key];

    return result;
}

function sayHi(msg) {
    console.log(this);
    console.log(`Hi, ${this.name} ${msg}`);
}
sayHi.myApply(undefined) // window
sayHi.myApply(null) // window
sayHi.myApply(1) // Number
sayHi.myApply('11') // String
sayHi.myApply(true) // Boolean
sayHi.myApply({ name: 'yuyy' }, ['how old are you?'])

思路:

  1. 确定参数,并绑定到Function的原型上

  2. 完善第一个参数:如果为null或者undefined,则默认值是window;否则,需要用对象包裹。

context = (context ?? window) || Object(context);
  1. 校验第二个参数是否为数组,否则报错

  2. 将this绑定到context上,避免重复用symbol作为key,然后对函数进行执行

  3. 恢复context:将this从context上删除

  4. 返回结果

二、call

语法:

fn.call(thisArg[, arg1, arg2, ...])

实现:

Function.prototype.myCall = function (context, ...args) {
    context = (context ?? window) || Object(context);

    const key = Symbol();
    context[key] = this;

    const result = context[key](...args);

    delete context[key];

    return result
}

function sayHi(msg) {
    console.log(`Hi, ${this.name} ${msg}`);
}

sayHi.myCall({ name: 'yuyy' }, 'how old are you?')
sayHi.myCall(null, 'how old are you?')

思路:

除了不需要校验参数,其他同apply

三、bind

语法:

fn.bind(thisArg[, arg1[, arg2[, ...]]])

注:没有对函数进行执行,而是指定了this后,生成了一个函数的拷贝

实现:

Function.prototype.myBind = function (context, ...args) {
    const _self = this; // this指向原始函数

    // 关键点1: 声明一个新函数
    const newFn = function (...rest) {
        return _self.call(context, ...args, ...rest)
    }

    // 关键点2: 补全原型对象(原始函数如果是箭头函数,没有原型对象,会导致new报错)
    if (_self.prototype) {
        newFn. = Object.create(_self.prototype)
    }

    return newFn
}

function sayHi(msg) {
    console.log(`Hi, ${this.name} ${msg}`);
}
const newSayHi = sayHi.myBind({ name: 'yuyy' }, 'how old are you?')
newSayHi()

思路:柯里化方式实现

  1. 拷贝this(为什么要拷贝?避免newFun中出现this.call())

const _self = this
  1. 生成新函数,将参数传入,this来自源于绑定时的上下文

const newFn = function (...rest) {
    return _self.call(context, ...args, ...rest)
}
  1. 判断函数是否有原型,有则复制给newFn,有些函数是没有原型的,比如箭头函数

if (_self.prototype) {
    newFn.prototype = Object.create(_self.prototype)
}
  1. 返回新函数

总结

  • 三者都是Function原型对象的函数,每个函数都会默认继承

  • 三折的作用都是显式改变函数的this指向

  • apply和call除了接收参数方式不同,效果相同,都会执行当前函数

  • bind只是对当前函数做了一次柯里化,并不执行当前函数

Previous函数Nextnew

Last updated 1 year ago