JS中的bind()方法

Function.prototype.bind()方法

bind()方法主要就是将函数绑定到某个对象，bind()会创建一个函数，函数体内的this对象的值会被绑定到传入bind()第一个参数的值，例如，f.bind(obj)，实际上可以理解为obj.f()，这时，f函数体内的this自然指向的是obj

例子

var a = {
b : function(){
var func = function(){
console.log(this.c);
}
func();
},
c : ‘Hello!’
}
a.b();
//undefined

注意：这里的this指向的是全局作用域，所以会返回undefined

var a = {
b : function(){
var that = this;
var func = function(){
console.log(that.c);
}
func();
},
c : ‘Hello!’
}
a.b();
//Hello!

注意：可以通过赋值的方式将this赋值给that

var a = {
b : function(){
var func = function(){
console.log(this.c);
}.bind(this);
func();
},
c : ‘Hello!’
}
a.b();
//Hello!
var a = {
b : function(){
var func = function(){
console.log(this.c);
}
func.bind(this)();
},
c : ‘Hello!’
}
a.b();
//Hello!

注意：当然，也可以通过bind的方式绑定this，上述两种bind绑定的方式都可以
再看另外一种用法

例子

function f(y, z){
return this.x + y + z;
}
var m = f.bind({x : 1}, 2);
console.log(m(3));
//6

注意：这里bind方法会把它的第一个实参绑定给f函数体内的this，所以这里的this即指向{x : 1}对象，从第二个参数起，会依次传递给原始函数，这里的第二个参数2，即是f函数的y参数，最后调用m(3)的时候，这里的3便是最后一个参数z了，所以执行结果为1 + 2 + 3 = 6
分步处理参数的过程其实是一个典型的函数柯里化的过程（Curry）

我们再来看一道题目

var a = document.write;
a(‘hello’);
//Error
a.bind(document)(‘hello’);
//hello
a.call(document, ‘hello’);
//hello

注意：这里直接调用a的话，this指向的是global或window对象，所以会报错，通过bind或者call的方式绑定this至document对象，即可正常调用
可以用bind的方式预定义参数，例子

function list(){
return Array.prototype.slice.call(arguments);
}
var list1 = list(1, 2, 3);
//[1, 2, 3]
//预定义参数
var a = list.bind(undefined, 10);
var list2 = a();
//[10]
var list3 = a(1, 2, 3);
//[10, 1, 2, 3]

注意：这里的Array.prototype.slice.call(arguments)是用来将参数由类数组转换为真正的数组，a的第一个参数undefined表示this的指向，第二个参数10即表示list中真正的第一个参数，依次类推

如何自己实现bind方法？

因为bind()函数发布在ES5中，因此并不能很好的在所有浏览器中运行，需要Polyfill，当然现在几乎所有现代浏览器都支持ES5

//my_bind方法支持绑定对象
Function.prototype.my_bind = function(context){
var self = this;
return function(){
return self.apply(context, arguments);
}
}
//测试
function a(){
return this.name;
}
a(); //’’
var b = {name : ‘kong’};
a.bind(b)(); //kong
a.my_bind(b)(); //kong

上述是最简单的一种实现方式，仅可用来绑定，不可传参
更加健壮的方式：

//my_bind方法不仅可以绑定对象，还可以传参
Function.prototype.my_bind = function(context){
var args = Array.prototype.slice.call(arguments, 1);
//args [7, 8]
var self = this;
return function(){
var innerArgs = Array.prototype.slice.call(arguments);
//innerArgs [9]
var finalArgs = args.concat(innerArgs);
//finalArgs [7, 8, 9]
return self.apply(context, finalArgs);
}
}
//测试
function a(m, n, o){
return this.name + ’ ’ + m + ’ ’ + n + ’ ’ + o;
}
var b = {name : ‘kong’};
a.my_bind(b, 7, 8)(9); //kong 7 8 9

注意：这里my_bind函数中args表示的是在bind时传入的预定义参数，这里即为7和8，分别表示m和n，return中的innerArgs表示的是调用a的时候传入的参数，这里表示9，即o，最后用concat连接两个数组，即为finalArgs，所以最后执行的是a(7, 8, 9)，this指向b，实现了一个完善点的bind方法

处理bind返回的函数如果作为构造函数，搭配new关键字出现的话，我们绑定的this就需要被忽略的兼容性问题

更加完美的方式

//bind返回的函数如果作为构造函数，搭配new关键字出现的话，我们绑定的this就需要被忽略
//处理构造函数场景下的兼容
Function.prototype.bind = Function.prototype.bind || function(context){
//确保调用bind方法的一定要是一个函数
if(typeof this !== “function”){
throw new TypeError(“Function.prototype.bind - what is trying to be bound is not callable”);
}
var args = Array.prototype.slice.call(arguments, 1);
var self = this;
var F = function(){};
F.prototype = this.prototype;
var bound = function(){
var innerArgs = Array.prototype.slice.call(arguments);
var finalArgs = args.concat(innerArgs);
return self.apply(this instanceof F ? this : context || this, finalArgs);
}
bound.prototype = new F();
return bound;
}

JS中的bind()方法相关推荐

JS中通过call方法实现继承
JS中通过call方法实现继承原文:JS中通过call方法实现继承讲解都写在注释里面了,有不对的地方请拍砖,谢谢! <html xmlns="http://www.w3.org/1 ...
JS中的Replace方法
最近查一个bug,原因是JS中的Replace方法造成的,当将一个字符串中有处需要替换时,一般会用到JS中的Replace方法,Replace方法的第一个参数如果是传的字符串,只会替换第一处.代码如下 ...
java script eval_「eval」js中的eval方法详解（一）–eval方法的初级应用 - seo实验室...
eval 在我看来,js中的eval()方法就是一个js语言的执行器,它能把其中的参数按照javaScript语法进行解析并执行. 语法: eval(s); eval()方法中的参数s有多种情况.参数 ...
JS中创建对象的方法
JS中创建对象的方法最近手头一个项目刚完成,下一个显目还在准备中,趁这个空档期,拿起尘封多年的JS书, 重温一遍JS面向对象程序设计,然后就得出下文,算是一个总结吧. 也许,你会说 "创建 ...
jquery中的map()方法与js中的map()方法
1.jquery中的map()方法首先看一个简单的实例: $("p").append( $("input").map(function(){ return $ ...
js中的字符串方法与数组方法总结
js中的字符串方法与数组方法总结 1.字符串方法 2.数组方法
请尽可能说出js中数组的方法，最少3个，越多越好
我接下来要把数组方法全都过一遍,顺手做个整理. 至于为什么整理这个,最近总听说面试经常会问到这个问题, 面试官灵魂发问:请尽可能说出js中数组的方法,最少3个,越多越好据可靠消息了解到,如果你回答的 ...
slice在php里面什么意思,js中slice()使用方法
本文主要和大家分享js中slice()使用方法,slice()通过索引位置获取新的数组,该方法不会修改原数组,只是返回一个新的子数组. 用法:arrayObj.slice(start,end)arra ...
js中的slice方法（开始索引,结束索引-不包含该索引元素）-截取和splice方法-删除（开始索引，删除个数）和插入-（开始索引，删除个数，插入内容）
js中的slice方法(开始索引,结束索引-不包含该索引元素)-截取和splice方法-删除(开始索引,删除个数)和插入-(开始索引,删除个数,插入内容) 1.slice(start,end)-截取 ...

JS中的bind()方法

JS中的bind()方法相关推荐

最新文章

热门文章