JS中的bind()方法
2017-03-01 17:59
323 查看
Function.prototype.bind()方法
bind()方法主要就是将函数绑定到某个对象,bind()会创建一个函数,函数体内的this对象的值会被绑定到传入bind()第一个参数的值,例如,f.bind(obj),实际上可以理解为obj.f(),这时,f函数体内的this自然指向的是obj
例子
再看另外一种用法
例子
分步处理参数的过程其实是一个典型的函数柯里化的过程(Curry)
我们再来看一道题目
可以用bind的方式预定义参数,例子
如何自己实现bind方法?
因为bind()函数发布在ES5中,因此并不能很好的在所有浏览器中运行,需要Polyfill,当然现在几乎所有现代浏览器都支持ES5
更加健壮的方式:
注意:这里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;
}
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 apply/call/caller/callee/bind使用方法与区别分析
- js apply/call/caller/callee/bind使用方法与区别分析
- js apply/call/caller/callee/bind使用方法与区别分析
- js apply/call/caller/callee/bind使用方法与区别分析
- JS中的bind方法
- js apply/call/caller/callee/bind使用方法与区别分析
- JS中的call、apply、bind方法
- JS中的call、apply、bind方法
- js function call,apply,bind方法
- prototype.js中Function.prototype.bind方法浅解
- js apply/call/caller/callee/bind使用方法与区别分析
- 理解 backbone.js 中的 bind 和 bindAll 方法,关于如何在方法中指定其中的 this,包含apply方法的说明[转载]
- js apply/call/caller/callee/bind使用方法与区别分析
- js中bind,call,apply方法的应用
- js经验点滴js apply/call/caller/callee/bind使用方法与区别分析
- js apply/call/caller/callee/bind使用方法与区别分析
- JS中的bind方法学习
- js apply/call/caller/callee/bind使用方法与区别分析
- JS中的bind方法学习
- JS中的bind方法与函数柯里化