整理JavaScript高級基礎知識

整理JavaScript高級基礎知識

由於空餘時間不少..因此博客更新頻率得相對頻繁些..

---

原型以及原型鏈

考察原型以及原型鏈：

var object = {}
object.__proto__ ===  Object.prototype  // 爲 true

var fn = function(){}
fn.__proto__ === Function.prototype  // 爲 true
fn.__proto__.__proto__ === Object.prototype // 爲 true

var array = []
array.__proto__ === Array.prototype // 爲 true
array.__proto__.__proto__ === Object.prototype  // 爲 true

Function.__proto__ === Function.prototype // 爲 true
Array.__proto__ === Function.prototype // 爲 true
Object.__proto__ === Function.prototype // 爲 true

true.__proto__ === Boolean.prototype // 爲 true

Function.prototype.__proto__ === Object.prototype // 爲 true

---

this

考察 this：

function fn(){
    console.log(this)
}
new fn()

new fn() 會執行 fn，並打印出 this，請問這個 this 有哪些屬性？這個 this 的原型有哪些屬性？

this 自身沒有屬性（只有一個隱藏的 proto 屬性）
this 的原型是 fn.prototype，只有一個屬性 constructor，且 constructor === fn（另外還有一個隱藏屬性 proto，指向 Object.prototype）

---

JSON

考察JSON

JSON 和 JavaScript 是什麼關係？
JSON 和 JavaScript 的區別有哪些？

他們的關係：

JSON 是在某一些方面借鑑了JavaScript的一種輕量級的數據交換格式，是一門新語言。

除了 JavaScript 基本數據類型中的 undefined 、symbol，複雜類型中的 function，其餘的數據類型在 JSON 中都有。

他們的區別有：

JSON 中的字符串必須用雙引號括起，JavaScript 中字符串單雙引號均可以；

JSON 中沒有變量，因此不能引用，JavaScript中有變量，能夠引用；

JSON 中沒有原型鏈，JavaScript有原型鏈；

---

MVC

前端 MVC 是什麼？

請用代碼大概說明 MVC 三個對象分別有哪些重要屬性和方法。

前端MVC是什麼

MVC 是一種代碼組織形式，他把代碼依據功能的不一樣劃分紅三個部分，分別是Model、Controller、View。

View表明視圖

Model表明對數據的操做(存儲和獲取等)

Controller表明了View和Model二者之間的交互邏輯以及其餘。

他們之間的相互做用是這樣的：

用戶對View視圖作出了操做，監聽着View視圖的controller接收到了View的變化通知，而後按需求去調用Model，Model向server發出請求；server返回響應給Model，Model返回數據給Controller，Controller根據接收到的數據更新View視圖。

代碼示例

View 主要接受一個選擇器，獲取須要監聽的區域，而後返回一個對象給 controller 操做、更新：

window.View = function(selector){
    return this.document.querySelector(selector)
}

Model 主要負責數據庫的初始化、數據的存儲和獲取，因此他的重要屬性應該要要有 init 、fetch 、save:

window.Model = function(options){
    //經過傳入參數獲取須要操做數據庫
    var resourceName = options.resourceName
    return {
        //初始化數據庫
        init:function(){},

        //獲取數據：
        fetch:function(){},

        //保存數據
        save:function(){}
        }
}

Controller 負責監聽和更新 view，調用 model ，接受操做 model 返回的數據，因此他要有一個 init 接收傳入的 view 和 model ，負責 model 的調用 和 執行綁定事件函數 bindEvents()：

window.Controller = function(options){

    var init = options.init

    var object = {
        view:null,
        model:null,
        init:function(view,model){
            this.view = view
            this.model = model
            this.model.init()
            init.call(this,view,model)
            this.bindEvents.call(this)
        },
    }

    //經過遍歷傳入的參數  加入函數到object 中，處理其它事務
    for(let key in options){
        if(key !== "init"){
            object[key]=options[key]
        }
    }
    return object
}

---

在 ES5 中如何用函數模擬一個類？

考察面向對象編程：

function Human(id,hp){
    this.id = id
    this.hp = hp
}
Human.prototype = {
    constructor:Human,
    walk:function(){ /**/ } ,
    species:function(){ /**/ } ,
    useTools:function(){ /**/ } ,
}

---

Promise

考察 Promise 的用法：

用過 Promise 嗎？舉例說明。

有，在使用 leanCloud 數據庫的時候，我經過調用一個 leanCloud 的 API ：fetch 函數獲取數據庫的數據，這個函數被調用後，返回一個 Promise 對象；這個 Promise 對象有一個 then 屬性，他接受兩個回調函數做爲參數，一旦數據獲取成功(resolve)，則把數據傳入 then 後的第一個函數，對數據進行相對操做；若是數據獲取失敗(reject)，則執行第二個函數。

若是要你建立一個返回 Promise 對象的函數，你會怎麼寫？舉例說明。

function promise(){
    return new Promise((resolve,reject) => {
        console.log('this\'s Promise begin')
        resolve(10)
    })
}
promise().then((value)=>{
    console.log(value)
    console.log('that\'s Promise end')
})