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

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)有两个属性:

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

解读:

  1. fn()是构造函数
  2. 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: '<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)
    })
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏高爽的专栏

Flex回调函数

        首先要说明一下什么是回调函数?有什么作用?         回调函数就是一个通过函数指针调用的函数。如果你把函数的指针(地址)作为参数传递给另一...

21200
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

ES6、ES7、ES8学习指南

ES全称ECMAScript,ECMAScript是ECMA制定的标准化脚本语言。目前JavaScript使用的ECMAScript版本为ECMAScript-...

20840
来自专栏Golang语言社区

Golang语言-- 小技巧

.前言 Golang 开发过程中的一些小技巧在这里记录下。 2.内容 1)包的引用 经常看到Golang代码中出现 _ "controller/home" 类似...

36690
来自专栏领域驱动设计DDD实战进阶

13-TypeScript单例模式

在JavaScript中,要实现设计模式比较复杂。而在TypeScript中因为使用面向对象的思想编程,要实现设计模式的方式与后端语言C#、Java等非常类似。...

33650
来自专栏小灰灰

SPI框架实现之旅四:使用测试

SPI框架实现之旅四:使用测试 前面三篇主要是介绍如何设计的,如何实现的,这一篇,则主要集中在如何使用。实现得再好,如果不好用,也白搭 本篇介绍几个简单的使用...

21880
来自专栏搞前端的李蚊子

JS——判断一个对象是否为空

判断一个对象是否为空对象,本文给出三种判断方法: 1.最常见的思路,for...in...遍历属性,为真则为“非空数组”;否则为“空数组” ?  2.通过JSO...

49280
来自专栏地方网络工作室的专栏

GO语言学习笔记(一)一些基础常识以及实现生成随机密码小程序

GO语言学习笔记(一)一些基础常识以及实现生成随机密码小程序 之前用 nodejs 和 shell 分别实现过生成随机密码的小程序。最近,准备入门一下 gola...

22160
来自专栏Astropeak

为什么不需要为Python对象添加 getter 和 setter

13220
来自专栏架构师之路

perl语言十分钟入门【零基础可入】

零基础,perl语言,10分钟入门 1.Hello,World #!/usr/bin/perl -w print ("hello,world!\n"); #pr...

56170
来自专栏移动开发

java split()

java提供了split根据传入的分隔符,返回数组的方法.但是对于一些特殊字符我们要注意下,以防获取的不是我们想要的结果. 如想要根据”竖线”分隔:

14110

扫码关注云+社区

领取腾讯云代金券