javascript之bind使用介绍

迈不过友情╰ 2024-03-31 13:09 65阅读 0赞

首先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后可稍后执行。  
例子如下：

**代码如下:**

另外带有参数的例子：

**代码如下:**

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：

**代码如下:**

来源：[https://www.weidianyuedu.com][https_www.weidianyuedu.com]

[https_www.weidianyuedu.com]: https://www.weidianyuedu.com