Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >apply/call/bind 自我实现

apply/call/bind 自我实现

作者头像
前端迷
发布于 2019-09-19 07:43:04
发布于 2019-09-19 07:43:04
41800
代码可运行
举报
文章被收录于专栏:前端迷前端迷
运行总次数:0
代码可运行

call/apply/bind 日常编码中被开发者用来实现 “对象冒充”,也即 “显示绑定 this“。 https://github.com/ZengLingYong/Blog/issues/30

面试题:“call/apply/bind源码实现”,事实上是对 JavaScript 基础知识的一个综合考核。

相关知识点:

  1. 作用域;
  2. this 指向;
  3. 函数柯里化;
  4. 原型与原型链;

call/apply/bind 的区别

  1. 三者都可用于显示绑定 this;
  2. call/apply 的区别方式在于参数传递方式的不同;
    • fn.call(obj, arg1, arg2, ...), 传参数列表,以逗号隔开;
    • fn.apply(obj, [arg1, arg2, ...]), 传参数数组;
  3. bind 返回的是一个待执行函数,是函数柯里化的应用,而 call/apply 则是立即执行函数

思路初探

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Function.prototype.myCall = function(context) {
    // 原型中 this 指向的是实例对象,所以这里指向 [Function: bar]
    console.log(this);  // [Function: bar]
    // 在传入的上下文对象中,创建一个属性,值指向方法 bar
    context.fn = this;  // foo.fn = [Function: bar]
    // 调用这个方法,此时调用者是 foo,this 指向 foo
    context.fn();
    // 执行后删除它,仅使用一次,避免该属性被其它地方使用(遍历)
    delete context.fn;
};

let foo = {
    value: 2
};

function bar() {
    console.log(this.value);
}
// bar 函数的声明等同于:var bar = new Function("console.log(this.value)");

bar.call(foo);   // 2;

call 的源码实现

初步思路有个大概,剩下的就是完善代码。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// ES6 版本
Function.prototype.myCall = function(context, ...params) {
  // ES6 函数 Rest 参数,使其可指定一个对象,接收函数的剩余参数,合成数组
  if (typeof context === 'object') {
    context = context || window;
  } else {
    context = Object.create(null);
  }

  // 用 Symbol 来作属性 key 值,保持唯一性,避免冲突
  let fn = Symbol();
  context[fn] = this;
  // 将参数数组展开,作为多个参数传入
  const result = context[fn](...params);
  // 删除避免永久存在
  delete(context[fn]);
  // 函数可以有返回值
  return result;
}

// 测试
var mine = {
    name: '以乐之名'
}

var person = {
  name: '无名氏',
  sayHi: function(msg) {
    console.log('我的名字:' + this.name + ',', msg);
  }
}

person.sayHi.myCall(mine, '很高兴认识你!');
// 我的名字:以乐之名,很高兴认识你!

知识点补充:

  1. ES6 新的原始数据类型 Symbol,表示独一无二的值;
  2. Object.create(null) 创建一个空对象
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 创建一个空对象的方式

// eg.A
let emptyObj = {};

// eg.B
let emptyObj = new Object();

// eg.C
let emptyObj = Object.create(null);

使用 Object.create(null) 创建的空对象,不会受到原型链的干扰。原型链终端指向 null,不会有构造函数,也不会有 toStringhasOwnPropertyvalueOf 等属性,这些属性来自 Object.prototype。有原型链基础的伙伴们,应该都知道,所有普通对象的原型链都会指向 Object.prototype

所以 Object.create(null) 创建的空对象比其它两种方式,更干净,不会有 Object 原型链上的属性。

ES5 版本:

  1. 自行处理参数;
  2. 自实现 Symobo
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// ES5 版本

// 模拟Symbol
function getSymbol(obj) {
  var uniqAttr = '00' + Math.random();
  if (obj.hasOwnProperty(uniqAttr)) {
    // 如果已存在,则递归自调用函数
    arguments.callee(obj);
  } else {
    return uniqAttr;
  }
}

Function.prototype.myCall = function() {
  var args = arguments;
  if (!args.length) return;

  var context = [].shift.apply(args);
  context = context || window;

  var fn = getSymbol(context);
  context[fn] = this;

  // 无其它参数传入
  if (!arguments.length) {
    return context[fn];
  }

  var param = args[i];
  // 类型判断,不然 eval 运行会出错
  var paramType = typeof param;
  switch(paramType) {
    case 'string':
      param = '"' + param + '"'
    break;
    case 'object':
      param = JSON.stringify(param);
    break;
  }

  fnStr += i == args.length - 1 ? param : param + ',';

  // 借助 eval 执行
  var result = eval(fnStr);
  delete context[fn];
  return result;
}

// 测试
var mine = {
    name: '以乐之名'
}

var person = {
  name: '无名氏',
  sayHi: function(msg) {
    console.log('我的名字:' + this.name + ',', msg);
  }
}

person.sayHi.myCall(mine, '很高兴认识你!');
// 我的名字:以乐之名,很高兴认识!

apply 的源码实现

call 的源码实现,那么 apply 就简单,两者只是传递参数方式不同而已。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Function.prototype.myApply = function(context, params) {
    // apply 与 call 的区别,第二个参数是数组,且不会有第三个参数
    if (typeof context === 'object') {
        context = context || window;
    } else {
        context = Object.create(null);
    }

    let fn = Symbol();
    context[fn] = this;
    const result context[fn](...params);
    delete context[fn];
    return result;
}

bind 的源码实现

  1. bindcall/apply 的区别就是返回的是一个待执行的函数,而不是函数的执行结果;
  2. bind 返回的函数作为构造函数与 new 一起使用,绑定的 this 需要被忽略;

调用绑定函数时作为this参数传递给目标函数的值。如果使用new运算符构造绑定函数,则忽略该值。—— MDN

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Function.prototype.bind = function(context, ...initArgs) {
    // bind 调用的方法一定要是一个函数
    if (typeof this !== 'function') {
      throw new TypeError('not a function');
    }
    let self = this;
    let F = function() {};
    F.prototype = this.prototype;
    let bound = function(...finnalyArgs) {
      // 将前后参数合并传入
      return self.call(this instanceof F ? this : context || this, ...initArgs, ...finnalyArgs);
    }
    bound.prototype = new F();
    return bound;
}

不少伙伴还会遇到这样的追问,不使用 call/apply,如何实现 bind

骚年先别慌,不用 call/apply,不就是相当于把 call/apply 换成对应的自我实现方法,算是偷懒取个巧吧。

本篇 call/apply/bind 源码实现,算是对之前文章系列知识点的一次加深巩固。

“心中有码,前路莫慌。”

参考文档:

  • MDN - Function.prototype.bind()
  • 不用call和apply方法模拟实现ES5的bind方法
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-09-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端迷 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
🎉工程化Docker实践🎉
Docker已成为现代应用程序开发和部署的重要工具。然而,仅仅使用Docker并不足以确保应用程序的可靠性、可扩展性和可维护性。本文将介绍一系列工程化的最佳实践,帮助开发者在使用Docker时提高开发效率、降低风险,并确保应用程序在生产环境中的稳定运行。
can4hou6joeng4
2023/11/15
3070
Docker 镜像解密:分层存储与镜像构建原理
本文介绍了 Docker 镜像的分层存储与构建原理。首先,我们对 Docker 镜像的重要性和广泛应用进行了简要介绍,并提出了本文要解密的主题:分层存储与镜像构建原理。随后,我们深入探讨了分层存储的概念和用途,以及它如何节省存储空间。接着,我们详细描述了 Docker 镜像的构建过程,包括 Dockerfile 的作用、如何编写一个基本的 Dockerfile,以及如何利用缓存层提高构建效率。为了更好地理解镜像构建的实际操作过程,我们通过一个简单的 Web 服务器容器镜像实例逐步演示了每个构建步骤和相应的镜像层。最后,我们提供了一些最佳实践和优化建议,帮助读者在构建自己的镜像时遵循最佳方法,以提高容器化应用的性能和安全性。通过深入理解 Docker 镜像的分层存储与构建原理,读者将能够更有效地应用 Docker 技术,优化容器化应用的开发与部署流程。
猫头虎
2024/04/08
1K0
Docker 镜像解密:分层存储与镜像构建原理
一文零基础教你学会 Docker 入门到实践
Docker 自 2013 年发布至今一直备受关注,从招聘面试角度来看有些职位对于了解 Docker、K8S 这些也有一些加分项,同时学习 Docker 也是后续学习 K8S 的基础,但是对于 Docker 很多人也需并不了解,其实 Docker 也并没有那么难,本文从 Docker 入门到应用实践为大家进行讲解,中间也列举了很多实例,希望能帮助大家更好的理解。
五月君
2019/09/27
8290
一文零基础教你学会 Docker 入门到实践
Docker-Dockerfile讲解(一)
作者介绍:简历上没有一个精通的运维工程师。请点击上方的蓝色《运维小路》关注我,下面的思维导图也是预计更新的内容和当前进度(不定时更新)。
运维小路
2024/11/27
1190
Docker-Dockerfile讲解(一)
Docker快速入门(二)
上篇文章《Docker快速入门(一)》介绍了docker的基本概念和image的相关操作,本篇将进一步介绍image,容器和Dockerfile。
用户1432189
2018/09/05
7630
Docker快速入门(二)
Docker 快速部署一个 node App
Docker 的安装看官方文档,文档很详细了 https://docs.docker.com/docker-for-mac/install/
JS菌
2019/07/17
8720
Docker 快速部署一个 node App
Docker(二):Dockerfile 使用介绍
上一篇文章Docker(一):Docker入门教程介绍了 Docker 基本概念,其中镜像、容器和 Dockerfile 。我们使用 Dockerfile 定义镜像,依赖镜像来运行容器,因此 Dock
纯洁的微笑
2018/04/18
1.3K0
Docker(二):Dockerfile 使用介绍
Docker学习——创建镜像(四) 顶
一、利用 commit 理解镜像构成 注意: docker commit 命令除了学习之外,还有一些特殊的应用场合,比如被入侵后保存现场等。 但是,不要使用 docker commit 定制镜像,定制镜像应该使用 Dockerfile 来完成。 如果你想要定制镜像请查看下一小节。 镜像是容器的基础,每次执行 docker run 的时候都会指定哪个镜像作为容器运行的基础。 在之前的例子中,我们所使用的都是来自于 Docker Hub 的镜像。 直接使用这些镜像是可以满足一定的需求,而当这些镜像无法直接满足
wuweixiang
2018/12/07
7100
Docker 搭建你的第一个 Node 项目到服务器
关于 Docker 的概念是确实不太好总结,下面我通过四点向你说明 Docker 到底是个什么东西。
coder_koala
2019/12/24
1.4K0
docker学习系列5 nginx 容器
docker run 其实等于 docker create + start 因为tag为 1.15 的 nginx 镜像并不在本地,会先下载再运行
mafeifan
2018/09/10
6010
docker学习系列5  nginx 容器
Docker容器化部署,这些最佳实践你不可不知
Docker 作为一种开源的容器化技术,在当今的软件开发和部署领域中发挥着至关重要的作用。它具有诸多显著优势,为开发者和运维人员带来了极大的便利。
天创项目管理分享
2024/11/20
1.3K0
Docker容器化部署,这些最佳实践你不可不知
使用 Dockerfile 定制镜像
最近公司项目上线原因,一直加班。没有时间更新文章。隔壁部门需要我提供sdk的打包的支持,所以一直在学习docker。原文 从刚才的 docker commit 的学习中,我们可以了解到,镜像的定制实际
若与
2018/04/25
1.3K0
使用 Dockerfile 定制镜像
docker使用过程中需要留意的几个知识点
不要使用从整个操作系统从头安装的模式来构建应用,比如我们使用node环境的时候,我们应该直接使用node镜像,而不是使用centos或者ubuntu镜像,然后自己安装node环境。
程序那些事儿
2023/03/07
7390
docker使用过程中需要留意的几个知识点
.Git信息泄露漏洞检测防范
Git是一个开源的分布式版本控制系统,在执行git init初始化目录的时候会在当前目录下自动创建一个.git目录,用来记录代码的变更记录等,发布代码的时候如果没有把.git这个目录删除直接发布到服务器上,那么攻击者就可以通过它来恢复源代码,从而造成信息泄露的安全问题
Al1ex
2023/12/01
9340
Docker 进阶之 Dockerfile 详解
我们使用 Dockerfile 定义镜像,依赖镜像来运行容器,因此 Dockerfile 是镜像和容器的关键,Dockerfile 可以非常容易的定义镜像内容,同时在我们后期的微服务实践中,Dockerfile 也是重点关注的内容,今天我们就来一起学习它。
看、未来
2022/06/30
3.4K2
Docker 进阶之 Dockerfile 详解
Docker 基于Dockerfile创建镜像实践
简单说,就是创建一个服务型的镜像,即运行基于该镜像创建的容器时,基于该容器自动开启一个服务。具体来说,是创建一个部署了nginx,uwsgi,python,django项目代码的镜像,运行基于该镜像创建的容器时,自动开启nginx,uwsgi等服务。简单理解就是在容器内部,通过nginx+uwsgi部署Django项目
授客
2021/08/18
9530
一杯茶的时间,上手 Docker
很多朋友跟我们反馈说,“一杯茶”纯粹就是忽悠人,写那么长,怎么可能在一杯茶的时间内看完?实际上,“饮茶”的方式因人而异,不同的读者自有不同的节奏。你完全可以选择一目十行、甚至只浏览一下插图,几分钟的时间便能看完;也可以选择跟着我们一步一步动手实践,甚至在有些地方停下来思考一番,虽然需要花更多的时间,但是我们相信这份投入的时间一定是值得的。
前端迷
2020/02/19
6280
一杯茶的时间,上手 Docker
【重识云原生】第六章容器6.1.10节——DockerFile解析
        首先通过一张图来了解 Docker 镜像、容器和 Dockerfile 三者之间的关系。
江中散人_Jun
2022/09/30
1.6K0
【重识云原生】第六章容器6.1.10节——DockerFile解析
Docker重学系列之Dockerfile
Dockerfile可以认为是Docker镜像的描述文件,是由一系列命令和参数构成的脚本。主要作用是用来构建docker镜像的构建文件。
大忽悠爱学习
2022/05/10
2.1K0
Docker重学系列之Dockerfile
聊聊在生产环境中使用Docker的最佳实践有那些策略?
近几年Docker的使用不断增长📈,上至公司团队,下至普通开发者。 但是并不是每个团队(或者个人)在使用 Docker 的时候都能做到 Docker 的最佳实践 👀, 本文将从以下几个方面来聊聊 Docker 工程化实践中的最佳方案.
用户1418987
2023/10/16
1.1K0
聊聊在生产环境中使用Docker的最佳实践有那些策略?
推荐阅读
相关推荐
🎉工程化Docker实践🎉
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验