javascript之bind使用介绍
首先apply和call是老生常谈的东西，但是对于bind，我愣了下，因为这个词是jquery中使用频率很高的一个方法，用来给DOM元素绑定事件用的
前几天看到一个面试题，题目是这样的：
请你说说对javascript中apply，call，bind的理解？
首先apply和call是老生常谈的东西，但是对于bind，我愣了下，因为这个词是jquery中使用频率很高的一个方法，用来给DOM元素绑定事件用的。
为了搞清这个陌生又熟悉的bind，google一下，发现javascript1.8.5版本中原生实现了此方法，目前IE9+，ff4+，chrome7+支持此方法，opera和safari不支持（MDN上的说明）。
bind的作用和apply，call类似都是改变函数的execute context，也就是runtime时this关键字的指向。但是使用方法略有不同。一个函数进行bind后可稍后执行。
例子如下：
代码如下:
var person = {
name: 'Andrew',
job: 'web front end developer',
gender: 'male',
sayHello: function() {
return 'Hi, I am ' + this.name + ', a ' + this.job;
}
}
console.log(person.sayHello()); // Hi, I am Andrew, a web front end developer
var anotherGuySayHello = person.sayHello.bind({
name:'Alex',
job: 'back end C# developer'
});
console.log(anotherGuySayHello()); // Hi, I am Alex, a back end C# developer
另外带有参数的例子：
代码如下:
function add(arg1, arg2, arg3, arg4) {
return arg1 + ' ' + arg2 + ' ' + arg3 + ' ' + arg4;
}
var addMore = add.bind({}, 'a', 'b');
console.log(addMore('c', 'd')); // a b c d
如果你的浏览器暂时不支持此方法，但你又觉得这个很cool，想用，MDN上也给出参考实现， 这个实现很有意思，：
代码如下:
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 fSlice = Array.prototype.slice,
aArgs = fSlice.call(arguments, 1),
fToBind = this,
fNOP = function() {},
fBound = function() {
return fToBind.apply(this instanceof fNOP ? this : oThis || window, aArgs.concat(fSlice.call(arguments)));
};
fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();
return fBound;
};
}
最后几行代码，通过prototype chain的方式，其中fBound是调用bind函数的子类，为什么这么实现，可以仔细看 fBound = function(){ return ... }这一部分，其中this是运行时决定的，这里主要考虑到如果用new的方式来调用函数(构造函数方式)的情况。
下面的例子，就能很好的说明这点，为了方便说明，此例子直接来自MDN：
代码如下:
function Point(x,y) {
this.x = x;
this.y = y;
}
Point.prototype.toString = function() {
return this.x + ',' + this.y;
};
var p = new Point(1, 2);
p.toString(); // 1,2
var emptyObj = {};
var YAxisPoint = Point.bind(emptyObj, 0);
var axisPoint = new YAxisPoint(5);
axisPoint.toString(); // 0, 5
axisPoint instanceof Point; // true
axisPoint instanceof YAxisPoint; // true
来源：https://www.weidianyuedu.com
javascript之bind使用介绍相关推荐
- 浏览器html5/css3兼容性检测的javascript类库 - Modernizr简单介绍
为什么80%的码农都做不了架构师?>>> 日期:2012-4-17 来源:GBin1.com 在线演示 本地下载 大家是不是在开发设计过程中遇到如下情况?某些浏览器不支持H ...
- 转：javascript方法--bind()
javascript方法--bind() bind方法,顾名思义,就是绑定的意思,到底是怎么绑定然后怎么用呢,下面就来说说我对这个方法的理解. 语法 fun.bind(this,arg1,arg2,. ...
- javascript中in用法介绍
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- bind()函数介绍
bind()函数介绍 在建立套接字文件描述符成功后,需要对套接字进行地址和端口的绑定,才能进行数据的接收和发送操作. 函数原型 bind()函数将长度为addlen的struct sockadd类型的 ...
- JavaScript压缩工具JSA使用介绍
JavaScript压缩工具JSA使用介绍 JSA绝对是我使用过的JS压缩工具中最上乘的一个.认识它是从ligerUI开始.在ligerUI的QQ讨论组里,大神--ligerUI的作者告诉我他的lig ...
- Javascript中 toFixed 规则介绍及其改进方法
今天看了司徒大神的一篇博文,这篇文章专门介绍了toFixed的规则,搬来记录一下.文末有原文链接. javascript中toFixed使用的是银行家舍入规则. 银行家舍入:所谓银行家舍入法,其实质是 ...
- JavaScript字符串String常用方法介绍
JavaScript字符串在底层是一个字符串数组,比如hello字符串在底层是["h","e","l","l",&quo ...
- 编写可维护的javascript代码---开篇（介绍自动报错的插件）
文章开篇主要推荐了2款检测编程风格的工具: JSLint和JSHint: jsLint是由Douglas Crockford创建的.这是一个通用的javascript代码质量检测工具,最开始JSLin ...
- javascript的bind方法绑定深入理解
一.方法介绍function.bind(thisArg[,arg1[,arg2[,argN]]])1.方法绑定在thisArg对象上.2.可以绑定参数,用于返回值方法的下一步参数 var checkN ...
最新文章
- PCL ：K-d tree 2 结构理解
- 单片机学不会怎么办？单片机从哪里开始学？
- vue-cli3.0 移动端适配
- centos7安装java8
- linux系统设置IP地址
- 26、临时表的创建和重复数据的处理
- LeetCode 1054. 距离相等的条形码（优先队列）
- 有哪些让人相见恨晚的记笔记方法？
- 计算机cpu风扇不转怎么办,电脑cpu风扇不转是怎么回事
- ipad的正确使用方法视频,ipad的正确使用方法图解
- QT图形显示和处理7
- 使用jib-maven-plugin分层构建Docker镜像——避免直接使用FatJar
- 嵌入式设备的switch 以及PHY 芯片调试和选型 （1）
- 收件人、寄件人如何根据快递单号查询物流进度
- 商品支付，支付逻辑漏洞安全(niushop)——实例讲解一毛钱购买手机
- mysql修改初始密码/ 重置默认密码 You must reset your password using ALTER USER statement
- 『语音信号处理』语音库 librosa 学习
- 时尚垂直电商发展提速，剖析踩猫打狗背后的野心
- 银行联行号怎么查询？
- matlab 做偏回归分析,偏最小二乘回归分析|MATLAB 数学统计与优化|MATLAB技术论坛 - Powered by Discuz!...