【JavaScript】一次搞清楚call & bind原理

简介: 前言今天被之前的学弟问到一个问题,面试的过程中有无面试官问过你call与bind的原理,并让你手写,答案是当然有的。

前言

今天被之前的学弟问到一个问题,面试的过程中有无面试官问过你callbind的原理,并让你手写,答案是当然有的。

工作的这几年自己也做过面试官,作为一个合格的面试官,个人认为有两点比较重要,第一需要知道公司需要的技术人员是什么级别,第二根据需要的级别来判断求职者的回答是否达到标准。所以对于这道题,写不写的出来不是关键,关键是看你的思路是否清晰。

当然如果是一个初级开发甚至中级开发并不知道如何去实现一个call,但是我觉得也没什么,毕竟在工作中这种东西除了在某些设计上给你提供思路,一般也不会遇到。

自己写一写记录一下。

Call

call做了什么

  1. 参数 context, params
  2. this指向contextparams传递给当前调用call的函数
  3. 函数执行 有一点需要注意的是:call的context不传,或者传递为null,统一指向window

实现

Function.prototype.selfCall = function( context, ...params ) {
    context == null ? context = window : null
    !/^(object|function)&/.test( typeof context ) ? context = Object(context) : null
    let _this = this, result = null, UNIQUE_KEY = Symbol('UNIQUE_KEY')
    context[UNIQUE_KEY] = _this
    result = context[UNIQUE_KEY](...params)
    delete context[UNIQUE_KEY]
    return result
}
复制代码

解释一下都操作干了啥:

  • 判断context是不是没传,这里偷了个懒,undefined == null是true
  • 判断context是不是引用数据类型的,不是的话转成引用数据类型
  • 保留this指向,创建一个 Symbol key,不乱写一个是怕自己定义的与context上的冲突
  • 把当前函数放到context中,即改变等会函数执行的this指向
  • 执行函数,注意📢,这里函数执行是通过context.UNIQUE_KEY()执行的,也就是函数的this指向context,拿到结果
  • 返回结果

bind

bind比call多一个不立即执行

Function.prototype.selfBind = function( context, ...outParams ) {
    let _this = this
    return function(...innerParams) {
        _this.selfCall( context, ...outParams.concat(...innerParams ))
    }
}


目录
相关文章
|
1月前
|
自然语言处理 JavaScript 前端开发
深入理解JavaScript中的闭包:原理与实战
【10月更文挑战第12天】深入理解JavaScript中的闭包:原理与实战
|
1月前
|
JavaScript 前端开发
JS高级—call(),apply(),bind()
【10月更文挑战第17天】call()`、`apply()`和`bind()`是 JavaScript 中非常重要的工具,它们为我们提供了灵活控制函数执行和`this`指向的能力。通过合理运用这些方法,可以实现更复杂的编程逻辑和功能,提升代码的质量和可维护性。你在实际开发中可以根据具体需求,选择合适的方法来满足业务需求,并不断探索它们的更多应用场景。
11 1
|
1月前
|
前端开发 JavaScript
深入理解JavaScript中的事件循环(Event Loop):从原理到实践
【10月更文挑战第12天】 深入理解JavaScript中的事件循环(Event Loop):从原理到实践
37 1
|
1月前
|
数据采集 JavaScript 前端开发
JavaScript逆向爬虫——无限debugger的原理与绕过
JavaScript逆向爬虫——无限debugger的原理与绕过
|
1月前
|
自然语言处理 JavaScript 前端开发
深入理解JavaScript中的闭包:原理、应用与代码演示
【10月更文挑战第12天】深入理解JavaScript中的闭包:原理、应用与代码演示
|
1月前
|
自然语言处理 JavaScript 前端开发
深入理解JavaScript闭包:原理与应用
【10月更文挑战第11天】深入理解JavaScript闭包:原理与应用
20 0
|
1月前
|
JavaScript 前端开发 开发者
深入理解JavaScript中的闭包:原理与应用
【10月更文挑战第8天】深入理解JavaScript中的闭包:原理与应用
|
3月前
|
前端开发 JavaScript 开发者
揭秘JavaScript魔法三剑客:call、apply、bind,解锁函数新世界,你的前端之路因它们而精彩!
【8月更文挑战第23天】在 JavaScript 的世界里,`call`、`apply` 和 `bind` 这三个方法常常让新手感到困惑。它们都能改变函数执行时的上下文(即 `this` 的指向),但各有特点:`call` 接受一系列参数并直接调用函数;`apply` 则接收一个参数数组,在处理不确定数量的参数时特别有用;而 `bind` 不会立即执行函数,而是创建一个新版本的函数,其 `this` 上下文已被永久绑定。理解这三个方法能帮助开发者更好地运用函数式编程技巧,提升代码灵活性和可维护性。
38 0
|
2月前
|
JavaScript 前端开发
this指向的几种情况以及js简单实现call、apply、bind___六卿
本文讨论了JavaScript中`this`的指向规则,并提供了`call`、`apply`和`bind`方法的简单实现,用于改变函数的`this`指向。
17 0
this指向的几种情况以及js简单实现call、apply、bind___六卿
|
2月前
|
JavaScript
js的this与call,apply,bind
js的this与call,apply,bind