没图说个锤子之js bind方法

RayKr 发布于2019-08-21 10:34 / 3009人阅读

摘要：在绑定函数中，对象将解析为传入的对象。返回值与函数相同的新函数注意是新函数，对象和初始参数除外。异常如果指定的不是函数，则将引发异常。看到这里我们基本对方法的使用有个初步认识了，那先来看看具体示例再分析分析。不知道看了两幅图，记住了方法没

</>复制代码 
  首发于搞起博客

bind方法，写javascript的肯定都见过，我也是，但是，不是经常用的话，基本上过一段时间就会模糊了，所以，决定把它转化成图像，估计比较容易记忆。

概念

我们来看看MSDN上关于javascript bind函数的解释：

</>复制代码 
  对于给定函数，创建具有与原始函数相同的主体的绑定函数。 在绑定函数中，this 对象将解析为传入的对象。 绑定函数具有指定的初始参数。

哈哈哈哈，是不是懵逼了？

莫慌，我们慢慢来看，看看用法先：

用法

function.bind(thisArg[,arg1[,arg2[,argN]]])

参数

function
必选。一个函数对象。

thisArg
必选。 this 关键字可在新函数中引用的对象。

arg1[,arg2[,argN]]]
可选。要传递到新函数的参数的列表。

返回值

与 function 函数相同的新函数(注意是新函数！)，thisArg 对象和初始参数除外。

异常

如果指定的 function 不是函数，则将引发 TypeError 异常。

看到这里我们基本对bind方法的使用有个初步认识了，那先来看看具体示例再分析分析。

示例 this绑定

</>复制代码 
/**
 * 定义初始的函数
 * 这个函数的功能很简单，就是判断数字是否在某个范围
 */
var checkNumericRange = function (value) {
    if (typeof value !== "number")
        return false;
    else
        return value >= this.minimum && value <= this.maximum;
}
// 这里的范围将会被绑定到函数中的this值去
var range = { minimum: 10, maximum: 20 };
// 开始绑定！
var boundCheckNumericRange = checkNumericRange.bind(range);
// 使用一个数字来验证下这个函数
var result = boundCheckNumericRange (12);
document.write(result);
// 输出: true

好了，这个简单的示例看完了，我们知道了，使用bind将一个对象绑定到某个函数中，这个函数中所使用的this就会指向绑上去的函数了，不罗嗦了，画个图理解。

再看个稍微有点不同的例子，其实也差不多：

</>复制代码 
// 创建一个带有刚才那个方法的对象，
// 并且方法调用当前这个对象中的最大值和最小值
var originalObject = {
    minimum: 50,
    maximum: 100,
    checkNumericRange: function (value) {
        if (typeof value !== "number")
            return false;
        else
            return value >= this.minimum && value <= this.maximum;
    }
}
// 检查10是否在范围内
var result = originalObject.checkNumericRange(10);
document.write(result + " ");
// 输出: false
// 还是同样的配方，还是熟悉的味道
var range = { minimum: 10, maximum: 20 };
// bind技能要正在引导...
var boundObjectWithRange = originalObject.checkNumericRange.bind(range);
// 看看这次的效果
var result = boundObjectWithRange(10);
document.write(result);
// 输出: true， 有效了！

参数绑定

在参数中还可以有几个参数带进来
arg1[,arg2[,argN]]]

</>复制代码 
// 又是定义一个函数，这次是4个参数
var displayArgs = function (val1, val2, val3, val4) {
    document.write(val1 + " " + val2 + " " + val3 + " " + val4);
}
var emptyObject = {};
// 使用bind，产生一个新函数
// 这个新函数的第一第二个参数已经定死了为这两个，再有参数往后排
var displayArgs2 = displayArgs.bind(emptyObject, 12, "a");
// 这里就是两个排队的参数了
displayArgs2("b", "c");
// 输出: 12 a b c

恩，知道，上图再说对吧

上图可以看出bind时传入的参数，在新函数中作为最先使用的参数，但是它并没有改变原函数参数的个数。

不知道看了两幅图，记住了bind方法没？

GPU云服务器云服务器 bind()方法 bind方法 js.bind JS中bind、call和apply的作

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85772.html

《CSS 揭秘》作者Lea Verou：我喜欢分享开源的行业文化

摘要：作为女性，你又来自互联网技术不太发达的希腊。希腊目前可能还存在一些针对女性的性别歧视，但并不明显，不然我可能会被影响到。实际上，有时候希腊在性别平等方面比其他西方国家更进步。本文仅用于学习和交流，不用于商业目的。非商业转载请注明作译者、出处，并保留本文的原始链接：http://www.ituring.com.cn/art... 访谈嘉宾： Lea VerouW3C CSS工作组特邀专...

tianyu 2019-08-29 11:06 评论0 收藏0
《CSS 揭秘》作者Lea Verou：我喜欢分享开源的行业文化

摘要：作为女性，你又来自互联网技术不太发达的希腊。希腊目前可能还存在一些针对女性的性别歧视，但并不明显，不然我可能会被影响到。实际上，有时候希腊在性别平等方面比其他西方国家更进步。本文仅用于学习和交流，不用于商业目的。非商业转载请注明作译者、出处，并保留本文的原始链接：http://www.ituring.com.cn/art... 访谈嘉宾： Lea VerouW3C CSS工作组特邀专...

yzd 2019-08-21 14:14 评论0 收藏0
《CSS 揭秘》作者Lea Verou：我喜欢分享开源的行业文化

摘要：作为女性，你又来自互联网技术不太发达的希腊。希腊目前可能还存在一些针对女性的性别歧视，但并不明显，不然我可能会被影响到。实际上，有时候希腊在性别平等方面比其他西方国家更进步。本文仅用于学习和交流，不用于商业目的。非商业转载请注明作译者、出处，并保留本文的原始链接：http://www.ituring.com.cn/art... 访谈嘉宾： Lea VerouW3C CSS工作组特邀专...

leanote 2019-08-01 15:32 评论0 收藏0
【Vue原理】VModel - 源码版之 select 详解

摘要：写文章不容易，点个赞呗兄弟专注源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于版本如果你觉得排版难看，请点击下面链接或者拉到下面关注公众号也可以吧原理源码版之详解今天我们来看看处写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 ...

lsxiao 2019-08-23 18:25 评论0 收藏0
图说 WebAssembly（四）：快速入门

摘要：本文是图说系列文章的第四篇。它们表示一种可以在普遍流行机器上高效使用的指令集合。这是因为是一种称为堆栈机器。尽管是根据堆栈机器来设计的，但是这并不是它在真实物理机器上工作的方式。这些内容称为段。本文是图说 WebAssembly 系列文章的第四篇。如果您还未阅读之前的文章，建议您从第一篇入手。 WebAssembly 是一种使得除 JavaScript 以外的编程语言也能运行在网页上...

BoYang 2019-08-22 17:00 评论0 收藏0