JS 高级基础知识（一）

基础不能够在基础的 JS 高级知识，反正有时候我觉得有点难。好吧，我就是废话了，想凑齐一行字，内容不多，随便看看吧。

一、new 实例化

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

以上，new fn() 会执行 fn，并打印出 this，请问这个 this 有哪些属性？这个 this 的原型有哪些属性？

在执行 new fn() 的时候并没有传入任何参数，所以这个实例化 fn() 没有任何自有属性
function fn() 并没有定义任何共有属性，所以默认 `fn.prototype = {constructor:’fn’}
new fn() 执行后，其结构为：

{
  __prototype__:{
    constructor:'fn',
    __prototype__:{
      ......( 因为 fn 本身就是对象，所以会默认继承对象的原型 )
    }
  }
}

关于打印的 this ，就是 new fn() 本身，new fn().__prototype === Function.prototype ，Function.prototype.__prototype__ === Object.prototype 。 this 无自有属性，this 的原型就是 new fn().__prototype__

二、JSON 和 JavaScript 是什么关系？JSON 和 JavaScript 的区别有哪些？

关系： JSON 是一门抄袭/借鉴 JavaScript 的语言，同时也是一种数据交互格式，JSON 是 JavaScript 的子集（或者说 JSON 只抄袭了一部分 JavaScript 语法，而且没有新增任何原创的语法
区别：JSON 不支持函数、undefined、变量、引用、单引号字符串、对象的 key 不支持单引号也不支持不加引号、没有内置的 Date 、Math 、RegExp 等。而 JavaScript 全都支持。

三、前端 MVC 是什么？请用代码大概说明 MVC 三个对象分别有哪些重要属性和方法。

前端 MVC 是一种设计模式，他将前端代码分为三个层次：模型层( M : Model，主要用于处理数据的增删改查操作 ) 、视图层( V : View ，主要用于展示数据) 、控制器( C : Controller ，主要用于与用户交互 )。当用户与前端页面产生交互时，控制器中绑定的事件被触发，被触发的事件通过模型层去请求后端数据，拿到后端数据处理结果后，将得到的数据通过视图层展示给用户。

MVC 三个对象的代码：

window.Model = function(options){
    let name = options.name;
    return {
        init:function(){},
        fetch:function(){},
        save:function(){},
        del:function(){},
        edit:function(){}
    }
}

关于 Model 层，主要是用来处理数据的，通过传参 options 将需要处理的表名传递进来，调用此方法后，会返回一个对象，对象可包括的基础方法有 init() ：初始化、fetch() 获取数据、save() 保存数据、del() 删除数据、edit() 修改数据，Model 层可根据具体业务的不同可对其属性方法进行定义。

1
2
3

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

关于 View 层，主要是用于获取 DOM 节点。

window.Controller = function(options){
    let init = options.init;
   this.bindEvents = options.bindEvents;
   let obj = {
        view : null,
        model : null,
        init : function(view,model){
            this.view = veiw;
            this.model = model || {};
            if(model){
                this.model.init();
            }
            init.call(view,model);
            this. bindEvents();
        }
   }
   for(var key in options){
       if(key != 'init' || key != bindEvents){
           obj[key] = options[key];
       }
   }
    return obj;
}

关于 Controller 层，包含属性 view 、model 、init() 和 bindEvents()。在 init() 中需要传入 model 和 view ，默认会将传参直接赋值到当前对象的 model 和 view 属性上，并执行事件绑定。由于不同控制器在初始化时可能还需要执行其他事件以及 bindEvents() 不同，所以，在实例化时需要通过 optios 将其自定义的初始化事件、绑定事件、其他事件传入，并赋值到对象 obj 上，最终返回 obj 。在 init() 中，对 model 参数做了一个非空验证，有的 MVC 结构代码中是没有 Model 层的，所以对于没有 Model 层的控制器，直接跳过对 this.model 和 this.model.init() 的执行。

四、介绍下 Promise 并创建一个 Promise 实例

最近的项目使用 Promise 封装了一下 HTTP 请求：

window.zwhttp = function({url,data}){
    return new Promise(resolve,reject){
        let http = new XMLHttpRequest();
        http.onreadystatechange = function(){
            if(http.readyState === 4){
                if(http.status >=200 && http.status < 300){
                    resolve.call(this,JSON.parse(http.responseText))
                }else if(http.status >=400){
                    reject.call(this,http)
                }
            }
        }
        http.open('post',url);
        request.send(JSON.stringify(data));
    }
}

以上，定义了一个全局的 zwhttp 方法，并传入参数 url 和 data ，方法返回一个 Promise 对象，但 Promise 中的 http 请求成功后会执行 resolve 方法，请求失败的话会执行 reject 方法。

使用方法如下：

zwhttp('/api',{a:1,b:2})
.then(
    (res) => {
        //请求成功执行代码
    },
    (res) => {
        //请求失败执行的代码
    }
))

Promise 可以减少地狱回调出现的概率，规范化代码，能够增加代码的可维护行和可读性。

五、原型链的问题

var object = {}
object.__proto__ ===  Object.prototype  

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

var array = []
array.__proto__ === Array.prototype 
array.__proto__.__proto__ === Object.prototype 

Function.__proto__ ===  Function.prototype  
Array.__proto__ === Function.prototype 
Object.__proto__ === Function.prototype 

true.__proto__ === Boolean.prototype 

Function.prototype.__proto__ === Object.prototype