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

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

1原型链相干

《JS问题总结:原型链/new/json/MVC/Promise》
解读:
上图中,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

解读:
《JS问题总结:原型链/new/json/MVC/Promise》

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

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

《JS问题总结:原型链/new/json/MVC/Promise》

《JS问题总结:原型链/new/json/MVC/Promise》

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

能够看看我的博客__运用Promise封装Ajax

    原文作者:马涛涛
    原文地址: https://segmentfault.com/a/1190000016107041
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞