JavaScript网络地址作为参数_JavaScript之bind的模拟实现
阅读本文约需要5分钟
大家好,我是你们的导师,我每天都会给大家分享一些干货内容(当然了,周末也要允许老师休息一下哈)。昨天给大家分享了JavaScript的call和apply的模拟实现,今天给大家分享一下bind的模拟实现。
什么是bind?
一句话介绍 bind:bind() 方法会创建一个新函数。当这个新函数被调用时,bind() 的第一个参数将作为它运行时的 this,之后的一序列参数将会在传递的实参前传入作为它的参数。(来自于 MDN )。
由此我们可以首先得出 bind 函数的两个特点:返回一个函数、可以传入参数。
返回函数的模拟实现
从第一个特点开始,我们举个例子:
关于指定 this 的指向,我们可以使用 call 或者 apply 实现,关于 call 和 apply 的模拟实现,可以看看我昨天分享的文章:JavaScript之call和apply的模拟实现。我们来写第一版的代码:
此外,之所以 return self.apply(context),是考虑到绑定函数可能是有返回值的,依然是这个例子:
传参的模拟实现
接下来看第二点,可以传入参数。这个就有点让人费解了,我在 bind 的时候,是否可以传参呢?我在执行 bind 返回的函数的时候,可不可以传参呢?让我们看个例子:
函数需要传 name 和 age 两个参数,竟然还可以在 bind 的时候,只传一个 name,在执行返回的函数的时候,再传另一个参数 age!这可咋办?不急,我们用 arguments 进行处理:
构造函数效果的模拟实现
完成了这两点,最难的部分到了!因为 bind 还有一个特点,就是:一个绑定函数也能使用new操作符创建对象:这种行为就像把原函数当成构造器。提供的 this 值被忽略,同时调用时的参数被提供给模拟函数。
也就是说当 bind 返回的函数作为构造函数的时候,bind 时指定的 this 值会失效,但传入的参数依然生效。举个例子:
注意:尽管在全局和 foo 中都声明了 value 值,最后依然返回了 undefind,说明绑定的 this 失效了,如果大家了解 new 的模拟实现,就会知道这个时候的 this 已经指向了 obj。
所以我们可以通过修改返回的函数的原型来实现,让我们写一下:
构造函数效果的优化实现
但是在这个写法中,我们直接将 fBound.prototype = this.prototype,我们直接修改 fBound.prototype 的时候,也会直接修改绑定函数的 prototype。这个时候,我们可以通过一个空函数来进行中转:
到此为止,大的问题都已经解决。
三个小问题
1.apply 这段代码跟 MDN 上的稍有不同
在 MDN 中文版讲 bind 的模拟实现时,apply 这里的代码是:
self.apply(this instanceof self ? this : context || this, args.concat(bindArgs))
多了一个关于 context 是否存在的判断,然而这个是错误的!举个例子:
以上代码正常情况下会打印 2,如果换成了 context || this,这段代码就会打印 1!所以这里不应该进行 context 的判断,大家查看 MDN 同样内容的英文版,就不存在这个判断!
2.调用 bind 的不是函数咋办?
不行,我们要报错!
3.我要在线上用
那别忘了做个兼容:
最终代码
所以最最后的代码就是:
今天就分享到这,如果觉得对你有一丢丢帮助,请点右下角【在看】,让更多人看到该文章。大家也可以在底部给我留言,对于有价值的留言,我们都会一一回复的。
JavaScript网络地址作为参数_JavaScript之bind的模拟实现相关推荐
- JavaScript 之 call和apply,bind 的模拟实现
call 一句话介绍 call: call() 方法在使用一个指定的 this 值和若干个指定的参数值的前提下调用某个函数或方法. 举个例子: var foo = {value: 1 };functi ...
- JavaScript的call,apply和bind方法之间的区别
by Rajat Saxena 通过拉贾特·萨克森纳(Rajat Saxena) JavaScript的call,apply和bind方法之间的区别 (The difference between J ...
- 使用JavaScript重定向URL参数
简单实现使用JavaScript重置url参数 ,两种方法,一种字符串拼接形式,一种使用正则判断,且都已经测试通过.供大家参考指教. 1.字符拼接形式 function setUri(para, va ...
- 如何从javascript检索GET参数? [重复]
本文翻译自:How to retrieve GET parameters from javascript? [duplicate] This question already has answers ...
- JavaScript的可变参数介绍
由于JavaScript是动态语言,所以JavaScript对可变参数的支持是天生的,下面我们来弄一个实例来说一下,使用一 个函数,接受多个参数,然后计算所以传入的参数的和.很简单. 看代码 < ...
- 浅谈JavaScript中的apply,call和bind
apply,call,bine 这三兄弟经常让初学者感到疑惑.前两天准备面试时特地做了个比较,其实理解起来也不会太难. apply MDN上的定义: The apply() method calls ...
- js手撕——bind的模拟实现
在前端面试中,可能会出现一些手撕模拟实现的题目,这里进行一些记录. 原生api js中中提供了 call, apply, bind 用于手动指定this的指向 概念 调用 call 和 apply 的 ...
- 【作物生长模拟模型APSIM】不同品种参数下作物产量的模拟
随着数字农业和智慧农业的发展,基于过程的农业生产系统模型在模拟作物对气候变化的响应与适应.农田管理优化.作物品种和株型筛选.农田固碳和温室气体排放等领域扮演着越来越重要的作用. APSIM (Agri ...
- Javascript 中 apply、call、bind
在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. JavaScript 的一大 ...
最新文章
- controller与servlet区别
- tensorflow.python.framework.errors_impl.DataLossError:
- ***CSS魔法堂:选择器及其优先级
- JVM 垃圾收集器CMS相关参数
- crond定时任务详细分析
- vue调用手机相机相册_详解Vue调用手机相机和相册以及上传
- python 定义变量_python-003-变量
- 十二、ubuntu20.10(Linux)下Pycharm配置pyqt5开发环境
- 360要在A股上市 华泰联合证券已签订IPO辅导协议
- 算法高级(37)-微信、微博中的好友关系该如何设计?
- Automatic Brain Tumor Segmentation using Cascaded Anisotropic Convolutional Neural Networks
- python数组拼接concat_Python xarray.concat然后xarray.to_netcdf生成巨大的新文件大小
- JS中height、clientHeight、scrollHeight、offsetHeight区别
- 工具WinRunner 及Bochs
- mysql如何实现透视表功能_SQL 实现数据透视表功能
- Python基础入门:函数--阿里云天池
- Absible#Ansible-Playbook的任务控制
- 安装Office365后版本信息显示为Office2016
- Dynamic GCN:Dynamic GCN: Context-enriched Topology Learning for Skeleton-based Action Recognition
- error: The folder you are executing pip from can no longer be found.
热门文章
- php中文歌词,html如何制作滚动歌词
- php js记住密码功能,jquery.cookie.js实现用户登录保存密码功能的方法_jquery
- 64位ubuntu arm-linux-gcc,在ubuntu 64位的机器上执行arm-linux-gcc提示 no such file or directory【转】...
- python涉及到的逻辑_涉及逻辑运算的python表达式的运算顺序
- 【动态规划】简单背包问题II
- 网页中查看pdf文档
- 使用 nvm 安装 nodejs 和 npm
- 用MATLAB结合四种方法搜寻罗马尼亚度假问题
- JavaScript基础之Number对象和Math对象
- thinkphp单入口和多入口的访问方法