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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
call,apply,bind 的完全实现和理 解
apply(),call()是函数对象的一个方法,它的作用是改变函数的调用对象,它的第一个参数就表示改变后的调用这个函数的对象。因此,this指的就是第一个参数。
ZEHAN
2020/09/23
8030
call/apply/bind等源码实现
其实就是把要执行的函数,挂载到要知道this的对象身上,最后在delete到这个属性,即可
子夜星辰
2022/11/15
2900
面试题目之原生实现call、apply、bind
去年写了篇文章,call、apply和bind的区别,但是随着市场对前端工程师的要求越来越高,我们也要与时俱进,需要深入的了解一下这三个方法的原理。
挥刀北上
2019/07/19
8270
手写源码系列(一)——call、apply、bind
本文首发于知乎专栏——前端面试题汇总,大家可以通过文章底部的阅读原来来访问原文地址
用户1687375
2019/07/30
1.8K1
50行javaScript代码实现简单版的 call , apply ,bind 【中级前端面试基础必备】
其实 this 的指向,始终坚持一个原理:this 永远指向最后调用它的那个对象,这就是精髓。最关键所在
Peter谭金杰
2019/08/15
3670
通过自己实现函数 call,apply,bind 来了解他们的原理
我们知道函数中的call,apply,bind都是可以修改函数的this指向。关于函数的this指向问题可以转到Javascript this 指向问题这篇文章。
踏浪
2019/08/22
8270
JavaScript深入之手写call、apply、bind
模拟实现call 将函数设为对象的属性 执行该函数 删除该函数 Function.prototype.myCall = function(context = window, ...args) { if(this === Function.prototype) { return undefined } context = context || window const fn = Symbol() context[fn] = this const result = conte
peng_tianyu
2022/12/15
2740
一文理解 this、call、apply、bind
记得差不多在两年多之前写过一篇文章 两句话理解js中的this,当时总结的两句话原话是这样的:
木子星兮
2020/03/17
4190
call、apply、bind实现原理
call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。即:可以改变当前函数的this指向;还会让当前函数执行。
ClyingDeng
2022/11/29
4070
探究call、bind、apply知识点
Contents 1 call、bind、apply知识点 1.1 一、食用方式 1.2 二、使用场景 1.3 三、手写实现 1.4 关于 call、bind、apply知识点 一、食用方式 apply function.apply(obj, [param1,params2,...]) // obj:要绑定的this // 第二个参数:类数组或数组,作为function的参数传入 // 立即执行 call function.call(obj, param1, param2, ...) // obj:要绑定的
w候人兮猗
2020/07/01
3930
JS手撕(四) call、apply、bind、柯里化、偏函数
所以原理就是给传入的第一个参数添加临时方法,然后去调用这个临时方法,这个时候,这个方法的this就会指向第一个参数啦,最后当然还要临时方法删除掉,不留下痕迹。
赤蓝紫
2023/01/01
5290
彻底弄清 this call apply bind 以及原生实现[2019-3-12更新]
有关 JS 中的 this、call、apply 和 bind 的概念网络上已经有很多文章讲解了 这篇文章目的是梳理一下这几个概念的知识点以及阐述如何用原生 JS 去实现这几个功能
JS菌
2019/04/10
4040
彻底弄清 this call apply bind 以及原生实现[2019-3-12更新]
this,call,apply,bind(万字长文)
前言 大家好啊,我是吒儿?,每天努力一点点?,就能升职加薪?当上总经理出任CEO迎娶白富美走上人生巅峰?,想想还有点小激动呢?。 这是我的第13期文章内容✍,希望能够把每一处知识点,说明白,(当然,如
达达前端
2020/06/16
1.2K0
一文带你了解call、apply、bind的区别及源码实现
call、apply和bind都是JavaScript中Function对象的原型方法,它们的作用主要是改变函数的执行上下文(即this的值)以及传递参数。
用户6297767
2023/12/23
5410
JavaScript之手写call、apply、bind函数
😎 手写call函数 实现步骤: 判断调用对象是否为函数,即使我们是定义在函数的原型上的,但是可能出现使用call等方式调用的情况 判断传入上下文对象是否存在,如果不存在,则设置为window 处理传入的参数,截取第一个参数后的所有参数 将函数作为上下文对象的一个属性 使用上下文对象来调用这个方法,并保存返回结果 删除刚才新增的属性 Function.prototype.myCall=function(context){ //判断调用对象 if(typeof this !== 'funct
henu_Newxc03
2022/05/11
3350
手写apply、call、bind
各位宝宝,马上就要过中国年了,已经开启了放假模式了吗?放假了就好好的休息哈,该玩的时候玩、该学的时候学,就对了~
用户3258338
2020/02/17
4630
手写call , apply , bind 方法的实现
Symbol : 每个从 Symbol() 返回的 symbol 值都是唯一的。一个 symbol 值能作为对象属性的标识符;
心安事随
2024/07/29
1480
手写call , apply , bind 方法的实现
call、apply、bind
刚开始写技术笔记的时候,很浅显的写了一篇this的指向问题,现在看起来不能说错误百出,但也确实是没什么技术水平。今天分享自己对于call、apply、bind新的认识,并手写一个自己的call、apply、bind。
wade
2020/04/23
1.1K0
js的this、call、apply、bind、继承、原型链0.前言1.this2.call、apply、bind3.从call到继承
这些都是js基础进阶的必备了,有时候可能一下子想不起来是什么,时不时就回头看看基础,增强硬实力。
lhyt
2018/10/31
8670
彻底弄清 this call apply bind 以及原生实现
有关 JS 中的 this、call、apply 和 bind 的概念网络上已经有很多文章讲解了 这篇文章目的是梳理一下这几个概念的知识点以及阐述如何用原生 JS 去实现这几个功能
JS菌
2019/04/10
4420
彻底弄清 this call apply bind 以及原生实现
推荐阅读
相关推荐
call,apply,bind 的完全实现和理 解
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验