Javascript高級(jí)技巧

時(shí)間：2024-11-05 04:18:06 JavaScript 我要投稿

相關(guān)推薦

Javascript高級(jí)技巧匯總

　　1、類(lèi)型檢測(cè)

　　使用Object.prototype.toString.call(obj)的方式。

　　因?yàn)闊o(wú)論typeof還是instanceof都無(wú)法做到精確判斷變量類(lèi)型。

　　2、安全的構(gòu)造函數(shù)

　　通常我們定義構(gòu)造函數(shù)的時(shí)候，會(huì)使用類(lèi)似

　　復(fù)制代碼代碼如下:

　　function Person(name){

　　this.name = name;

　　}

　　然而之后如果不是去 var person = new Person("cnblogs")。

　　而是 var person = Person("cnblogs")。那么this就會(huì)指向別處，導(dǎo)致污染其余對(duì)象。

　　解決方法就是在設(shè)置this.property的時(shí)候判斷

　　this instanceof Person

　　如果不是，則new Person(x,x,x);

　　復(fù)制代碼代碼如下:

　　function Person(name){

　　if(this instanceof Person){

　　this.name = name;

　　}else{

　　return new Person(name);

　　}

　　但是要注意一點(diǎn)，如果其余構(gòu)造函數(shù)試圖通過(guò)Person.call(this,x)這種方式實(shí)現(xiàn)繼承的時(shí)候。

　　需要注意，在實(shí)例化之前把那個(gè)函數(shù)的原型指向到Person去。

　　3、惰性載入函數(shù)

　　在調(diào)用函數(shù)時(shí)，經(jīng)常會(huì)存在一種情況，就是函數(shù)中需要對(duì)瀏覽器功能進(jìn)行判斷。

　　例如

　　復(fù)制代碼代碼如下:

　　function createSomething(){

　　if(supportH5){

　　//do something

　　}else{

　　//do otherthing

　　}

　　但是，如果一個(gè)瀏覽器支持一個(gè)功能，那么必然是一直都支持，所以這里面每次執(zhí)行代碼時(shí)都去判斷是不必要的，因?yàn)榕袛嘁淮尉蛪蛄恕?/p>

　　所以可以改寫(xiě)成

　　復(fù)制代碼代碼如下:

　　function createSomething(){

　　if(supportH5){

　　createSomething = function(){ //重寫(xiě)了createSomething 函數(shù)

　　//do something

　　}

　　}else{

　　//同上

　　}

　　這樣，第一次調(diào)用時(shí)會(huì)做判斷，之后重寫(xiě)了這個(gè)函數(shù)，也就自然不會(huì)判斷了。

　　4、函數(shù)綁定

　　在js中，最搞混的應(yīng)該就是 this 指向誰(shuí)的問(wèn)題。

　　其實(shí)，在我學(xué)習(xí)js這么久的時(shí)間里，發(fā)現(xiàn)一個(gè)結(jié)論

　　在函數(shù)中的this會(huì)指向最終調(diào)用這個(gè)函數(shù)的對(duì)象，換句話說(shuō)就是，哪個(gè)對(duì)象調(diào)用了這個(gè)函數(shù)，this就指向那個(gè)對(duì)象。

　　搞清楚了這個(gè)，函數(shù)綁定就不是問(wèn)題了。

　　改變函數(shù)里面this指向的方法就是 call 和 apply，不過(guò)用這兩個(gè)方法都會(huì)執(zhí)行函數(shù)。

　　如果不想執(zhí)行函數(shù)，而是把函數(shù)當(dāng)參數(shù)傳給某個(gè)函數(shù)，還想改變this，那么就用最新的bind。

　　5、定時(shí)器

　　setTimeou、setInterval或者Ajax等雖然是異步，像多線程一樣，但是js是單線程的。

　　其實(shí)這些方法并沒(méi)有增加一個(gè)線程。

　　setTimeout(fn,300)代表的意思是300毫秒后把fn放入js的執(zhí)行隊(duì)列里面。

　　如果這是隊(duì)列里面沒(méi)有事務(wù)要執(zhí)行（也就是說(shuō)js解釋器處于空閑狀態(tài)），那么便會(huì)立刻執(zhí)行。否則，便會(huì)等隊(duì)列的'事務(wù)處理完再執(zhí)行這個(gè)函數(shù)。

　　所以，用setTimeout或者setInterval都不是準(zhǔn)確的控制時(shí)間。

　　還有一點(diǎn)要注意的就是，使用setTimeout模擬setInterval可以準(zhǔn)確控制最小執(zhí)行時(shí)間間隔。

　　6、使用定時(shí)器固定時(shí)間執(zhí)行方法。

　　如果一個(gè)方法要執(zhí)行很久，也許造成瀏覽器短時(shí)間沒(méi)響應(yīng)，那么可以用定時(shí)器固定每段時(shí)間執(zhí)行一部分。這樣可以不至于讓js一直處于忙碌狀態(tài)（瀏覽器無(wú)響應(yīng)），有空閑的時(shí)間處理其余事務(wù)。比如有一個(gè)1000長(zhǎng)度數(shù)組循環(huán)，那么可以100每次的執(zhí)行，中間隔點(diǎn)時(shí)間讓js處于空閑去做別的操作。

　　7、函數(shù)節(jié)流。

　　函數(shù)節(jié)流是一種提高性能很好的方式，在某些場(chǎng)合可以提高幾倍效率。

　　比如在做拖動(dòng)或者是一些發(fā)生在onresize事件中的操作時(shí)。

　　你每操作一下，其實(shí)執(zhí)行了很多遍了。例如：

　　復(fù)制代碼代碼如下:

　　var i = 0;

　　window.onresize = function(){

　　console.log(i++);

　　}

　　嘗試著去拉伸瀏覽器，就會(huì)發(fā)現(xiàn)控制臺(tái)瞬間顯示i都超過(guò)100多了。

　　改變一下寫(xiě)法，例如：

　　復(fù)制代碼代碼如下: