JavaScript筆記

geekzhou 發(fā)布于2019-08-21 17:23 / 3234人閱讀

摘要：引擎的內(nèi)部運(yùn)行機(jī)制是單線程作為瀏覽器腳本語(yǔ)言，的主要用途是與用戶互動(dòng)，以及操作。這決定了它只能是單線程，否則會(huì)帶來(lái)很復(fù)雜的同步問(wèn)題任務(wù)隊(duì)列單線程就意味著，所有任務(wù)需要排隊(duì)，前一個(gè)任務(wù)結(jié)束，才會(huì)執(zhí)行后一個(gè)任務(wù)。

JavaScript引擎的內(nèi)部運(yùn)行機(jī)制

http://www.ruanyifeng.com/blo...

JavaScript是單線程

作為瀏覽器腳本語(yǔ)言，JavaScript的主要用途是與用戶互動(dòng)，以及操作DOM。這決定了它只能是單線程，否則會(huì)帶來(lái)很復(fù)雜的同步問(wèn)題

任務(wù)隊(duì)列

單線程就意味著，所有任務(wù)需要排隊(duì)，前一個(gè)任務(wù)結(jié)束，才會(huì)執(zhí)行后一個(gè)任務(wù)。如果前一個(gè)任務(wù)耗時(shí)很長(zhǎng)，后一個(gè)任務(wù)就不得不一直等著
同步任務(wù)（synchronous）指的是，在主線程上排隊(duì)執(zhí)行的任務(wù)，只有前一個(gè)任務(wù)執(zhí)行完畢，才能執(zhí)行后一個(gè)任務(wù)；
異步任務(wù)（asynchronous）指的是，不進(jìn)入主線程、而進(jìn)入"任務(wù)隊(duì)列"（task queue）的任務(wù)，只有"任務(wù)隊(duì)列"通知主線程，某個(gè)異步任務(wù)可以執(zhí)行了，該任務(wù)才會(huì)進(jìn)入主線程執(zhí)行
req.send方法是Ajax操作向服務(wù)器發(fā)送數(shù)據(jù)，它是一個(gè)異步任務(wù)，意味著只有當(dāng)前腳本的所有代碼執(zhí)行完，系統(tǒng)才會(huì)去讀取"任務(wù)隊(duì)列"

返回函數(shù)

function func(x,y){
   var value=300;
   return function(){
    return value+x+y;
  };
}
console.info(func(100,200)());//600

參數(shù)

var values = [ 213, 16, 2058, 54, 10, 1965, 57, 9 ];
values.sort(function(value1,value2){return value2 - value1; });

this

window.color = "red";
var o = { color: "blue" };
function  sayColor(){
    alert(this.color);
}
sayColor(); //red
sayColor.call(this); //red
sayColor.call(window); //red
sayColor.call(o); //blue

閉包（closure）

http://www.ruanyifeng.com/blo...
Javascript語(yǔ)言的特殊之處，就在于函數(shù)內(nèi)部可以直接讀取全局變量
函數(shù)外部自然無(wú)法讀取函數(shù)內(nèi)的局部變量
**函數(shù)內(nèi)部聲明變量的時(shí)候，一定要使用var命令。如果不用的話，你實(shí)際上聲明了一個(gè)全局變量！
Javascript語(yǔ)言特有的"鏈?zhǔn)阶饔糜?結(jié)構(gòu)（chain scope）,子對(duì)象會(huì)一級(jí)一級(jí)地向上尋找所有父對(duì)象的變量。所以，父對(duì)象的所有變量，對(duì)子對(duì)象都是可見(jiàn)的，反之則不成立。

閉包的用途

，一個(gè)是前面提到的可以讀取函數(shù)內(nèi)部的變量，
另一個(gè)就是讓這些變量的值始終保持在內(nèi)存中

function a() {
    var i = 0;//局部變量
    return function b() { //a是b的父函數(shù)，b被賦給一個(gè)全局變量，導(dǎo)致b始終在內(nèi)存中，而a依賴于b，因此a也始終在內(nèi)存中，不會(huì)在調(diào)用結(jié)束后，被垃圾回收機(jī)制（garbage collection）回收。
      console.info(++i);
    };
};
var c = a();
for (var i = 0; i < 10; i++) {
    c();
}

節(jié)流函數(shù)

function delayFn2 (fn, delay, mustDelay){
     var timer = null;
     var t_start;
     return function(){
         var context = this, args = arguments, t_cur = +new Date();
         //先清理上一次的調(diào)用觸發(fā)（上一次調(diào)用觸發(fā)事件不執(zhí)行）
         clearTimeout(timer);
         //如果不存觸發(fā)時(shí)間，那么當(dāng)前的時(shí)間就是觸發(fā)時(shí)間
         if(!t_start){
             t_start = t_cur;
         }
         //如果當(dāng)前時(shí)間-觸發(fā)時(shí)間大于最大的間隔時(shí)間（mustDelay），觸發(fā)一次函數(shù)運(yùn)行函數(shù)
         if(t_cur - t_start >= mustDelay){
             fn.apply(context, args);
             t_start = t_cur;
         }
         //否則延遲執(zhí)行
         else {
             timer = setTimeout(function(){
                 fn.apply(context, args);
             }, delay);
         }
     };
}
var count=0;
function fn1(){
    count++;
    console.log(count)
} 
//100ms內(nèi)連續(xù)觸發(fā)的調(diào)用，后一個(gè)調(diào)用會(huì)把前一個(gè)調(diào)用的等待處理掉，但每隔200ms至少執(zhí)行一次
document.onmousemove=delayFn2(fn1,100,200)

鉤子函數(shù)

使用data-*屬性作為JS鉤子，是不正確的。
data-*屬性，根據(jù)規(guī)范，用于存儲(chǔ)自定義的數(shù)據(jù)隱私的頁(yè)面或應(yīng)用程序
data-* 屬性被設(shè)計(jì)來(lái)存儲(chǔ)數(shù)據(jù)，而不被綁定到