bind

一句话介绍 bind:

bind() 方法会创建一个新函数。当这个新函数被调用时,bind() 的第一个参数将作为它运行时的 this,之后的一序列参数将会在传递的实参前传入作为它的参数。(来自于 MDN )

由此我们可以首先得出 bind 函数的两个特点:

  1. 返回一个函数
  2. 可以传入参数

返回函数的模拟实现

从第一个特点开始,我们举个例子:

var foo = {
value: 1
}; function bar() {
console.log(this.value);
} // 返回了一个函数
var bindFoo = bar.bind(foo); bindFoo(); // 1

关于指定 this 的指向,我们可以使用 call 或者 apply 实现,关于 call 和 apply 的模拟实现,可以查看《JavaScript深入之call和apply的模拟实现》。我们来写第一版的代码:

// 第一版
Function.prototype.bind2 = function (context) {
var self = this;
return function () {
self.apply(context);
} }

传参的模拟实现

接下来看第二点,可以传入参数。这个就有点让人费解了,我在 bind 的时候,是否可以传参呢?我在执行 bind 返回的函数的时候,可不可以传参呢?让我们看个例子:

var foo = {
value: 1
}; function bar(name, age) {
console.log(this.value);
console.log(name);
console.log(age); } var bindFoo = bar.bind(foo, 'daisy');
bindFoo('18');
// 1
// daisy
// 18

函数需要传 name 和 age 两个参数,竟然还可以在 bind 的时候,只传一个 name,在执行返回的函数的时候,再传另一个参数 age!

这可咋办?不急,我们用 arguments 进行处理:

// 第二版
Function.prototype.bind2 = function (context) { var self = this;
// 获取bind2函数从第二个参数到最后一个参数
var args = Array.prototype.slice.call(arguments, 1); return function () {
// 这个时候的arguments是指bind返回的函数传入的参数
var bindArgs = Array.prototype.slice.call(arguments);
self.apply(context, args.concat(bindArgs));
} }

构造函数效果的模拟实现

完成了这两点,最难的部分到啦!因为 bind 还有一个特点,就是

一个绑定函数也能使用new操作符创建对象:这种行为就像把原函数当成构造器。提供的 this 值被忽略,同时调用时的参数被提供给模拟函数。

也就是说当 bind 返回的函数作为构造函数的时候,bind 时指定的 this 值会失效,但传入的参数依然生效。举个例子:

var value = 2;

var foo = {
value: 1
}; function bar(name, age) {
this.habit = 'shopping';
console.log(this.value);
console.log(name);
console.log(age);
} bar.prototype.friend = 'kevin'; var bindFoo = bar.bind(foo, 'daisy'); var obj = new bindFoo('18');
// undefined
// daisy
// 18
console.log(obj.habit);
console.log(obj.friend);
// shopping
// kevin

注意:尽管在全局和 foo 中都声明了 value 值,最后依然返回了 undefind,说明绑定的 this 失效了,如果大家了解 new 的模拟实现,就会知道这个时候的 this 已经指向了 obj。

(哈哈,我这是为我的下一篇文章《JavaScript深入系列之new的模拟实现》打广告)。

所以我们可以通过修改返回的函数的原型来实现,让我们写一下:

// 第三版
Function.prototype.bind2 = function (context) {
var self = this;
var args = Array.prototype.slice.call(arguments, 1); var fBound = function () {
var bindArgs = Array.prototype.slice.call(arguments);
// 当作为构造函数时,this 指向实例,此时结果为 true,将绑定函数的 this 指向该实例,可以让实例获得来自绑定函数的值
// 以上面的是 demo 为例,如果改成 `this instanceof fBound ? null : context`,实例只是一个空对象,将 null 改成 this ,实例会具有 habit 属性
// 当作为普通函数时,this 指向 window,此时结果为 false,将绑定函数的 this 指向 context
self.apply(this instanceof fBound ? this : context, args.concat(bindArgs));
}
// 修改返回函数的 prototype 为绑定函数的 prototype,实例就可以继承绑定函数的原型中的值
fBound.prototype = this.prototype;
return fBound;
}

如果对原型链稍有困惑,可以查看《JavaScript深入之从原型到原型链》

构造函数效果的优化实现

但是在这个写法中,我们直接将 fBound.prototype = this.prototype,我们直接修改 fBound.prototype 的时候,也会直接修改绑定函数的 prototype。这个时候,我们可以通过一个空函数来进行中转:

// 第四版
Function.prototype.bind2 = function (context) { var self = this;
var args = Array.prototype.slice.call(arguments, 1); var fNOP = function () {}; var fBound = function () {
var bindArgs = Array.prototype.slice.call(arguments);
self.apply(this instanceof fNOP ? this : context, args.concat(bindArgs));
} fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();
return fBound;
}

到此为止,大的问题都已经解决,给自己一个赞!o( ̄▽ ̄)d

三个小问题

接下来处理些小问题:

1.apply 这段代码跟 MDN 上的稍有不同

在 MDN 中文版讲 bind 的模拟实现时,apply 这里的代码是:

self.apply(this instanceof self ? this : context || this, args.concat(bindArgs))

多了一个关于 context 是否存在的判断,然而这个是错误的!

举个例子:

var value = 2;
var foo = {
value: 1,
bar: bar.bind(null)
}; function bar() {
console.log(this.value);
} foo.bar() // 2

以上代码正常情况下会打印 2,如果换成了 context || this,这段代码就会打印 1!

所以这里不应该进行 context 的判断,大家查看 MDN 同样内容的英文版,就不存在这个判断!

2.调用 bind 的不是函数咋办?

不行,我们要报错!

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

3.我要在线上用

那别忘了做个兼容:

Function.prototype.bind = Function.prototype.bind || function () {
……
};

当然最好是用 es5-shim 啦。

最终代码

所以最最后的代码就是:

Function.prototype.bind2 = function (context) {

    if (typeof this !== "function") {
throw new Error("Function.prototype.bind - what is trying to be bound is not callable");
} var self = this;
var args = Array.prototype.slice.call(arguments, 1); var fNOP = function () {}; var fBound = function () {
var bindArgs = Array.prototype.slice.call(arguments);
self.apply(this instanceof fNOP ? this : context, args.concat(bindArgs));
} fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();
return fBound;
}

bind的模拟实现的更多相关文章

  1. bind()的模拟实现

    上一篇对call和apply的模拟实现做了一个梳理,可参见:模拟实现call.apply,下面将具体研究一下bind啦啦啦 1. bind和call/apply的差别 bind方法会创建一个新函数,返 ...

  2. jquery 动态绑定bind()及模拟鼠标点击A链接

    近来自觉前端有小小进步,幸而记之. 1.两个 css class 紧挨在一起 则在html元素中,要同时拥有这两个class,才能起作用 .block.db{ background-image:url ...

  3. js-new、object.create、bind的模拟实现【转载备忘】

    //创建Person构造函数,参数为name,age function Person(name,age){ this.name = name; this.age = age; } function _ ...

  4. bind函数作用、应用场景以及模拟实现

    bind函数 bind 函数挂在 Function 的原型上 Function.prototype.bind 创建的函数都可以直接调用 bind,使用: function func(){ consol ...

  5. Javascript中的bind详解

    前言 用过React的同学都知道,经常会使用bind来绑定this. import React, { Component } from 'react'; class TodoItem extends ...

  6. 第19课 lambda vs std::bind

    一. std::bind (一)std::bind实现的关键技术 [编程实验]探索bind原理,实现自己的bind函数 #include <iostream> #include <t ...

  7. 【Web】浅析JQuery的apply(), call(), bind()方法

    原文地址:https://blog.csdn.net/whuzxq/article/details/64166253 由于在理解this的用法的时候多次出现了这几个方法,个人对这几个方法理解的不是很透 ...

  8. 如何用apply实现一个bind?

    面试题:如何用apply实现一个bind? Function.prototype._bind = function(target) { // 保留调用_bind方法的对象 let _this = th ...

  9. apply call bind的用法与实现

    概念 apply call 和bind 允许为不同的对象分配和调用属于一个对象的函数/方法.同时它们可以改变函数内 this 的指向. 区别 apply 和 call 接收的参数形式不同 apply ...

随机推荐

  1. Java核心技术 卷一(序言+0-5)

    l 常见简写: JDK(Java Development Kit):Java开发工具包 API:应用程序编程接口 OOP(Object-Oriented Programming):面向对象程序设计 l ...

  2. Python3+syslog使用及相关说明

    一.说明 1.1 背景说明 syslog这个东西,最早接触是在Z公司做基线安全加固的时候有启用远程日志服务器一项,然后当时还写整理了一篇“rsyslog+loganalyzer远程日志系统搭建教程(C ...

  3. [转帖]浅谈P2P、P2C 、O2O 、B2C、B2B、 C2C的区别

    浅谈P2P.P2C .O2O .B2C.B2B. C2C的区别 https://www.cnblogs.com/zhuiluoyu/p/5481635.html 相信有很多人对P2P.P2C .O2O ...

  4. AntDesign vue学习笔记(三)嵌套路由使用

    本项目目前结构如下 1.Login页面=>MainFrm页面=>MainFrm左部菜单,右边是显示区域可以切换子页面. 2.当点击左部菜单时,右边的子页面随着进行切换. 实现关键代码如下1 ...

  5. 什么是k8s

    •Kubernetes介绍 1.背景介绍 云计算飞速发展 - IaaS - PaaS - SaaS Docker技术突飞猛进 - 一次构建,到处运行 - 容器的快速轻量 - 完整的生态环境 2.什么是 ...

  6. laravel5.4 中 dd和dump的区别。

    在laravel中dd和dump 都是打印的数据的,但是 dd会终止程序的运行,dump不会. 而且dump打印出来的数据在浏览器上是高亮的哦(很有逼格的~). 上图为dump打印出来的. 上图为dd ...

  7. kafka集群安全化之启用kerberos与acl

    一.背景 在我们部署完kafka之后,虽然我们已经可以“肆意”的用kafka了,但是在一个大公司的实际生产环境中,kafka集群往往十分庞大,每个使用者都应该只关心自己所负责的Topic,并且对其他人 ...

  8. dotnet打包类库

    打包类库成Nuget包:dotnet pack --configuration Release --include-source --include-symbols --no-build,注意,需要在 ...

  9. SpringBoot与SpringDateJPA和Mybatis的整合

    一.SpringBoot与SpringDateJPA的整合 1-1.需求 查询数据库---->得到数据------>展示到页面上 1-2.整合步骤 1-2-1.创建SpringBoot工程 ...

  10. 【转载】 Windows系统电脑通过设备管理器查看电脑配置信息

    在采购电脑或者使用电脑的过程中,有时候我们需要查看到电脑的所有设备硬件信息,此时就可以通过Windows系统自带的设备管理器界面来查看该电脑所有的设备配置信息,包括CPU型号频率.内存.硬盘型号以及容 ...