聊聊Function的bind()
bind顾名思义,绑定。
bind()方法会创建一个新函数,当这个新函数被调用时,它的this值是传递给bind()的第一个参数,它的参数是bind()的其他参数和其原本的参数。
上面这个定义最后一句有点绕,我们来理一下。
bind()接受无数个参数,第一个参数是它生成的新函数的this指向,比如我传个window,不管它在何处调用,这个新函数中的this就指向window,这个新函数的参数就是bind()的第二个、第三个、第四个....第n个参数加上它原本的参数。(行吧,我自己都蒙圈了)
我们还是看看栗子比较好理解,举个bind()最基本的使用方法:
this.x = 9; var module = {x: 81,getX: function() { return this.x; } };module.getX(); // 返回 81var retrieveX = module.getX; retrieveX(); // 返回 9, 在这种情况下,"this"指向全局作用域// 创建一个新函数,将"this"绑定到module对象 // 新手可能会被全局的x变量和module里的属性x所迷惑 var boundGetX = retrieveX.bind(module); boundGetX(); // 返回 81
这里很明显,我们在window对象下调用retrieveX,得到的结果肯定是window下的x,我们把module对象绑定到retrieveX的this上,问题就解决了,不管它在何处调用,this都是指向module对象。
还有bind()的其他参数,相信第一次接触bind()的朋友看到上面的定义都会蒙圈。
还是举个栗子:
function list() {return Array.prototype.slice.call(arguments); }var list1 = list(1, 2, 3); // [1, 2, 3]// 创建一个拥有预设初始参数的函数 var leadingThirtysevenList = list.bind(undefined,[69,37],{a:2});var list2 = leadingThirtysevenList(); // [[69,37],{a:2}] var list3 = leadingThirtysevenList(1, 2, 3); // [[69,37],{a:2}, 1, 2, 3]
list函数很简单,把传入的每个参数插入到一个数组里,我们用bind()给list函数设置初始值,因为不用改变list中this的指向,所以直接传undefined,从第二个参数开始,就是要传入list函数的值,list2和list3的返回值很好的说明了一切。
我自己一般使用的bind()的场景是配合setTimeout函数,因为在执行setTimeout时,this会默认指向window对象,在使用bind()之前,我是这么做的:
function Coder(name) {var that = this;that.name = name;that.getName = function() {console.log(that.name)};that.delayGetName = function() {setTimeout(that.getName,1000)};}var me = new Coder('Jins')me.delayGetName()//延迟一秒输出Jins
在函数内顶层定义一个that缓存this的指针,这样不论怎么调用,that都是指向 Coder的实例,但是多定义一个变量总是让人不太舒服。
使用bind()就简单多了:
function Coder(name) {this.name = name;this.getName = function() {console.log(this.name)};this.delayGetName = function() {setTimeout(this.getName.bind(this),1000)};}var me = new Coder('Jins')me.delayGetName()//延迟一秒输出Jins
这样就OK了,直接把setTimeout的this绑定到外层的this,这肯定是我们想要的!
行吧,先聊这么多,坚持学习!
最后附上参考地址:
Function.prototype.bind()
转载于:https://www.cnblogs.com/chinajins/p/5987608.html
聊聊Function的bind()相关推荐
- 传递function_boost库function与bind
boost库function与bind 一.function 头文件:boost/function.hpp function更合适的说法我觉得是一种回调函数的表现方式. boost::function ...
- 2.cocos2dx 3.2中语法的不同之处,lambada表达式的使用和function和bind函数的使用
1 打开建好的T32 Cocos2dx-3.2的一个项目 2 设置Cocos显示窗口的位置是在AppDelegate.cpp中: 3 设置自适应窗口大小的代码是在上面的 ...
- 【Boost】boost库中function和bind一起使用的技巧(一)
1 bind/function 引 (1)头文件 bind函数#include <boost/bind.hpp> function使用头文件#include <boost/funct ...
- 一起Polyfill系列:Function.prototype.bind的四个阶段
昨天边参考es5-shim边自己实现Function.prototype.bind,发现有不少以前忽视了的地方,这里就作为一个小总结吧. 一.Function.prototype.bind的作用 其实 ...
- C++11 std::function, std::bind, std::ref, std::cref
C++11 std::function, std::bind, std::ref, std::cref 转自:http://www.jellythink.com/ std::function 看看这段 ...
- Function.prototype.bind相关知识点
1 var addNum = { // 创建一个方法,给val的值 加num 2 num: 5, 3 fun: function(val) { 4 return this.num + val; 5 } ...
- 【转载】C++ function、bind和lambda表达式
本篇随笔为转载,原贴地址:C++ function.bind和lambda表达式. 本文是C++0x系列的第四篇,主要是内容是C++0x中新增的lambda表达式, function对象和bind机制 ...
- C++11 function和bind用法
目录 function和bind用法 function的用法 Demo bind用法 Demo C/C++Linux服务器开发/后台架构师[零声教育]-学习视频教程-腾讯课堂 function和bin ...
- bar.bind.bind_JavaScript中的function.prototype.bind和function.prototype.length解释
bar.bind.bind 功能绑定 (Function Bind) bind is a method on the prototype of all functions in JavaScript. ...
最新文章
- POJ 3734 Blocks
- 10.QML Qt Quick Controls 2之imagine style
- Android 性能分析工具dumpsys的使用(自己增加一部分在后面)
- 使用CFree调用Win32 LoadLibrary 简单示例
- 在数据库‘master’中拒绝CREATE DATABASE权限 的问题
- 开启POP3/SMTP服务
- MySQL之——The slave I/O thread stops because master and slave have equal...
- 在安全模式下激活xp
- python 连接hive_python pyhive通过SSH隧道连接hive报错,求解
- unity3d 取锚点位置_点的投影
- 计算机监控网络运维合同书,网络服务托管运维合同范本
- 编程之美(The beauty of programming)
- Coin3D三维可视化教程4
- Adobe软件中PS、PR、AE、AI软件如何安装【附软件下载】
- 制作macOS苹果电脑U盘启动盘
- reStructuredText 表格快速生成
- Adobe软件老是出现要求输入密码的弹窗怎么解决?
- echart 折线从左到右动画效果_echarts多条折线图动态分层的实现方法
- android拓展笔记本,有道笔记Android版上线,拓展移动终端产品布局
- 艾美捷FLIVO探针:用于细胞活体凋亡检测,助力科研!