借用方法和bind全面解析

jsjsjs中可以用call(),apply(),bind()，可以改变调用的上下文，从而轻易地借用了其他对象的方法，这样做的好处是无需继承这些对象。这也是我实际开发中总结的一些经验，给大家。(下面交互的js终端，我用的是nodejs)简单的方式用typeofvara=1,b='abc',c=true,d=null,e=undefined;typeofatypeofbtypeofctypeofdtypeofevarfn=function(){}typeoffn我们发现d是一个对象，而不是我们要的结果null。对于的数据类型function,Object对象，以及数组检测，当我们用typeof检测，除了function的类型是function外，其他的都是Objectvararr=[1,3,4]typeofarrvarobj={'a':1,'b':2}typeofobj那么为了更好的检测一个变量的类型，我们可以调用Ototype.toString（js中除了null外，其顶层原型是OtotypetoString）jscall,apply用来改变上下文执行环境，也就是我们通常看到this指针的指向）。基于这些，我们可以轻易的写一个funcitonfunctionreturnOtotype.toString.call(str).slice(8,-1);//[ObjectObject8returnOtotype.toString.call(str).slice(8,-demofunctioncheckVarType(str){returnOtotype.toString.call(str).slice(8,-1);};jsstring,number,boolean，几乎所有的数据都是对象。是一种适用于遍历和转换有序数列的对象，在它的原型上有slice,join,push,pop见的是Atype.slicefunctionmyfn(){//arguments.sort();这样会报错，因为argumentsvarargs=Atotype.slice.call(arguments)arguments}function...varargs=...a...return...vararr=myfn('a','b','abc','e');['a','abc','b','e'call,apply的其他方法filter,joinArray上的joinAtotype.join.call('abc','@');//Atotypeprototype，而Atotype顶层是Ototype。demo:indexOfdemo:将数据元素转换为小写，可以借用字符串上的小写函数toLowerCasevartoUpper=Stotype.toLowerCase;['a','b']义的（字符串的sliceStotypeStotype字面量在['b','a']call,apply象上应用比较多，我们有时候无需为字符串拓展一些新的方法，在实际的项目中，对于this函数的调用者（上下文环境），在以后的es6中会逐渐规范，有的朋友，可以读读es6相关属性和关于bindbind()方创建一个新函数,称为绑定函数。当调用这个绑定函数时,绑定函数会以创建它时传入bind()thisbindfunctionthis.nickname=name;this.distractedGreeting=function(){console.log("o,mynameis"+this.nickname);//当我们在调用函数this指向该调用函数，而不在是上下文this},}}varalice=new('Alice');//o,mynameis这个时候输出的this.nickname是undefinedthis数时候确定的，再因为setTimeout在全局环境下执行，所以this指向setTimeout的上下文：以前解决这个问题的办法通常是缓存this，例如：function(name){this.nickname=name;this.distractedGreetingfunctionvarself=this;//<--注意这一行!console.log("o,mynameis"+self.nickname);//<--还有这一行},}}varalice=new('Alice');//after500mslogs"o,mynameis这样就解决了这个问题，非常方便，因为它使得setTimeout函数中可以 但是现在有一个更好的办法！您可以使用bind。上面的例子中被更新为：function(name){this.nickname=name;this.distractedGreeting=function(){console.log("o,mynameis"+}.bind(this),500);//<--this}}varalice=new('Alice');//after500mslogs"o,mynameisbind()最简单的用法是创建一个函数，使这个函数不论怎么调用都有同样的this值。JavaScript新手经常犯的一个错误是将一个方法从对象中拿出来，然后再调用，希望方法中的this是原来的对象。（比如this.x=varmodule=x:getX:function(){returnthis.x;module.getX();//vargetX=getX9this//创建一个'this'绑定到module的函数varboundGetXgetX.bind(module);boundGetX();//81BrowserVersionsupportChrome7Firefox(Gecko)4.0InternetExplorerOperaSafari很不幸，Ftotype.bind在IE8话，可能在运行时会出现问题。bindECMA-262行。你可以部份地在开头加入以下代码，就能使它运作，让不支持的浏览器也能使用bind()功能。if(!Ftotype.bind){Ftotype.bind=function(){varmethod=this;varargs=Atotype.slice.call(arguments);varobject=args.shift();returnfunction()returnmethod.apply(object,args.concat(Atotype.slice.call(arguments))}}}/2014/01/23/understanding-javascript-function-prototype- fun.bind(thisArgarg1arg2thisnewarg1,arg2,bind（一个绑定的函数）有同样的函数体（ECMAScript5Call），当该函数（绑定函数的原函数）thisbind能被重写。绑定函数被调用时，bind()也接受预设的参数提供给原函数。一个绑定函数也能使用new操this完整的if(!Ftotype.bind){Ftotype.bind=function(){varmethod=this;varargs=Atotype.slice.call(arguments);varobject=args.shift();returnfunction()returnmethod.apply(object,args.concat(Atotype.slice.call(arguments))}}}function(name){=name;this.say=function(){console.log("mynameis}}varman=newman.say();//mynameisthisfunction_2(name){=name;var_thisthisthisthis.say=function(){console.log("mynameis}}varman_2=new_2("heige");man_2.say();//mynameis:heige//makeuserofbindtopointthisthisfunction_3(name){=name;var_this=this;this.say=fun