你不知道的js技巧

JS进阶

说起这个应该算是老生常谈了吧。所谓的高级，其实就是讲了一些我们平常用不到(或许用了不知道)，但是非常实在的东西。算是熟练掌握js的一个必经road吧。

检测函数类型

其实检测函数的类型应该算是js的一个痛点，因为js是一门弱类型的语言，对类型的检测不是那么看重。但随着JS的发展，类型变得更加丰富。而检测类型的复杂度，也变得复杂了~ (MD). 大致梳理一下吧。如果你想检测值类型(Number,String,Boolean,undefined,null,Symbol). 使用typeof就可以了

typeof 23; //"number"  typeof "webpack"; //"string"  typeof true; //"boolean"  typeof undefined;  //"undefined"  typeof symbol();  //"symbol"  //但是有个呆毛null.  typeof null; //"object" 如果理解原型链的话，那就无可厚非了

而检测自定义类型，或者原生的应用类型，则需要使用到instanceof

let obj = new Object();  obj instanceof Object; //true  ...

但是有时候情况往往不是这么简单。 比如如果你想检测iframe里面的属性值的话，基本上是不可能的。因为检测的前提要求是在同一个全局作用于下。所以为了能够正常检测一些值的类型(排除在iframe的情况).那有没有什么万能的方法呢？ 确实有，你可以使用调用toString()的方法,得到相关的类型.

let value = new FormData();  console.log(Object.prototype.toString.call(value)); //"[object FormData]"

是不是感觉特别情切呢。 你也可以更进一步的提取。要知道，我们是有情怀的淫。

function getType(value){  //基本上可以返回所有的类型，不论你是自定义还是原生      return Object.prototype.toString.call(value).match(/\s{1}(\w+)/)[1];  }  let obj = new Object();  console.log(getType(obj)); //"Object"

作用域安全的构造函数

关于函数的坑应该是无处不在(谁叫他是js里面最难懂的一个类型)。关于函数里面的this得说明一下。只有函数在运行的时候,函数里面的this才会真正的绑定.这就造成了一个问题，即，如果你在全局不小心运行了一个函数，那结果就呵呵了。 因为此时，你的this代表的window.这样你会污染到全局的相关属性，造成一个蜜汁bug.所以，为了安全需要在创建时，对this指针做一个判断.

function Father(name){      this.name = name;  }  var jimmy =  Father("jimmy");  //这样会污染全局变量window.name的属性。造成重写  console.log(window.name); //"jimmy"  console.log(jimmy.name); //"jimmy"  //修改过后  function Father(name){      if(this instanceof Father){          this.name = name;      }else{          return new Father(name);      }  }  var jimmy =  Father("jimmy");  //保证了作用域的安全性  console.log(window.name); //"xxx"   console.log(jimmy.name); //"jimmy"

惰性载入函数

这个应用最多的场景应该是兼容性判断吧。比如你写了一个判断绑定事件方法的检测函数

function bind(ele,fn,type){      if(document.addEventListener){  //检测现代浏览器          ele.addEventListener(type,fn,false);      }else if(document.attachEvent){  //检测低版本的IE          ele.attachEvent(type,fn);      }  }  let ele = document.querySelector("#first");  bind(ele,function(){console.log("hehe");},'click');  //执行一次判断  bind(ele,function(){console.log("hehe");},'dbclick');  //第二次执行判断  bind(ele,function(){console.log("hehe");},'mouseover');  //第三次执行判断  ...

如果你绑定的事件越多，那么他每次绑定时都会执行一次判断. 为了减少判断次数，可以使用惰性载入函数，即，先判断再返回函数.

function bind(){      if(document.addEventListener){          bind = function(ele,fn,type){              ele.addEventListener(type,fn,false);          }      }else if(document.attachEvent){  //检测低版本的IE          bind = function(ele,fn,type){              ele.attachEvent(type,fn);          }      }else{        throw "u browser is from outer space";      }  }  bind();  //首先检测一遍,然后返回对应的检测版本  console.log(bind);  //可以检测一下现在bind里面的内容  //当然如果不爽的话可以直接使用匿名函数，直接执行  var bind = (function(){      if(document.addEventListener){         return function(ele,fn,type){              ele.addEventListener(type,fn,false);          }      }else if(document.attachEvent){  //检测低版本的IE          return function(ele,fn,type){              ele.attachEvent(type,fn);          }      }else{        throw "u browser is from outer space";      }  })();  console.log(bind);

本人推荐下面哪种写法，因为言简意赅，不用显示调用~.

函数的绑定

这个坑应该大多数人都踩过.比如我使用单例，创建了一系列的函数和内容.然后再执行绑定.

let sendMsg = {      ele: document.querySelector('#element'),      change:function(){          this.ele.classList.toggle(".active"); //改变状态      }  }  document.querySelector('#button').addEventListener('click',sendMsg.change,false);

document.querySelector('#button').addEventListener('click',function(){      this.ele.classList.toggle(".active"); //改变状态  },false);

而执行的时候，是在window的全局环境里执行的。所以会抛出错误。解决办法就是创建一个闭包，来保存这个调用方法的作用域.

document.querySelector('#button').addEventListener('click',function(){      sendMsg.change();  },false);

这样就不会出错了。但这样写有悖我们作为一名代码艺术家的风格。 通常是不提倡使用闭包的(即不要让别人看出来你在使用闭包). 这时候可以自己创建一个绑定函数（I call it as 代理）

function bind(fn,context){      return function(){          fn.apply(context,arguments);  //arguments是作为参数传入的      }  }  //上面的闭包可以改为  document.querySelector('#button').addEventListener('click',bind(sendMsg.change,sendMsg),false);

在es5中，每个函数都自带了自已bind的方法,这样就更容易，让别人看不出，你在使用闭包了。

document.querySelector('#button').addEventListener('click',sendMsg.change.bind(sendMsg),false);

由于这个方法只兼容到IE9+,所以遇到IE8的时候你就呵呵了.

函数的Curry

函数的柯里化应该算是函数绑定的一个升级版。但他们两个有个共同点就是: 都是用了闭包并且返回了一个函数. 但是Curry 可以额外的传入参数，这是函数绑定所不具备的.关于Curry还有一个好处就是，实现自定义参数函数的重用性.

//这是JS高程上面的例子  function curry(fn){      var args = Array.prototype.slice.call(arguments,1);      return function(){          var innerArgs = Array.prototype.slice.call(arguments);            var final = args.concat(innerArgs);      }  }  function add(num1,num2){      return num1+num2;  }  var Cadd = curry(add,5);  console.log(Cadd(3)); //8  console.log(Cadd(5)); //10

可以重写上面的bind

function bind(fn,context){      var args = Array.prototype.slice.call(arguments,2); //获取上面两个参数以外的其余参数      return function(){          //获取你第二次传入的参数,并转化为数组          var innerArgs = Array.prototype.slice.call(arguments);            var final = args.concat(innerArgs);          fn.apply(context,final);  //使用apply解析参数并调用.      }  }

这样我们就可以传入多个参数,而且还可以自定义参数. 当然也可以使用原来的调用方式。差不多了，觉得上面的如果你用到了，说明你的js水平应该有一些，如果没有用到的话，可以当做学习，万一以后踩坑了，应该知道自己是怎么屎的~

来自： http://segmentfault.com/a/1190000004267888