博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
关于 bind 你可能需要了解的知识点以及使用场景
阅读量:5958 次
发布时间:2019-06-19

本文共 3954 字,大约阅读时间需要 13 分钟。

不看不知道,一看吓一跳,已经整整一个月没有更新 underscore 源码解读系列文章了。前面我们已经完成了 Object ,Array,Collection 上的扩展方法的源码剖析,本文开始来解读 Function 上的扩展方法。

完整的 underscore 源码解读系列文章请移步 ,觉得还阔以的话,给个 star 鼓励下楼主呗 ^_^

bind 简介

Ok,今天要讲的正是 bind。关于 bind,可以先移步楼主以前写的文章 ,有个基本的概念。

bind() 方法会创建一个新函数,当这个新函数被调用时,它的 this 值是传递给 bind() 的第一个参数, 它的参数是 bind() 的其他参数和其原本的参数。

语法是这样样子的:

fun.bind(thisArg[, arg1[, arg2[, ...]]])
  • thisArg 当绑定函数被调用时,该参数会作为原函数运行时的 this 指向。当使用 new 操作符调用绑定函数时,该参数无效。

  • arg1, arg2, ... (可选)当绑定函数被调用时,这些参数加上绑定函数本身的参数会按照顺序作为原函数运行时的参数。

参数

bind 的第一个参数会作为原函数运行时的 this 指向,不多说;而第二个开始的参数是可选的,当绑定函数被调用时,这些参数加上绑定函数本身的参数会按照顺序作为原函数运行时的参数。怎么理解?

function fn(a, b, c) {  return a + b + c;}var _fn = fn.bind(null, 10);var ans = _fn(20, 30); // 60

fn 函数需要三个参数,_fn 函数将 10 作为默认的第一个参数,所以只需要传入两个参数即可,如果你不小心传入了三个参数,放心,也只会取前两个。

function fn(a, b, c) {  return a + b + c;}var _fn = fn.bind(null, 10);var ans = _fn(20, 30, 40); // 60

这有啥用呢?如果某些函数,前几个参数已经 “内定” 了,我们便可以用 bind 返回一个新的函数。也就是说,bind() 能使一个函数拥有预设的初始参数。这些参数(如果有的话)作为 bind() 的第二个参数跟在 this 后面,之后它们会被插入到目标函数的参数列表的开始位置,传递给绑定函数的参数会跟在它们的后面。

function list() {  return Array.prototype.slice.call(arguments);}var list1 = list(1, 2, 3); // [1, 2, 3]// Create a function with a preset leading argumentvar leadingThirtysevenList = list.bind(undefined, 37);var list2 = leadingThirtysevenList(); // [37]var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]

new

使用 bind 返回的结果还是个 function,是个 function 就可以被 new 运算符调用,那么结果呢?规范中说的很清楚了,当使用 new 操作符调用绑定函数时,bind 的第一个参数无效。

function Person(name, age) {  this.name = name;  this.age = age;}var _Person = Person.bind({});var p = new _Person('hanzichi', 30); // Person {name: "hanzichi", age: 30}

一般我们不会去这么用,但是如果要写个 bind 的 polyfill(),还是需要考虑用 new 调用的情况。

我们也可以设置默认值(参考上一小节),原先提供的那些参数仍然会被前置到构造函数调用的前面。

function Person(name, age) {  this.name = name;  this.age = age;}var _Person = Person.bind(null, 'hanzichi');var p = new _Person(30); // Person {name: "hanzichi", age: 30}

配合 setTimeout

什么时候容易丢失 this 指向?恩,setTimeout 是一个场景,很容易把 this 指向 window,当然,setInterval 也是一样。当使用对象的方法时,需要 this 引用对象,你可能需要显式地把 this 绑定到回调函数以便继续使用对象。

var canvas = {  render: function() {    this.update();    this.draw();  },  update: function() {    // ...  },  draw: function() {    // ...  }};window.setInterval(canvas.render, 1000 / 60);

用 canvas 写特效或者做游戏时经常会碰到类似的问题。上面的代码是有问题的,render 方法中的 this 其实被指向了 window!我们可以用 bind,显式地把 this 绑定到回调函数以便继续使用该对象。

window.setInterval(canvas.render.bind(canvas), 1000);

类似的情况还有 dom 的事件监听,一不小心可能 this 就被指向了 dom 元素。可以参考下以前做 bigrender 时写的这部分代码 。

tip

bind 还能做一些有意思的事情。

通常来说,将一个类数组转为数组,我们会用 slice(ie9- 不支持)。参考

var slice = Array.prototype.slice;// slice.apply(arguments);// slice(arguments, 1);

bind 能让调用变的更加简单。

// same as "slice" in the previous examplevar unboundSlice = Array.prototype.slice;var slice = Function.prototype.call.bind(unboundSlice);// ...slice(arguments);// slice(arguments, 1);

再举个类似的例子,比如说我们要添加事件到多个节点,for 循环当然没有任何问题,我们还可以 “剽窃” forEach 方法:

Array.prototype.forEach.call(document.querySelectorAll('input[type="button"]'), function(el){  el.addEventListener('click', fn);});

更进一步,我们可以用 bind 将函数封装的更好:

var unboundForEach = Array.prototype.forEach  , forEach = Function.prototype.call.bind(unboundForEach);forEach(document.querySelectorAll('input[type="button"]'), function (el) {  el.addEventListener('click', fn);});

同样类似的,我们可以将 x.y(z) 变成 y(x,z) 的形式:

var obj = {  num: 10,  getCount: function() {    return this.num;  }};var unboundBind = Function.prototype.bind  , bind = Function.prototype.call.bind(unboundBind);var getCount = bind(obj.getCount, obj);console.log(getCount());  // 10

再举个栗子。每隔一秒在控制台打印 1-5,看起来是道考察闭包的经典题目。

for(var i = 1; i <= 5; i++) {  !function(i) {    setTimeout(function() {      console.log(i);    }, i * 1000);  }(i);}

ES6 下能用 let

for(let i = 1; i <= 5; i++) {  setTimeout(function() {    console.log(i);  }, i * 1000);}

也可以用 bind,瞬间逼格提升:

for(var i = 1; i <= 5; i++) {  setTimeout(console.log.bind(console, i), i * 1000);}

Read more

关于 bind 的介绍就到这里,下一篇文章将结合 underscore 来讲讲如何实现一个 bind 的 polyfill。

转载地址:http://xnrxx.baihongyu.com/

你可能感兴趣的文章
android9单手模式,荣耀9青春版安卓8.0上手:单手操作爽翻天
查看>>
html最小化打开新页面,【html相关】html中如何实现在新标签中打开另一个新的页面?...
查看>>
在html中加入tablestyle,html表格table的使用,以及表格的css样式
查看>>
android全屏监听,Android SurfaceView实现全屏播放例子
查看>>
html console 滚动条,JavaScript - 控制滚动条操作
查看>>
html5中按钮尺寸设计,UI设计中的按钮设计规范
查看>>
html方法介绍,jQuery html()等方法介绍
查看>>
怎么删除html中的节点标签,在lxml中如何从节点中删除标签?
查看>>
Apache2月9日邮件:Tomcat请求漏洞(Request Smuggling)
查看>>
WPF外包技术分享—WPF的MVVM架构解析(分享)
查看>>
数字签名与数字证书
查看>>
GHOST -BATCH 参数的妙用
查看>>
控制反转 (Inversion of Control, IoC)
查看>>
Catalyst 3850 Series Switch Recovery
查看>>
让Python删除window下文件
查看>>
python datetime模块的timedelta
查看>>
Spark笔记整理(二):RDD与spark核心概念名词
查看>>
定制带RAID阵列卡驱动的WINPE3.0系统
查看>>
Microsoft Office 2010 Service Pack 2
查看>>
简化的 Microsoft 安全法规遵从性管理器: 安全设置
查看>>