bind函数polyfill源码解析

准备知识

使用new来调用函数会自动执行下面的操作:

  1. 创建一个全新的对象
  2. 这个新对象会被执行原型连接
  3. 这个新对象会绑定到函数调用的this
  4. 如果函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象

注意this绑定规则,new操作具有最高的优先级

《你不知道的JavaScript(上卷)》提供了一个例子,bar被硬绑定到obj上,但是new bar(3) 并没有像我们预计的那样把obj.a修改为3。相反,new修改了硬绑定调用bar()中的this。因为使用了new绑定,我们得到了一个名字为baz的新对象,并且baz.a的值为3。

function foo(something) {this.a = something
}
var obj = {}
var bar = foo.bind(obj)
bar(2)
console.log(obj.a)  //2
var baz = new bar(3)
console.log(obj.a)  //2
console.log(baz.a)  //3

instanceof运算符的第一个变量是一个对象,暂时称为A;第二个变量一般是一个函数,暂时称为B。

instanceof判断准则:沿着A的__proto__这条线来找,同时沿着B的prototype这条线来找,如果两条线能找到同一个引用,即同一个对象,那么就返回true。

源码分析

MDN上提供的polyfill如下,主要的疑惑点应该就是 this instanceof fNOP 作用是什么?

if (!Function.prototype.bind) {Function.prototype.bind = function(oThis) {if (typeof this !== 'function') {throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable')}var aArgs   = Array.prototype.slice.call(arguments, 1),fToBind = this,fNOP    = function() {},fBound  = function() {return fToBind.apply(this instanceof fNOP // 这段代码会判断硬绑定函数是否是被new调用,如果是的话就会使用新创建的this替换硬绑定的this? this: oThis,aArgs.concat(Array.prototype.slice.call(arguments)))}// 维护原型关系if (this.prototype) {// Function.prototype doesn't have a prototype propertyfNOP.prototype = this.prototype; }fBound.prototype = new fNOP()return fBound}
}

this instanceof fNOP 单独看是看不明白的,需要结合以下代码才能说明它的作用

if (this.prototype) {fNOP.prototype = this.prototype; 
}
fBound.prototype = new fNOP()

首先我们要清楚:bind(...)会返回一个硬编码的新函数,它会把参数设置为this的上下文并调用原始函数。

重点就是bind(...)返回的是一个函数!函数!函数!这意味着可以对bind(...)返回的函数进行new操作,那么问题就来了。

this绑定中new操作具有最高的优先级,如果执行new操作,bind(...)应该不起作用,this应该指向new出来的新对象。

清楚了以上内容,我们开始阅读代码。

if (typeof this !== 'function') {throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable')}

bind(...)必须由函数调用,所以以上代码对this的类型进行检查,如果不是函数类型则抛出错误。

var aArgs   = Array.prototype.slice.call(arguments, 1)
var fToBind = this
var fBound  = function() {return fToBind.apply(this instanceof fNOP // 这段代码会判断硬绑定函数是否是被new调用,如果是的话就会使用新创建的this替换硬绑定的this? this: oThis,aArgs.concat(Array.prototype.slice.call(arguments)))}

aArgs获取传入的其它参数,fToBind获取需要硬绑定的函数,fBound为返回的绑定操作函数,我们先忽略fBound里面的内容,继续往下看。

if (this.prototype) {fNOP.prototype = this.prototype; 
}
fBound.prototype = new fNOP()

我们假设对bind(...)返回的函数进行new操作(原型链如下),则this instanceof fNOP 为true,此时我们就知道执行了new操作,硬绑定的this不能生效,需要把this绑定到新生成的对象上。

如果没有进行new操作的话,就用apply模拟bind绑定,一切按照原计划进行。

最后我们分析一下维护原型关系的重要性,例子如下:

function Foo(){console.log(this.a);this.a=1;
}
Foo.prototype.show=function() {console.log(this.a)};
Foo(); // undefined
var obj1=new Foo();
obj1.show();var bar=Foo.bind({a:2});
bar(); // 2
var obj2=new bar();
obj2.show();

因为bind函数内部保持了原型关系的继承,所以对象obj2才能访问到原型上的show方法。

** 注意:Foo.show()是错误的,因为Foo的原型指向的是Function.prototype,只有Foo的实例才能调用show方法。


更多专业前端知识,请上 【猿2048】www.mk2048.com

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

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

相关文章

Java方法中的参数太多,第2部分:参数对象

在上一篇文章中 ,我研究了与方法和构造函数的长参数列表相关的一些问题。 在那篇文章中,我讨论了用自定义类型替换基元和内置类型以提高可读性和类型安全性。 这种方法使方法或构造函数的众多参数更具可读性,但并没有减少参数的数量。 在本文…

django内置服务器

单进程多线程的 多线程用来并发,各个线程之间不会阻塞,每个线程对应一个连接转载于:https://www.cnblogs.com/BlueFire-py/p/10031245.html

java mysql_Java与mysql的连接

接触编程、计算机一段时间,免不了的就要接触到,各种数据,而各种数据到了深处自然就要接触到数据的存储和调用,之前在我的文章中,已经了解到了IO流在文件中以及在TCP\IP协议中的各种传输,而慢慢的&#xff0…

Oracle 创建wims用户和表空间

/*用sys SYSDBA *//*分为四步 *//*第1步:创建临时表空间 */create temporary tablespace xxxxxxx_temp tempfile D:\app\Administrator\oradata\orcl\xxxxxxx_temp.dbf size 50m autoextend on next 50m maxsize 20480m extent management local; /*第2步&#xff1…

面试常见问题之实现bind函数

前言: 原文首发于我的博客,说实话,这半年来在各大社区看别人分享的面试题中 bind 函数已经出现 n 多次了,这次准备详细探究下 首先让我们看看 mdn 对于 bind 函数的描述是什么 语法 fun.bind(thisArg[, arg1[, arg2[, ...]]]) 参…

WIN10 开启右键 命令提示符

PowerShell强行加入右键菜单也罢了,命令提示符还默认禁用,可谓巨硬又一次智障操作。通过操作注册表可以解除这个封印: 移除 HKEY_CLASSES_ROOT\Directory\Background\shell\cmd 键中的 HideBasedOnVelocityId 然后刷新注册表,可能…

使用JUnit和Repeat注​​释编写有效的负载测试

EasyTest最近推出了一套新的注释,可帮助其用户编写有效的测试用例。 进入EasyTest的两个主要注释是: 重复 持续时间 今天,我们将讨论重复标注。 一种新的方法级别注释 重复已添加到EasyTest框架。 此批注可用于重复相同的测试多次。 在您…

mysql权限表_MySQL 数据库赋予用户权限操作表

MySQL清空数据库的操作:truncate table tablename;MySQL 赋予用户权限命令的简单格式可概括为:grant 权限 on 数据库对象 to 用户一、grant 普通数据用户,查询、插入、更新、删除 数据库中所有表数据的权利。1 grant select on testdb.* to c…

Intellij IDEA 部署Web项目,解决 404 错误

https://blog.csdn.net/eaphyy/article/details/72513914转载于:https://www.cnblogs.com/123hll/p/9329676.html

Redux源码简析

Redux核心概念 单一 store ,只能挺过getState()获取状态,不能直接修改只能通过触发 action 修改状态使用纯函数 reducers 描述action如何改变state 整个redux的实现就是围绕上面的这三点进行实现的,整个源码量不大,理解了核心概…

23种计模式之Python实现(史上最全最通俗易懂)内容整改中

第一篇 Python与设计模式:前言 第二篇(23种设计模式) 创建类设计模式(5种) 单例模式、工厂模式、简单工厂模式、抽象工厂模式、建造者模式、原型模式 结构类设计模式(7种) 代理模式、装饰器模式…

使用Apache Felix文件安装配置OSGi服务

最近有关托管服务的帖子让我想起了我值得一提的Apache Felix File Install中的一项功能。 在与Holger合作进行项目时,我从他那里了解到File Install不能仅用于管理包。 它还监视配置文件,并在托管服务各自的配置更改时更新托管服务。 文件安装还可以配置…

mysql 条件分析_数据分析之mysql

MYSQLselect 列名(全部*)计数函数:AVG(列名)返回某列的平均值COUNT()返回某列的行数(count(*)表示对表中行的数目进行计数,不管对表列中包含的是空值还是非空值。MAX()返回某列的最大值MIN()返回某列的最小值SUM()返回某列值之和distinct去重&#xff0c…

css线性渐变

此方式可以实现背景色由上往下渐变,这里加上-webkit-考虑兼容问题,若要改变渐变方向,改变top即可,如right、left、bottom效果图: 代码如下: background: -webkit-linear-gradient(top,red,black); 不带前缀&#xff0c…

scroll-view组件bindscroll实例应用:自定义滚动条

我们知道scroll-view组件作为滑动控件非常好用,而有时候我们想放置一个跟随滚动位置来跟进的滚动条,但又不想用滚动条api该怎么办呢?(当然是自己写一个呗还能怎么办[自黑冷漠脸]) 嗯,没错。自己写一个就好了…

C# -- HttpWebRequest 和 HttpWebResponse 的使用

C# -- HttpWebRequest 和 HttpWebResponse 的使用 结合使用HttpWebRequest 和 HttpWebResponse,来判断一个网页地址是否可以正常访问。 1.举例 class Program{static void Main(string[] args){string strUrl "https://www.baidu.com";HttpWebRequest wr…

MongoDB:GridFS删除方法删除存储桶中的所有文件

不久前,我们遇到了MongoDB GridFS的奇怪行为,这使我为MongoDB Java驱动程序创建了一个故障 单 。 今天,我在浏览器书签中找到了指向故障单的链接。 该票证目前尚未解决,因此我认为值得一小篇博文,以防其他人遇到此问题…

mysql数据库存储引擎和索引的描述_Mysql InnoDB引擎的索引与存储结构详解

前言在Oracle 和SQL Server等数据库中只有一种存储引擎,所有数据存储管理机制都是一样的。而MySql数据库提供了多种存储引擎。用户可以根据不同的需求为数据表选择不同的存储引擎,用户也可以根据自己的需要编写自己的存储引擎。MySQL主要存储引擎的区别M…

Vue结合HTML5拖放API 实现目录拖拽~

拖放事件 dom被拖拽--->经过一些dom--->到达指定dom 被拖拽的dom:(源对象) dragstart 源对象被拖拽 drag 源对象拖拽过程中 dragend 源对象拖拽结束(drop事件后执行) 拖拽过程中经过的dom:&#xf…

【转】EMC存储移除热备盘Hot spare的方法

转载请在文首保留原文出处:EMC中文支持论坛 https://community.emc.com/docs/DOC-17382 介绍 本文将介绍如何移除Hot spare磁盘的两种方法。 更多信息 方法一: 登录Unisphere导航至Storage -> Disks从列表中找到目标hot spare盘确认Hot spare replaci…