网站做系统下载,湖南人文科技学院王牌专业,安卓端开发,最新新闻头条Function.prototype.bind()方法
bind()方法主要就是将函数绑定到某个对象#xff0c;bind()会创建一个函数#xff0c;函数体内的this对象的值会被绑定到传入bind()第一个参数的值#xff0c;例如#xff0c;f.bind(obj)#xff0c;实际上可以理解为obj.f()#xff0c;这…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和nreturn中的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; }
