面试官问:能否模拟实现JS的bind方法(高频考点)

可以点击上方的话题JS基础系列,查看往期文章

写于2018年11月21日,发布在掘金阅读量1.3w+

前言

这是面试官问系列的第二篇,旨在帮助读者提升JS基础知识,包含new、call、apply、this、继承相关知识。
面试官问系列文章如下:感兴趣的读者可以点击阅读。
1.面试官问:能否模拟实现JS的new操作符
2.面试官问:能否模拟实现JS的bind方法(本文)
3.面试官问:能否模拟实现JS的call和apply方法
4.面试官问:JS的this指向
5.面试官问:JS的继承

用过React的同学都知道,经常会使用bind来绑定this

import React, { Component } from 'react';
class TodoItem extends Component{constructor(props){super(props);this.handleClick = this.handleClick.bind(this);}handleClick(){console.log('handleClick');}render(){return  (<div onClick={this.handleClick}>点击</div>);};
}
export default TodoItem;

那么面试官可能会问是否想过bind到底做了什么,怎么模拟实现呢。

附上之前写文章写过的一段话:已经有很多模拟实现bind的文章,为什么自己还要写一遍呢。学习就好比是座大山,人们沿着不同的路登山,分享着自己看到的风景。你不一定能看到别人看到的风景,体会到别人的心情。只有自己去登山,才能看到不一样的风景,体会才更加深刻。

先看一下bind是什么。从上面的React代码中,可以看出bind执行后是函数,并且每个函数都可以执行调用它。眼见为实,耳听为虚。读者可以在控制台一步步点开例子1中的obj:

var obj = {};
console.log(obj);
console.log(typeof Function.prototype.bind); // function
console.log(typeof Function.prototype.bind());  // function
console.log(Function.prototype.bind.name);  // bind
console.log(Function.prototype.bind().name);  // bound
Function.prototype.bind

因此可以得出结论1:

1、bindFunctoin原型链中Function.prototype的一个属性,每个函数都可以调用它。
2、bind本身是一个函数名为bind的函数,返回值也是函数,函数名是bound。(打出来就是bound加上一个空格)。知道了bind是函数,就可以传参,而且返回值'bound '也是函数,也可以传参,就很容易写出例子2
后文统一 bound 指原函数original bind之后返回的函数,便于说明。

var obj = {name: '若川',
};
function original(a, b){console.log(this.name);console.log([a, b]);return false;
}
var bound = original.bind(obj, 1);
var boundResult = bound(2); // '若川', [1, 2]
console.log(boundResult); // false
console.log(original.bind.name); // 'bind'
console.log(original.bind.length); // 1
console.log(original.bind().length); // 2 返回original函数的形参个数
console.log(bound.name); // 'bound original'
console.log((function(){}).bind().name); // 'bound '
console.log((function(){}).bind().length); // 0

由此可以得出结论2:

1、调用bind的函数中的this指向bind()函数的第一个参数。

2、传给bind()的其他参数接收处理了,bind()之后返回的函数的参数也接收处理了,也就是说合并处理了。

3、并且bind()后的namebound + 空格 + 调用bind的函数名。如果是匿名函数则是bound + 空格

4、bind后的返回值函数,执行后返回值是原函数(original)的返回值。

5、bind函数形参(即函数的length)是1bind后返回的bound函数形参不定,根据绑定的函数原函数(original)形参个数确定。

根据结论2:我们就可以简单模拟实现一个简版bindFn

// 第一版 修改this指向,合并参数
Function.prototype.bindFn = function bind(thisArg){if(typeof this !== 'function'){throw new TypeError(this + 'must be a function');}// 存储函数本身var self = this;// 去除thisArg的其他参数 转成数组var args = [].slice.call(arguments, 1);var bound = function(){// bind返回的函数 的参数转成数组var boundArgs = [].slice.call(arguments);// apply修改this指向,把两个函数的参数合并传给self函数,并执行self函数,返回执行结果return self.apply(thisArg, args.concat(boundArgs));}return bound;
}
// 测试
var obj = {name: '若川',
};
function original(a, b){console.log(this.name);console.log([a, b]);
}
var bound = original.bindFn(obj, 1);
bound(2); // '若川', [1, 2]

如果面试官看到你答到这里,估计对你的印象60、70分应该是会有的。但我们知道函数是可以用new来实例化的。那么bind()返回值函数会是什么表现呢。
接下来看例子3

var obj = {name: '若川',
};
function original(a, b){console.log('this', this); // original {}console.log('typeof this', typeof this); // objectthis.name = b;console.log('name', this.name); // 2console.log('this', this);  // original {name: 2}console.log([a, b]); // 1, 2
}
var bound = original.bind(obj, 1);
var newBoundResult = new bound(2);
console.log(newBoundResult, 'newBoundResult'); // original {name: 2}

例子3种可以看出this指向了new bound()生成的新对象。

可以分析得出结论3:

1、bind原先指向obj的失效了,其他参数有效。

2、new bound的返回值是以original原函数构造器生成的新对象。original原函数的this指向的就是这个新对象。另外前不久写过一篇文章:面试官问:能否模拟实现JS的new操作符。简单摘要:new做了什么:

1.创建了一个全新的对象。
2.这个对象会被执行[[Prototype]](也就是__proto__)链接。
3.生成的新对象会绑定到函数调用的this。
4.通过new创建的每个对象将最终被[[Prototype]]链接到这个函数的prototype对象上。
5.如果函数没有返回对象类型Object(包含Functoin, Array, Date, RegExg, Error),那么new表达式中的函数调用会自动返回这个新的对象。

所以相当于new调用时,bind的返回值函数bound内部要模拟实现new实现的操作。话不多说,直接上代码。

// 第三版 实现new调用
Function.prototype.bindFn = function bind(thisArg){if(typeof this !== 'function'){throw new TypeError(this + ' must be a function');}// 存储调用bind的函数本身var self = this;// 去除thisArg的其他参数 转成数组var args = [].slice.call(arguments, 1);var bound = function(){// bind返回的函数 的参数转成数组var boundArgs = [].slice.call(arguments);var finalArgs = args.concat(boundArgs);// new 调用时,其实this instanceof bound判断也不是很准确。es6 new.target就是解决这一问题的。if(this instanceof bound){// 这里是实现上文描述的 new 的第 1, 2, 4 步// 1.创建一个全新的对象// 2.并且执行[[Prototype]]链接// 4.通过`new`创建的每个对象将最终被`[[Prototype]]`链接到这个函数的`prototype`对象上。// self可能是ES6的箭头函数,没有prototype,所以就没必要再指向做prototype操作。if(self.prototype){// ES5 提供的方案 Object.create()// bound.prototype = Object.create(self.prototype);// 但 既然是模拟ES5的bind,那浏览器也基本没有实现Object.create()// 所以采用 MDN ployfill方案 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/createfunction Empty(){}Empty.prototype = self.prototype;bound.prototype = new Empty();}// 这里是实现上文描述的 new 的第 3 步// 3.生成的新对象会绑定到函数调用的`this`。var result = self.apply(this, finalArgs);// 这里是实现上文描述的 new 的第 5 步// 5.如果函数没有返回对象类型`Object`(包含`Functoin`, `Array`, `Date`, `RegExg`, `Error`),// 那么`new`表达式中的函数调用会自动返回这个新的对象。var isObject = typeof result === 'object' && result !== null;var isFunction = typeof result === 'function';if(isObject || isFunction){return result;}return this;}else{// apply修改this指向,把两个函数的参数合并传给self函数,并执行self函数,返回执行结果return self.apply(thisArg, finalArgs);}};return bound;
}

面试官看到这样的实现代码,基本就是满分了,心里独白:这小伙子/小姑娘不错啊。不过可能还会问this instanceof bound不准确问题。上文注释中提到this instanceof bound也不是很准确,ES6 new.target很好的解决这一问题,我们举个例子4:

instanceof 不准确,ES6 new.target很好的解决这一问题

function Student(name){if(this instanceof Student){this.name = name;console.log('name', name);}else{throw new Error('必须通过new关键字来调用Student。');}
}
var student = new Student('若');
var notAStudent = Student.call(student, '川'); // 不抛出错误,且执行了。
console.log(student, 'student', notAStudent, 'notAStudent');function Student2(name){if(typeof new.target !== 'undefined'){this.name = name;console.log('name', name);}else{throw new Error('必须通过new关键字来调用Student2。');}
}
var student2 = new Student2('若');
var notAStudent2 = Student2.call(student2, '川');
console.log(student2, 'student2', notAStudent2, 'notAStudent2'); // 抛出错误

细心的同学可能会发现了这版本的代码没有实现bind后的bound函数的nameMDN Function.name和lengthMDN Function.length。面试官可能也发现了这一点继续追问,如何实现,或者问是否看过es5-shim的源码实现L201-L335。如果不限ES版本。其实可以用ES5Object.defineProperties来实现。

Object.defineProperties(bound, {'length': {value: self.length,},'name': {value: 'bound ' + self.name,}
});

es5-shim的源码实现bind

直接附上源码(有删减注释和部分修改等)

var $Array = Array;
var ArrayPrototype = $Array.prototype;
var $Object = Object;
var array_push = ArrayPrototype.push;
var array_slice = ArrayPrototype.slice;
var array_join = ArrayPrototype.join;
var array_concat = ArrayPrototype.concat;
var $Function = Function;
var FunctionPrototype = $Function.prototype;
var apply = FunctionPrototype.apply;
var max = Math.max;
// 简版 源码更复杂些。
var isCallable = function isCallable(value){if(typeof value !== 'function'){return false;}return true;
};
var Empty = function Empty() {};
// 源码是 defineProperties
// 源码是bind笔者改成bindFn便于测试
FunctionPrototype.bindFn = function bind(that) {var target = this;if (!isCallable(target)) {throw new TypeError('Function.prototype.bind called on incompatible ' + target);}var args = array_slice.call(arguments, 1);var bound;var binder = function () {if (this instanceof bound) {var result = apply.call(target,this,array_concat.call(args, array_slice.call(arguments)));if ($Object(result) === result) {return result;}return this;} else {return apply.call(target,that,array_concat.call(args, array_slice.call(arguments)));}};var boundLength = max(0, target.length - args.length);var boundArgs = [];for (var i = 0; i < boundLength; i++) {array_push.call(boundArgs, '$' + i);}// 这里是Function构造方式生成形参length $1, $2, $3...bound = $Function('binder', 'return function (' + array_join.call(boundArgs, ',') + '){ return binder.apply(this, arguments); }')(binder);if (target.prototype) {Empty.prototype = target.prototype;bound.prototype = new Empty();Empty.prototype = null;}return bound;
};

你说出es5-shim源码bind实现,感慨这代码真是高效、严谨。面试官心里独白可能是:你就是我要找的人,薪酬福利你可以和HR去谈下。

最后总结一下

1、bindFunction原型链中的Function.prototype的一个属性,它是一个函数,修改this指向,合并参数传递给原函数,返回值是一个新的函数。
2、bind返回的函数可以通过new调用,这时提供的this的参数被忽略,指向了new生成的全新对象。内部模拟实现了new操作符。
3、es5-shim源码模拟实现bind时用Function实现了length
事实上,平时其实很少需要使用自己实现的投入到生成环境中。但面试官通过这个面试题能考察很多知识。比如this指向,原型链,闭包,函数等知识,可以扩展很多。
读者发现有不妥或可改善之处,欢迎指出。另外觉得写得不错,可以点个赞,也是对笔者的一种支持。

文章中的例子和测试代码放在github中bind模拟实现 github。bind模拟实现 预览地址 F12看控制台输出,结合source面板查看效果更佳。

// 最终版 删除注释 详细注释版请看上文
Function.prototype.bind = Function.prototype.bind || function bind(thisArg){if(typeof this !== 'function'){throw new TypeError(this + ' must be a function');}var self = this;var args = [].slice.call(arguments, 1);var bound = function(){var boundArgs = [].slice.call(arguments);var finalArgs = args.concat(boundArgs);if(this instanceof bound){if(self.prototype){function Empty(){}Empty.prototype = self.prototype;bound.prototype = new Empty();}var result = self.apply(this, finalArgs);var isObject = typeof result === 'object' && result !== null;var isFunction = typeof result === 'function';if(isObject || isFunction){return result;}return this;}else{return self.apply(thisArg, finalArgs);}};return bound;
}

推荐阅读

我在阿里招前端,我该怎么帮你?(现在还可以加模拟面试群)
如何拿下阿里巴巴 P6 的前端 Offer
如何准备阿里P6/P7前端面试--项目经历准备篇
大厂面试官常问的亮点,该如何做出?
如何从初级到专家(P4-P7)打破成长瓶颈和有效突破
若川知乎问答:2年前端经验,做的项目没什么技术含量,怎么办?
若川知乎高赞:有哪些必看的 JS库?

末尾

你好,我是若川,江湖人称菜如若川,历时一年只写了一个学习源码整体架构系列~(点击蓝字了解我)

  1. 关注若川视野,回复"pdf" 领取优质前端书籍pdf,回复"1",可加群长期交流学习

  2. 我的博客地址:https://lxchuan12.gitee.io 欢迎收藏

  3. 觉得文章不错,可以点个在看呀^_^另外欢迎留言交流~

精选前端好文,伴你不断成长

若川原创文章精选!可点击

小提醒:若川视野公众号面试、源码等文章合集在菜单栏中间【源码精选】按钮,欢迎点击阅读,也可以星标我的公众号,便于查找

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/276299.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

连续投影算法_中航国画荣获“2020 IAV国际视听嘉年华” 大屏幕投影显示行业三大奖项!...

近日&#xff0c;“2020IAV国际视听嘉年华”在深圳湾创新生态园隆重举行&#xff0c;航空工业上电下属子公司中航国画作为2020年迪拜世博会中国馆官方合作伙伴应邀参加此次高峰论坛&#xff0c;并在展会期间凭借4K系列双色激光工程投影机、LP160UL系列超高亮度双色激光工程投影…

CMDB功能分析与实现方案

CMDB功能分析与实现方案 CMDB系统的主要功能 1.用户管理,记录测试,开发,运维人员的用户表 2.业务线管理,记录业务的详情 3.项目管理,指定此项目属于那一条业务线 4.应用管理,指定此应用的开发人员 5.主机管理,记录主机管理员,连接的网络设备,存储,云主机,物理主机等信息 6.主机…

他的前端焦虑:30岁以后的前端路怎么走? 你想过吗~

马云曾说&#xff0c;员工的离职原因很多&#xff0c;唯两点最真实&#xff1a;一是钱&#xff0c;没给到位&#xff1b;二是心&#xff0c;委屈了。当时间来到了年末&#xff0c;离职、跳槽、年终奖又成了年终热词&#xff0c;而此时辞职好似成为了一场勇敢者的游戏&#xff0…

码云 Gitee 新增仓库访问之 IP 白名单功能

码云企业版上线 IP 白名单功能&#xff0c;该功能主要用于企业禁止非指定 IP 访问代码仓库。如下图所示&#xff1a;使用方法&#xff1a;进入企业控制面板 -> 管理 -> 安全设置添加允许访问 Git 仓库的 IP 地址启用安全选项&#xff1a;只允许在信任范围内推拉代码其他关…

福利 | 抽奖送现金送书《Web前端工程师修炼之道》

很多关注了我的公众号的粉丝可能都不知道我&#xff0c;趁这次机会简单介绍下。你好&#xff0c;我是若川。江西人&#xff0c;某不那么知名的陶瓷大学毕业生&#xff0c;目前在杭州从事前端开发工作。常以若川为名混迹于江湖。更详细的可以点击关于我我历时一年才写了《学习源…

蒙特卡洛方法_基本理论-蒙特卡洛方法与定积分

全球图形学领域教育的领先者、自研引擎的倡导者、底层技术研究领域的技术公开者&#xff0c;东汉书院在致力于使得更多人群具备内核级竞争力的道路上&#xff0c;将带给小伙伴们更多的公开技术教学和视频&#xff0c;感谢一路以来有你的支持。我们正在用实际行动来帮助小伙伴们…

字节面试官:如何实现Ajax并发请求控制

偷偷告诉你&#xff0c;点此抽奖送红包还送3本比红宝书还贵的书实现一个批量请求函数 multiRequest(urls, maxNum)&#xff0c;要求如下&#xff1a; • 要求最大并发数 maxNum • 每当有一个请求返回&#xff0c;就留下一个空位&#xff0c;可以增加新的请求 • 所有请求完成后…

制造行业电子化签约及印控一体化解决方案

当生产“智造化”、营销“数字化”成为趋势&#xff0c;生产制造型企业如何实现产品生产-销售全流程提速降本&#xff1f;生产制造型企业为了在生产、营销环节降低成本、提升效率&#xff0c;经营模式上常有如下特征&#xff1a;• 原料导向&#xff0c;多点协同生产&#xff1…

一起手写Vue3核心模块源码,掌握阅读源码的正确方法

最近和一个猎头聊天&#xff0c;说到现在前端供需脱节的境况。一方面用人方招不到想要的中高级前端&#xff0c;另一方面市场上有大量初级前端薪资要不上价。特别是用 Vue 框架的&#xff0c;因为好上手&#xff0c;所以很多人将 Vue 作为入门框架&#xff0c;但学得深的人并不…

2020 前端技术发展回顾

大家好&#xff0c;我是若川&#xff0c;今天给大家分享一篇来自阿里妈妈前端快爆的好文。另外&#xff0c;偷偷告诉你&#xff0c;截止今晚9点 点此抽奖送红包还送3本比红宝书还贵的书可以点击文章末尾阅读原文直达知乎链接&#xff0c;以下是正文2020 终究是一个不平凡的一年…

第一章知识点

第一章知识点 一&#xff1a;SQL语言 1&#xff0c;结构化查询语言&#xff0c;是关系数据库的标准语言 2&#xff0c;分类&#xff1a; 2.1&#xff1a;数据操作语言&#xff1a;DML&#xff1b;包括&#xff1a;即增删查改&#xff1b;insert&#xff0c;update&#xff0c;d…

2021年,推荐这几个优质公众号碎片化学习

2021 年了&#xff0c;前端技术日新月异&#xff0c;发展迅速&#xff0c;前端公众号是不是感觉越来越多了&#xff1f;在着辞旧迎新之际&#xff0c;这里盘点几个前端开发工程师 2021 年必须关注的优质公众号&#xff0c;希望对你有所帮助。大家可以像我一样&#xff0c;利用碎…

阿里云插件新版发布,多特性助力提升开发者体验

好消息&#xff01;阿里云 Cloud Toolkit 新版本于近日正式发布&#xff0c;推出了面向 IntelliJ 和 Eclipse 两个平台的新款插件&#xff0c;多个重大特性&#xff0c;持续提升开发者体验&#xff0c;本文将带大家快速预览该新版本。 本文只挑选下面三个重大特性进行解读&…

上一轮中奖信息公布

大家好&#xff0c;我是若川&#xff0c;抽奖活动其实挺耗时耗力的&#xff0c;尤其是留言和在看抽奖。比如我这篇文章写完就已经23:50了。特别想说的是&#xff1a;有126人点击了在看&#xff0c;但我的好友展示只有93人在看。说明还有30多人点击了在看&#xff0c;但忘记加我…

CentOS7Jenkins安装

2019独角兽企业重金招聘Python工程师标准>>> CentOS7Jenkins安装 2017年05月07日 20:20:32 申明霜 阅读数&#xff1a;13945 版权声明&#xff1a;本文为博主原创文章&#xff0c;未经博主允许不得转载。 https://blog.csdn.net/sms15732621690/article/details/713…

2020 全球 JS 现状调查报告

大家好&#xff0c;我是若川。偷偷告诉你&#xff0c;今天推文的第二条是在我的公众号回复「网盘」免费领取百度网盘会员&#xff0c;欢迎大家分享转发。给大家分享一篇好文&#xff0c;往期类似好文&#xff1a;2020 前端技术发展回顾2020年大前端技术趋势解读以下是正文&…

ie兼容响应式布局的实现总结 和 针对ie浏览器的CSS

参考链接&#xff1a;http://zhidao.baidu.com/link?urlbQioDKMnG_eQoE6dCxzd2hPtMyiB7phu6hBdOupn1Pjk1hV-ItXFZS5GDUBoH5qrfi9LXkUoSciXTiGN36G6LK 参考链接&#xff1a;http://blog.sina.com.cn/s/blog_601b97ee0101aszo.html ie浏览器hack .demo {padding:10px;padding:9…

group by 保留哪一条数据_使用R语言绘制一维数据统计图总结

加载数据 绘制茎叶图 绘制直方图 绘制概率密度曲线 绘制小提琴图 绘制箱线图 绘制小提琴图箱线图 集中趋势统计 分散程度 apply的使用加载数据模拟数据下载library(tidyverse) cjb <- read.csv("/home/wy/Downloads/cjb.csv",header TRUE,stringsAsFactors FALS…

npm安装和Vue运行

一、开始&#xff1a; 下载地址&#xff1a;http://nodejs.cn/download/ 下载安装&#xff1a; 直到 二、打开CMD,检查是否正常 在安装目录里新增两个文件夹 然后运行命令&#xff1a;如下图&#xff1a; npm config set prefix "D:\InstallSoftWare\nodejs\node_global&q…

Scott 32 岁前端年终总结,探寻另一种可能

今年一年都是飞快 这 10 年编程好时光&#xff0c;花费在不经意间&#xff0c;而立的第三年也即将用完&#xff1a;23 到 26 岁&#xff0c;花在了阿里&#xff0c;从入门到职业迷茫&#xff0c;27 到 29 岁&#xff0c;花在了创业&#xff0c;从热血到倒闭还钱&#xff0c;30 …