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);意淫的效果是，点击#button元素,#element会改变状态。但实际是会报错。找不到你的ele.
原因出现在，绑定事件的回调函数是在全局作用域中执行的。 上面那种写法,就像当对于把change函数的代码给拷贝到第二个参数.
即
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水平应该有一些，如果没有用到的话，可以当做学习，万一以后踩坑了，应该知道自己是怎么屎的~
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
