面试官: 请你手写一份 Call()源码,看完此篇不用担心!

前言

一盏茶的功夫带你掌握烦人的this指向问题

在上篇文章中,我们讲到了this的五种绑定规则,了解了这五种绑定规则对this的指向问题可以不用再害怕,对this或是五种绑定规则不太熟悉的小伙伴,建议先去看看我的上篇文章,文章链接已放在上面,配合本章食用效果更佳~

今天我们要讲的是显示绑定中的一种方法,call()方法的源码,我们在面试的过程中,面试官大大有时会叫我们手写一个call()的源码,这时候有些小伙伴就会慌了,其实call()就是靠隐式绑定实现的,我们先来复习一下隐式绑定规则显式绑定规则

隐式绑定

如果函数被一个对象作为方法所调用时,那么this就会指向该对象。我们来看一个例子:

js 复制代码
function foo() {
    console.log(this.a);
  }
  var obj = {
    a: '来颗奇趣蛋',
    func: foo
}
obj.func()

调用 objfunc 方法,在这一步,func 方法被作为 obj 对象的方法调用,因此隐式绑定规则会将 this 绑定到 obj。因此,this.a 将打印出 obj 对象的属性 a 的值:

我们来看看输出结果:

显示绑定 ---call, apply, bind

显示绑定是我们通过call,apply,bind,改变this的指向,我们一起来看看例子:

js 复制代码
function foo() {
    console.log(this.a);
}

var obj = {
    a: 2
}

foo()

如果这样调用foo(),那么就是this默认绑定,this指向全局,那么输出undefined,那么我们怎么让this指向obj,输出2呢?

1。 使用call()

js 复制代码
function foo() {
    console.log(this.a);
}

var obj = {
    a: 2
}

foo.call(obj)

call的作用就是强行把foo中的this指向obj,我们来输出以下来看看:

我们今天就主要讲讲call(),对另外两种方法感兴趣的小伙伴们可以点击链接去那篇文章看看。

call()源码

func.call(obj)为什么可以将函数functhis指向绑定的对象obj,这是因为call()干了一个操作,它先将函数func放进obj里面,然后obj.func(),使函数作为对象的方法调用,达成隐式绑定的规则,这样就成功使函数func中的this指向obj,之后再将对象object内部的func给删除。我们用伪代码来看一下:

js 复制代码
{
    func: func
}
obj.func()
delete obj.func

这样大家是不是了解一些call()方法的底层逻辑了呢?它就是通过隐式绑定规则,将函数中的this指向对象obj中。

自己打造一份call()源码

在面试过程中,面试官有时会叫我们自己打造一份call(),功能需要跟call()一样,我们一起来看看怎么实现吧:

js 复制代码
Function.prototype.myCall = function (context) {
    if (!this instanceof Function) {
        throw new TypeError('myCall is not a function')
    }
    context.fn = this
    context.fn()
    delete context.fn
}

这段代码是一个简化版的 call 方法的自定义实现,添加到 Function 原型上,可以用 myCall 来模拟 call 方法。让我逐步解释这段代码:

js 复制代码
Function.prototype.myCall = function (context) {
    if (!this instanceof Function) {
        throw new TypeError('myCall is not a function');
    }
    context.fn = this;
    context.fn();
    delete context.fn;
};
  1. Function.prototype.myCall: 这一行将一个自定义的 myCall 方法添加到 Function 的原型上。这样一来,所有的函数对象都可以调用这个方法。
  2. throw new TypeError('myCall is not a function'): 如果检测到 this 不是函数,抛出一个类型错误。
  3. context.fn = this: 在传入的 context 对象上创建一个名为 fn 的属性,并将其值设置为调用 myCall 方法的函数(this)。
  4. context.fn():context 上调用 fn 方法,即调用了原始函数,并且此时 this 就是 context 对象。
  5. delete context.fn: 删除 context 上的 fn 属性,以防止给 context 对象添加了不必要的属性。

我们来验证一下此函数有没有实现call()的功能:

js 复制代码
var obj = {
    a: 1,
}
function foo(x, y) {
    console.log(this.a);
}    

Function.prototype.myCall = function (context) {
    if (!this instanceof Function) {
        throw new TypeError('myCall is not a function')
    }
    context.fn = this
    context.fn()
    delete context.fn
}

foo.myCall(obj)

我们来输出一下:

可以看到,输出了 1,说明函数中的this已经指向了对象obj,我们这个手写函数也算是实现了call()的功能啦。

不过,我们在实际项目中,应使用原生的 call 方法,因为它已经经过严格的测试和优化。

相关推荐
理想不理想v9 分钟前
vue经典前端面试题
前端·javascript·vue.js
不收藏找不到我10 分钟前
浏览器交互事件汇总
前端·交互
小阮的学习笔记23 分钟前
Vue3中使用LogicFlow实现简单流程图
javascript·vue.js·流程图
YBN娜24 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=24 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
minDuck28 分钟前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
小政爱学习!1 小时前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。1 小时前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼1 小时前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k09331 小时前
sourceTree回滚版本到某次提交
开发语言·前端·javascript