JS高级基础知识考试

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

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

a：this是fn，他具有function._proto_属性
function._proto_指向function.prototype。
原型里有两个属性：{constructor:fn()}和_proto_()

2.JSON 和 JavaScript 是什么关系？JSON 和 JavaScript 的区别有哪些？

A：JSON是抄袭了JavaScript的一门语言

image.png

区别：1.JSON没有抄袭function undefined symbol
2.JSON的字符串首尾必须加双引号，比如”zxy“
3.JSON有6种数据类型null number "string" boolean array object
4.JSON没有原型

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

答：mvc是Model View Controller
view:是js模块对应在html中的部分，展现给用户看
model:可以从服务器获取数据，吧数据传给Controller .并且把Controller监听到的用户提交信息上传到服务器
Controller: 调用model的数据，用来更新view。监听用户在view的操作，获取用户提交的数据，传给model
2.代码

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

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

window.Controller = function(options){
    let 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);
            this.bindEvents.call(this)
        }
    };
    for(let key in options){
        if(key !== 'init'){
            object[key] = options[key]
        }
    }
    return object;
}

4.在 ES5 中如何用函数模拟一个类？

答：es5没有class关键字，只能用函数模拟类

function Animal(species) {
    this.species = species; //自有属性
}
    
Animal.prototype = {
    constructor: Animal,
    walk : function () {},  
    run: function () {},   
    eat: function () {},   
    sleep: function () {}  
};

let cat = new Animal('cat')
cat.specise === cat     //true
//并且cat对象的__proto__指向Animal.prototype，有里面的动作属性

5.用过 Promise 吗？举例说明。如果要你创建一个返回 Promise 对象的函数，你会怎么写？举例说明。

jQuery 的 AJAX 功能，返回的就是 Promise 对象。
$.ajax({url:'/xxx', method:'get'}).then(success1, error1).then(success2, error2)

自己创建的Promise对象

 function fn(){
     return new Promise((resolve, reject)=>{
         成功时调用 resolve(数据)
         失败时调用 reject(错误)
     })
 }
 fn().then(success, fail).then(success2, fail2)

//封装一个jQuery.ajax 满足Promise 规则
window.jQuery.ajax = function({url,method,body,headers}){
    return new Promise(function(resolve,reject){
        let request = new XMLHttpRequest()
        request.open(method,url) //配置request
        for(let key in headers){
            let value = headers[key]
            request.setRequestHeader(key,value)
        }
        request.onreadystatechange = ()=>{
            if(request.readyState === 4){
                if(request.status >= 200 && request.status < 300){
                    resolve.call(undefined,request.responseText)
                }else if(request.status >= 400){
                    reject.call(undefined,request)
                }
            }
        }
        request.send(body)
    })
}
//给按钮绑定点击事件
myButton.addEventListener('click',(e)=>{
    let promise = window.jQuery.ajax({
        url:'/xxx',
        method:'get',
        headers:{
            'content-type':'application/x-www-form-urlencoded',
            'frank':'18'
        }
    })

    promise.then(
        (text)=>{console.log(text)},
        (request)=>{console.log(request)}
    )
})

6.

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