你不知道的js技巧你不知道的js技巧是什么

liuian 2024-12-30 05:16 49 浏览

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水平应该有一些，如果没有用到的话，可以当做学习，万一以后踩坑了，应该知道自己是怎么屎的~

toggle javascript