javascript之bind使用介绍

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript之bind使用介绍，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2639字，纯文字阅读大概需要4分钟。

内容图文

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 
 

最后给出文章链接，方便您进一步了解
MDN: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind 

MSDN: http://msdn.microsoft.com/en-us/library/ff841995%28v=vs.94%29.aspx 
            
            


           
                
                                                

内容总结

以上是互联网集市为您收集整理的javascript之bind使用介绍全部内容，希望文章能够帮你解决javascript之bind使用介绍所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端