我们知道,JavaScript的bind、apply、call是三个非常重要的方法。bind可以返回固定this、固定参数的函数包装;apply和call可以修改成员函数this的指向。实现bind、apply、call是前端面试的高频问题,也能让我们更好地理解和掌握JavaScript的函数的相关知识。本文将介绍如何自行实现bind、apply和call。

前情提要

本文先给出如下类定义和实例定义。

// Person类,每个人有姓名,有打印姓名的方法
function Person(_name) {
this.name = _name
this.sayMyName = function (postfix) {
console.log(this.name + postfix)
}
}
// 两个实例
let alex = new Person('Alex')
let bob = new Person('Bob')

实现bind

不妨先回顾一下bind的使用方法:

let sayBobName = alex.sayMyName.bind(bob, '?')
sayBobName() // Bob?

可见:

  • bind返回一个函数副本(包装过的函数),固定this和实参。this可不指向调用者
  • bind是函数原型上的一个方法

了解了这两点,就不难写出实现:

function MyBind(context, ...args) {
let that = this // this是调用者,也就是被包装的函数(alex.sayMyName)
return function () { // 返回一个包装过的函数
return that.call(context, ...args) // 其返回值是以context为this的执行结果
}
}
Function.prototype.bind = MyBind

实现call

在实现bind的过程中我们用到了call。那么如何实现一个call?不妨也回顾一下call的使用方法:

alex.sayMyName.call(bob, '!') // Bob!

可见:

  • bind修改当前函数的this,可使其不指向调用者
  • 参数以...rest形式传入

了解了这两点,也不难写出实现:

function MyCall(context, ...args) {
context._fn = this // this是调用者,也就是当前函数。此步给context绑上该函数
// 有个细节问题是,可能需要备份原先的context._fn,避免意外覆盖
let ret = context._fn(..args) // 模仿context自己调用_fn
delete context._fn // 移除绑的函数
return ret
}
Function.prototype.call = MyCall

实现apply

apply和call的作用相同,使用方法基本类似,唯一的不同是:

  • 参数以数组形式传入

故可写出实现:

function MyApply(context, args) {
return MyCall(context, ...args)
}
Function.prototype.apply = MyApply

稳定的三角

从上面我们看出,apply和call可以实现bind,那么怎么用bind实现apply和call,从而打造这一铁三角关系呢?

    bind
/ \ 两两都可互相实现的三角形!
call -- apply

简单!立即执行这个函数副本就可以了!

function AnotherMyCall(context, ...args) {
return (this.bind(context, ...args))()
}

也谈如何实现bind、apply、call的更多相关文章

  1. javascript中bind,apply,call的相同和不同之处

    javasctipt中bind,apply,call的相同点是: 1,都是用来改变this的指向; 2,都可以通过后续参数进行传参; 3,第一个参数都是指定this要指向的对象; 不同点: 1,调用方 ...

  2. javascript 的bind/apply/call性能

    javascript有两种使用频率非常高的三个内置的功能:bind/apply/call.许多技术是基于高点,这些功能实现.这三个功能被用来改变的功能运行环境.从而达到代码复用的目的. 先来所说bin ...

  3. .bind.apply() 解决 new 操作符不能用与 apply 或 call 同时使用

    背景: 小明想要用数组的形式为 Cls.func 传入多个参数,他想到了以下的写法: var a = new Cls.func.apply(null, [1, 2, 3]); 然而浏览器却报错Cls. ...

  4. bind,apply,call的区别

    在Javascript中,bind, apply, call方法都可以显式绑定上下文this,这三者有何不同呢? bind只绑定this不马上执行 var person = { firstname: ...

  5. 箭头函数表达式和声名式函数表达式的区别以及 Function.prototype的bind, apply,call方法

    箭头函数不能用做构造函数 箭头函数没有arguments参数 箭头函数没有自己的this,是从作用域链上取this,是与箭头函数定义的位置有关的,与执行时谁调用无关,所以用call,apply,bin ...

  6. 浅谈JavaScript中的apply,call和bind

    apply,call,bine 这三兄弟经常让初学者感到疑惑.前两天准备面试时特地做了个比较,其实理解起来也不会太难. apply MDN上的定义: The apply() method calls ...

  7. JavaScript: bind apply call

    var foo = function(age,sex){ console.log(this.name,age,sex); }; //call将改变函数运行的context foo.call({name ...

  8. bind,apply,call区别总结

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. this bind apply call

    this 是当前函数运行时所属的对象bind 是指定一个函数运行时的上下文,也就是说把这个函数的this指向绑定到相应对象上,默认的暴露在全局御中的函数this指向widow对象, 严格模式下全局的t ...

随机推荐

  1. 泛微E-cology OA 远程代码执行漏洞

    分析文章:https://dwz.cn/bYtnsKwa http://127.0.0.1/weaver/bsh.servlet.BshServlet 若存在如上页面,则用下面数据包进行测试. POS ...

  2. 优秀DevOps工程师必会的33个面试题

    DevOps面试问题 01 您能告诉我们DevOps和Agile(敏捷)之间的根本区别吗? 答:尽管DevOps与敏捷方法(这是最流行的SDLC[Software Development Life C ...

  3. hdu1226超级密码 bfs

    题目链接:http://icpc.njust.edu.cn/Problem/Hdu/1226/ 题目大意是:寻找一个五百位之内的C进制密码,该密码是N的正整数倍,而且只能用给定的数构成密码,求这样的密 ...

  4. webapck学习笔记

    该笔记是博主学习webpack课程时做的笔记,里面加了一些自己的一些理解,也踩了一些坑,在笔记中基本上都更正过来了,分享给大家,如果发现什么问题,望告知,非常感谢. 1. 为什么要学webapck 为 ...

  5. java实现小功能

    // 自写逻辑,遍历所有匹配的子字符串坐标 private static void forMatchIdx(String str1, String str2) { char[] arr1 = str1 ...

  6. Python第六章-函数04-递归函数和拉姆达表达式

    五.递归函数 什么叫递归(recusive)? 你拿两个镜子互相面对着, 然后去看镜子, 会发现每个镜子中很多个镜子, 层层的嵌套, 无穷尽, 这就是一种递归! 从前有坐山, 山里有座庙, 庙里有个老 ...

  7. 图像配准:从SIFT到深度学习

      图像配准(Image Registration)是计算机视觉中的基本步骤.在本文中,我们首先介绍基于OpenCV的方法,然后介绍深度学习的方法. 什么是图像配准 图像配准就是找到一幅图像像素到另一 ...

  8. flask中 多对多的关系 主从表之间的的增删改查

    # 角色表模型class Role(db.Model): r_id = db.Column(db.Integer, primary_key=True) r_name = db.Column(db.St ...

  9. ANTLR随笔(一)

    学习背景 最近做项目需要开发一个类似Graphql的简单版的自定义查询功能. 功能主要是通过前端自定义的复查询条件来控制后端的查询字段以及最终返回的JSON格式. 最初准备直接使用Graphql实现但 ...

  10. A 现代艺术

    时间限制 : - MS   空间限制 : 165536 KB  评测说明 : 1s 问题描述 何老板是一个现代派的艺术家.他在一块由n*n的方格构成的画布上作画.一开始,所有格子里的数字都是0.何老板 ...