资讯专栏INFORMATION COLUMN

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

biaoxiaoduan / 3091人阅读

摘要:数据管理,包括数据逻辑数据请求数据存储等功能。负责处理的事件,并更新也负责监听的变化,并更新,控制其他的所有流程。上面代码就是一个最简单的类,构造函数创建出来的对象自身有属性,其原型上面有一个属性。

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


解读:
上图中,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)有两个属性:

construct :它的值是构造函数fn

__proto__: 它指向Object.prototype

解读:

fn()是构造函数

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

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

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: "

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(){} }

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

如何在 ES5 中如何用函数模拟一个类?(10分)

答一:

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

将公共属性放到原型对象里,并且将构造函数的prototype属性指向原型对象.

私有属性(自有属性)放到构造函数里去定义.

将实例化的对象的__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)
    })
}

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/108452.html

相关文章

  • [学习笔记] 小角度看JS原型

    摘要:虽然在脚本中没有标准的方式访问,但在每个对象上都支持一个属性,用于访问其构造函数的原型对象。说的是构造函数和原型对象之间的关系,说的是实例对象和原型对象之间的关系。 前言 在 segmentfault 上看到这样一道题目: var F = function(){}; Object.prototype.a = function(){}; Function.prototype.b = fu...

    Cciradih 评论0 收藏0
  • 由浅入深的前端面试题 和矫情的“浪漫主义”诗句

    摘要:好吧,我承认太标题党了,这篇文章是通过一道前端面试题引出的纯技术讨论。我先要矫情无比的从中外诗歌说起。这一星期陆陆续续面试了不少于个人,其中不乏工作履历突出的候选者。这样做的问题在于循环并没有要求枚举对象的修改与当前循环保持一致。 好吧,我承认太标题党了,这篇文章是通过一道前端面试题引出的纯技术讨论。我先要矫情无比的从中外诗歌说起。 传统的佛学经典里,被世人熟知的有这样一句话:一花一世...

    JerryZou 评论0 收藏0
  • 由浅入深的前端面试题 和矫情的“浪漫主义”诗句

    摘要:好吧,我承认太标题党了,这篇文章是通过一道前端面试题引出的纯技术讨论。我先要矫情无比的从中外诗歌说起。这一星期陆陆续续面试了不少于个人,其中不乏工作履历突出的候选者。这样做的问题在于循环并没有要求枚举对象的修改与当前循环保持一致。 好吧,我承认太标题党了,这篇文章是通过一道前端面试题引出的纯技术讨论。我先要矫情无比的从中外诗歌说起。 传统的佛学经典里,被世人熟知的有这样一句话:一花一世...

    lk20150415 评论0 收藏0
  • 刷《一年半经验,百度、有赞、阿里面试总结》·手记

    摘要:在掘金上看到了一位大佬发了一篇很详细的面试记录文章一年半经验,百度有赞阿里面试总结,为了查漏补缺,抽空就详细做了下。 在掘金上看到了一位大佬发了一篇很详细的面试记录文章-《一年半经验,百度、有赞、阿里面试总结》,为了查漏补缺,抽空就详细做了下。(估计只有我这么无聊了哈哈哈) 有给出的或者有些不完善的答案,也尽力给出/完善了(可能有错,大家自行辨别)。有些很困难的题目(例如实现Promi...

    codeKK 评论0 收藏0
  • 刷《一年半经验,百度、有赞、阿里面试总结》·手记

    摘要:在掘金上看到了一位大佬发了一篇很详细的面试记录文章一年半经验,百度有赞阿里面试总结,为了查漏补缺,抽空就详细做了下。 在掘金上看到了一位大佬发了一篇很详细的面试记录文章-《一年半经验,百度、有赞、阿里面试总结》,为了查漏补缺,抽空就详细做了下。(估计只有我这么无聊了哈哈哈) 有给出的或者有些不完善的答案,也尽力给出/完善了(可能有错,大家自行辨别)。有些很困难的题目(例如实现Promi...

    NusterCache 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<