摘要：數(shù)據(jù)管理，包括數(shù)據(jù)邏輯數(shù)據(jù)請(qǐng)求數(shù)據(jù)存儲(chǔ)等功能。負(fù)責(zé)處理的事件，并更新也負(fù)責(zé)監(jiān)聽(tīng)的變化，并更新，控制其他的所有流程。上面代碼就是一個(gè)最簡(jiǎn)單的類(lèi)，構(gòu)造函數(shù)創(chuàng)建出來(lái)的對(duì)象自身有屬性，其原型上面有一個(gè)屬性。

解讀:
上圖中,Object,Function,Array,Boolean都是構(gòu)造函數(shù)

第一個(gè)框:
object是實(shí)例對(duì)象,他的模板對(duì)象(原型對(duì)象)在Object()構(gòu)造函數(shù)里面.
構(gòu)造函數(shù).prototype指向的是原型對(duì)象,即模板對(duì)象.
由構(gòu)造函數(shù)構(gòu)造出來(lái)的實(shí)例對(duì)象.__proto__也指向的是原型對(duì)象,即模板對(duì)象.
所以true.

第二個(gè)框:
fn是一個(gè)實(shí)例函數(shù),是由用來(lái)構(gòu)造出函數(shù)的構(gòu)造函數(shù)造出來(lái)的.
所以fn.__proto__ === Function.prototype

任何構(gòu)造函數(shù).prototype都是一個(gè)對(duì)象.
因?yàn)?b>fn.__proto__ === Function.prototype
所以fn.__proto__.__proto__ === Object.prototype等價(jià)于
Function.prototype.__proto__ === Object.prototype
等價(jià)于
一個(gè)對(duì)象.__proto__ === Object.prototype
所以是true

第三個(gè)框同理.

第四個(gè)框比較難理解:
一個(gè)實(shí)例函數(shù)是由用來(lái)構(gòu)造出函數(shù)的構(gòu)造函數(shù)造出來(lái)的.

Object,Function,Array都是一個(gè)實(shí)例函數(shù),函數(shù)也是一種類(lèi)型,就像String是一種類(lèi)型,Number是一種類(lèi)型一樣,函數(shù)這個(gè)類(lèi)型里的實(shí)例函數(shù)由函數(shù)的構(gòu)造函數(shù)造出來(lái)!很難理解
所以實(shí)例函數(shù).__proto__===構(gòu)造函數(shù).prototype
實(shí)例函數(shù)的構(gòu)造函數(shù)就是Function

有點(diǎn)雞生蛋蛋生雞的感覺(jué).

第五個(gè)框同理

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

new fn() 會(huì)執(zhí)行 fn，并打印出 this，請(qǐng)問(wèn)這個(gè) this 有哪些屬性？這個(gè) this 的原型有哪些屬性？
答:
這個(gè)this就是new創(chuàng)建的新對(duì)象.
this(這個(gè)新對(duì)象)有__protot__屬性,它指向fn構(gòu)造函數(shù)的原型即fn.prototype
這個(gè)原型(即fn.prototype)有兩個(gè)屬性:

construct :它的值是構(gòu)造函數(shù)fn

__proto__: 它指向Object.prototype

解讀:

fn()是構(gòu)造函數(shù)

new fn()就是一個(gè)構(gòu)造函數(shù)new出來(lái)的新對(duì)象.

他的自有屬性為空,共有屬性為空,因?yàn)槎紱](méi)有設(shè)置
因?yàn)樗淖杂袑傩詾榭?所以他只有一個(gè)__proto__指向構(gòu)造函數(shù).prototype(即原型)了.
共有屬性為空,所以他的原型就是只有constructor指向構(gòu)造函數(shù)和__proto__指向Object.prototype(因?yàn)樵捅旧砭褪菍?duì)象類(lèi)型,所以指向?qū)ο蟮臉?gòu)造函數(shù))
例子:

JSON 和 JavaScript 是什么關(guān)系？
JSON 和 JavaScript 的區(qū)別有哪些？

關(guān)系：JSON 是一門(mén)抄襲/借鑒 JavaScript 的語(yǔ)言，同時(shí)也是一種數(shù)據(jù)交互格式，JSON 是 JavaScript 的子集（或者說(shuō) JSON 只抄襲了一部分 JavaScript 語(yǔ)法，而且沒(méi)有新增任何原創(chuàng)的語(yǔ)法）

區(qū)別：JSON 不支持函數(shù)、undefined、變量、引用、單引號(hào)字符串、對(duì)象的key不支持單引號(hào)也不支持不加引號(hào)、沒(méi)有內(nèi)置的 Date、Math、RegExp 等。
而 JavaScript 全都支持。

前端 MVC 是什么？（10分）
請(qǐng)用代碼大概說(shuō)明 MVC 三個(gè)對(duì)象分別有哪些重要屬性和方法。（10分）

答一:

MVC 是什么 MVC 是一種設(shè)計(jì)模式（或者軟件架構(gòu)），把系統(tǒng)分為三層：Model數(shù)據(jù)、View視圖和Controller控制器。
Model 數(shù)據(jù)管理，包括數(shù)據(jù)邏輯、數(shù)據(jù)請(qǐng)求、數(shù)據(jù)存儲(chǔ)等功能。前端 Model 主要負(fù)責(zé) AJAX 請(qǐng)求或者 LocalStorage 存儲(chǔ)
View 負(fù)責(zé)用戶界面，前端 View 主要負(fù)責(zé) HTML 渲染。 Controller 負(fù)責(zé)處理 View 的事件，并更新
Model；也負(fù)責(zé)監(jiān)聽(tīng) Model 的變化，并更新 View，Controller 控制其他的所有流程。

答二:
MVC就是把代碼分為三塊

V(view)只負(fù)責(zé)看得見(jiàn)的東西.
M(model)只負(fù)責(zé)跟數(shù)據(jù)相關(guān)的操作,不會(huì)出現(xiàn)DOM,不會(huì)出現(xiàn)任何的html/css操作.例如model里只會(huì)有初始化數(shù)據(jù)庫(kù),獲取數(shù)據(jù)方法fetch(),保存數(shù)據(jù)的方法save()
C(controller)只負(fù)責(zé)把這些view和model組合起來(lái),找到view,找到model,使用model完成數(shù)據(jù)修改業(yè)務(wù),并修改view的顯示
V:視圖
M:數(shù)據(jù)
C:控制器

MVC是一種代碼組織形式,不是任何一種框架,也不是任何一種技術(shù),只是組織代碼的思想,要做的就是V和M傳給C,C去統(tǒng)籌
在js里,MVC分別由三個(gè)對(duì)象去擔(dān)任三個(gè)職責(zé)

代碼一:

window.View = function(xxx){
    return document.querySelector(xxx);
}

window.Model = function(object){
    let resourceName = object.resourceName;
    return {
        init: function () { 
        },
        fetch: function () { 
        },
        save: function (object) {
        }
    }
}

window.Controller = function(options){
    var init = options.init;
    let 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();
        },
        bindevnets:function(){},
    };

    for (let key in options) {
        if(key !=="init"){
            object[key] = options[key]
        }
    };
    return object;
}

代碼二:

var model = {
    data: null,
    init(){}
    fetch(){}
    save(){}
    update(){}
    delete(){}
}
view = {
    init() {}
    template: "
hi
}
controller = {
    view: null,
    model: null,
    init(view, model){
        this.view = view
        this.model = model
        this.bindEvents()
    }
    render(){
        this.view.querySelector("name").innerText = this.model.data.name
    },
    bindEvents(){}
}

如何在 ES5 中如何用函數(shù)模擬一個(gè)類(lèi)？（10分）

答一:

使用原型對(duì)象,構(gòu)造函數(shù),new來(lái)模擬類(lèi).

將公共屬性放到原型對(duì)象里,并且將構(gòu)造函數(shù)的prototype屬性指向原型對(duì)象.

私有屬性(自有屬性)放到構(gòu)造函數(shù)里去定義.

將實(shí)例化的對(duì)象的__proto__指向原型對(duì)象.

這樣當(dāng)構(gòu)造函數(shù)創(chuàng)建一個(gè)實(shí)例化的對(duì)象的時(shí)候，就即擁有自己的私有變量和方法，也有公有的變量和方法了，實(shí)例化出來(lái)的對(duì)象的私有方法和變量修改都不會(huì)互相有影響，只有在修改公有的變量和方法的時(shí)候是對(duì)所有實(shí)例生效的

答二:
ES 5 沒(méi)有 class 關(guān)鍵字，所以只能使用函數(shù)來(lái)模擬類(lèi)。

function Human(name){
    this.name = name
}
Human.prototype.run = function(){}

var person = new Human("frank")

上面代碼就是一個(gè)最簡(jiǎn)單的類(lèi)，Human 構(gòu)造函數(shù)創(chuàng)建出來(lái)的對(duì)象自身有 name 屬性，其原型上面有一個(gè) run 屬性。

用過(guò) Promise 嗎？舉例說(shuō)明。
如果要你創(chuàng)建一個(gè)返回 Promise 對(duì)象的函數(shù)，你會(huì)怎么寫(xiě)？舉例說(shuō)明。

答:

答一:
用過(guò) Promise，比如 jQuery 或者 axios 的 AJAX 功能，都返回的是 Promise 對(duì)象。

$.ajax({url:"/xxx", method:"get"}).then(success1, error1).then(success2, error2)

答二:
用過(guò).例如使用jQuery的Ajax()發(fā)送請(qǐng)求,成功或失敗后的回調(diào)函數(shù),就是使用promise封裝的

function success(responseText){
    console.log("成功")
    console.log(responseText);//responseTex
}
function fail(request){
    console.log("失敗")
    console.log(request);
}
myButton.addEventListener("click",(e)=>{
    //使用ajax
    $.ajax({
        method:"post",
        url:"/xxx",
        data:"username=mtt&password=1",
        dataType:"json"http://預(yù)期服務(wù)器返回的數(shù)據(jù)類(lèi)型,如果不寫(xiě),就是響應(yīng)里設(shè)置的
    }
    ).then(success,fail)//$.ajax()返回一個(gè)promise
})

function xxx(){
    return new Promise((f1, f2) => {
        doSomething()
        setTimeout(()=>{
           if(success){
               f1();
           }else{
               f2();
           }
        },3000)
    })
}


調(diào)用方法:
xxx().then(success, fail)

或者:

function asyncMethod(){
    return new Promise(function (resolve, reject){
        setTimeout(function(){
            成功則調(diào)用 resolve
            失敗則調(diào)用 reject
        },3000)
    })
}

可以看看我的博客__使用Promise封裝Ajax