JavaScript核心程式設計(一點點補充)

2018年8月15日18:11:22

Promise 非同步同步 閉包 物件 This 回撥 BulaBulaBula
一個一個一個一個搞 這些個東西搞懂了 然後去搞Nodejs 別人圖快 我就圖慢 慢慢來

• this本質就是個隱式引數
  bind=>就是顯式的確定this是什麼
  bind window 給foo

function foo(){console.log(this)}var obj = foo.bind(document)console.dir(obj)
obj() // document

• this,new例項化與this

function foo(){console.log(this)}new foo()  //{}

new foo()呼叫時js內部會建立臨時空物件 temp = {}
然後把foo()的this 繫結到空物件上去 binded = foo.bind(temp)         binded()foo的this 就是空物件

• 原型鏈 __proto__
  物件有此屬性 js一切皆物件

__proto__.__proto__.__proto__ 這就是原型鏈

var obj = {}  ====> var obj = new Object()function foo(){}  ====> var foo = new Function()例項化時 做的事情其實就是obj.__proto__指向 Object.prototype

物件的原型 與 類的原型

var date = new Date()
date.__proto__ === Date.prototype //trueDate.prototype.name = 'aili'date.name   // ailifunction AA(n,c){    this.name =n    this.color=c    this.log=()=> console.log("color:"+this.color+"name:"+this.name)
}var a = new AA("aili","blue")console.log(a.name)console.log(a.constructor === AA) //trueconsole.log(a.__proto__ === AA.prototype)

所以看到這裡就很明白了
date.prototype 是沒有的 只有類才有prtotype屬性  物件只有proto屬性而沒有prototype

• 函數語言程式設計
  1.first-class function 作為引數傳入函式

2.higher-order-function 返回函式的函式

loadash.js underscorejs升級而來的 這個庫很多很多很多人推薦看原始碼

• closure - 域
  

  

  
  很明顯 返回的匿名函式 a1 與 a2 變數儲存在了 Closure裡 才能訪問到這兩個變數

• IIFE 立即執行函式表示式  ------ 模組化
  immediately invoked function expression
  var foo = function(){}
  function foo(){}
  IIFE就是基於函式表示式而產生的

(function(){}()) 會返回本身 並立即執行

;()()    ;是為了防止錯誤

最常用的模組實現方式 ----- es6之前 沒有模組的概念 es5實現模組的方式就是靠IIFE
例子 購物車

var Cart = (function(){    var product_list =[]    return {        addProduct:function(p){
            product_list.push(p)
        },        getProducts:function(){            return product_list
        },        getToltal:function(){            return product_list.reduce((total,p)=>{                return total+=parseInt(p.price)
            },0)
        }
    }
}())

這個例子我看的好舒服 程式碼要是這麼寫 那該多舒服啊

• 回撥函式 管理方法
  有非同步執行 肯定要用到回撥
  提取是一個程式設計師的基本技能
  回撥函式比較多的時候 做成模組

var handlerMoudle = (function(){    
    // do something 

    
    return {        h1:function(){},        h2:function(){}
    }
}())//主程式碼可以比較清晰的用回撥函式document.addEventListener('click',handlerMoudle.h1)

更高階的promise aysnc await 等等 有一定的代價 有一定的場景下才能用高階方法

實際開發的時候 多層回撥 這裡就牽扯到封裝能力和提取能力 這不是一天兩天能練成的 多看多寫 就okay

document.addEventListener('click',()=>{    //
    //
    $.get(...,function(){        //二次回撥
    })
})

現在有了export import 就更方便

• promise 狀態容器

function foo(){    return new Promise(function(fullfill,reject){
        setTimeout(function(){
            fullfill(1)
        },1000)
    })
}

foo()
.then(function(input){console.log(input); return ++input})
.then(function(input){    console.log(input)
})

• 模組間的通訊與解耦 PUB/SUB

var Cart = (function(pubsub){    var product_list =[]    return {        addProduct:function(p){
            product_list.push(p)
            pubsub.publish('new-product',this.getToltal)
            pubsub.publish('promotion-check',p)
        },        getProducts:function(){            return product_list
        },        getToltal:function(){            return product_list.reduce((total,p)=>{                return total+=parseInt(p.price)
            },0)
        }
    }
}(pubsub))var pubsub = (function(){    var events = {}    return {        subscribe:function(event,listner){
            events[event] = events[event] || []
            events[event].push(listner)-1
        },        publish:function(event,info){
            events[event].forEach(item => {
                item(info !=undefined ? info : {})
            });
        }
    }
})()var cartUI = (function(pubsub){
    pubsub.subscribe('new-product',function(total){        console.log('total',total);
    })
}(pubsub))

這三個模組 只會和pubsub打交道 不會相互引用 說實話 這樣的模組寫多了 我就瘋了 hold不住

• 同步非同步
  這裡要用到一個工具Loupe 可以清晰的檢視瀏覽器執行的棧和佇列

一些例子我還寫 測試了一下
核心就是把事件的優先順序 排好 這是程式設計師最該做的事情 因為棧是先進後出
執行順序大概就是同步先進站 非同步寫入記憶體 然後進佇列先進先出 等待 然後進棧 執行
說的有點籠統 其實就是這麼個道理 所以 要 搞清楚 "事件流"的概念
2018年8月16日17:06:43
先寫這麼多 後來在補充吧
核心的東西其實還有很多很多
畢竟一口吃不下大胖子~ 慢慢來 我會一點點補充的
爭取把這篇Blog寫的充實一點 乾貨多一點 也方便自己日後檢視

大家加油

作者：zz77zz
連結：