JS题目总结:原型链/new/json/MVC/Promise

JS题目总结:原型链/new/json/MVC/Promise

1原型链相关

P4oVZ8.png

解读: 上图中,Object,Function,Array,Boolean都是构造函数

第一个框: object是实例对象,他的模板对象(原型对象)在Object()构造函数里面. 构造函数.prototype指向的是原型对象,即模板对象. 由构造函数构造出来的实例对象.__proto__也指向的是原型对象,即模板对象. 所以true.

第二个框: fn是一个实例函数,是由用来构造出函数的构造函数造出来的. 所以fn.__proto__ === Function.prototype

任何构造函数.prototype都是一个对象. 因为fn.__proto__ === Function.prototype 所以fn.__proto__.__proto__ === Object.prototype等价于 Function.prototype.__proto__ === Object.prototype 等价于 一个对象.__proto__ === Object.prototype 所以是true

第三个框同理.

第四个框比较难理解: 一个实例函数是由用来构造出函数的构造函数造出来的.

Object,Function,Array都是一个实例函数,函数也是一种类型,就像String是一种类型,Number是一种类型一样,函数这个类型里的实例函数由函数的构造函数造出来!很难理解 所以实例函数.__proto__===构造函数.prototype 实例函数的构造函数就是Function

有点鸡生蛋蛋生鸡的感觉.

第五个框同理

2面向对象,new,原型链相关

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

new fn() 会执行 fn，并打印出 this，请问这个 this 有哪些属性？这个 this 的原型有哪些属性？ 答: 这个this就是new创建的新对象. this(这个新对象)有__protot__属性,它指向fn构造函数的原型即fn.prototype 这个原型(即fn.prototype)有两个属性:

1. construct :它的值是构造函数fn
2. __proto__: 它指向Object.prototype

解读:

P5Ctu8.png

1. fn()是构造函数
2. new fn()就是一个构造函数new出来的新对象.

他的自有属性为空,共有属性为空,因为都没有设置 因为他的自有属性为空,所以他只有一个__proto__指向构造函数.prototype(即原型)了. 共有属性为空,所以他的原型就是只有constructor指向构造函数和__proto__指向Object.prototype(因为原型本身就是对象类型,所以指向对象的构造函数) 例子:

P5U2pd.png

P5aqUO.png

3 json

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

关系：JSON 是一门抄袭/借鉴 JavaScript 的语言，同时也是一种数据交互格式，JSON 是 JavaScript 的子集（或者说 JSON 只抄袭了一部分 JavaScript 语法，而且没有新增任何原创的语法）

区别：JSON 不支持函数、undefined、变量、引用、单引号字符串、对象的key不支持单引号也不支持不加引号、没有内置的 Date、Math、RegExp 等。 而 JavaScript 全都支持。

4 MVC

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

答一:

MVC 是什么 MVC 是一种设计模式（或者软件架构），把系统分为三层：Model数据、View视图和Controller控制器。 Model 数据管理，包括数据逻辑、数据请求、数据存储等功能。前端 Model 主要负责 AJAX 请求或者 LocalStorage 存储 View 负责用户界面，前端 View 主要负责 HTML 渲染。 Controller 负责处理 View 的事件，并更新 Model；也负责监听 Model 的变化，并更新 View，Controller 控制其他的所有流程。

答二: MVC就是把代码分为三块

V(view)只负责看得见的东西. M(model)只负责跟数据相关的操作,不会出现DOM,不会出现任何的html/css操作.例如model里只会有初始化数据库,获取数据方法fetch(),保存数据的方法save() C(controller)只负责把这些view和model组合起来,找到view,找到model,使用model完成数据修改业务,并修改view的显示 V:视图 M:数据 C:控制器

MVC是一种代码组织形式,不是任何一种框架,也不是任何一种技术,只是组织代码的思想,要做的就是V和M传给C,C去统筹 在js里,MVC分别由三个对象去担任三个职责

代码一:

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: '<h1>hi</h1'>
}
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(){}
}

5 ES5类,原型链,构造函数,new

如何在 ES5 中如何用函数模拟一个类？（10分）

答一:

使用原型对象,构造函数,new来模拟类.

1. 将公共属性放到原型对象里,并且将构造函数的prototype属性指向原型对象.
2. 私有属性(自有属性)放到构造函数里去定义.
3. 将实例化的对象的__proto__指向原型对象.

这样当构造函数创建一个实例化的对象的时候，就即拥有自己的私有变量和方法，也有公有的变量和方法了，实例化出来的对象的私有方法和变量修改都不会互相有影响，只有在修改公有的变量和方法的时候是对所有实例生效的

答二: ES 5 没有 class 关键字，所以只能使用函数来模拟类。

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

var person = new Human('frank')

上面代码就是一个最简单的类，Human 构造函数创建出来的对象自身有 name 属性，其原型上面有一个 run 属性。

Promise

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

答:

用过Promise

答一: 用过 Promise，比如 jQuery 或者 axios 的 AJAX 功能，都返回的是 Promise 对象。

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

答二: 用过.例如使用jQuery的Ajax()发送请求,成功或失败后的回调函数,就是使用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'//预期服务器返回的数据类型,如果不写,就是响应里设置的
    }
    ).then(success,fail)//$.ajax()返回一个promise
})

写Promise

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


调用方法:
xxx().then(success, fail)

或者:

function asyncMethod(){
    return new Promise(function (resolve, reject){
        setTimeout(function(){
            成功则调用 resolve
            失败则调用 reject
        },3000)
    })
}