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
)有两个属性:
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: '<h1>hi</h1'>
}
controller = {view: null,model: null,init(view, model){this.view = viewthis.model = modelthis.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
JS题目总结:原型链/new/json/MVC/Promise相关推荐
- [js] js怎样避免原型链上的对象共享?
[js] js怎样避免原型链上的对象共享? 组合继承 优势 公有的写在原型 私有的卸载构造函数 可以向父类传递参数 劣势 需要手动绑定constructor 封装性一般 重复调用父类性能损耗
- 【JS继承】JS继承之原型链继承
自我介绍:大家好,我是吉帅振的网络日志:微信公众号:吉帅振的网络日志:前端开发工程师,工作4年,去过上海.北京,经历创业公司,进过大厂,现在郑州敲代码. JS继承专栏 1[JS继承]什么是JS继承? ...
- 《js中原型和原型链的深入理解》的笔记
前言:在微信公众号前端大全上看过<js中原型和原型链的深入理解>,个人认为这是我看过的js原型链的文章中,在思维结构上理解最清楚的一个文章了,本着温故而知新,有害怕找不到这个文章,我就把文 ...
- JS数据类型 构造函数 原型链
js数据类型 基本数据类型:string undefined null boolean number 引用数据类型 Object array function 二者的区别 基本数据类 ...
- JS三座大山之原型链
在JS中原型链的概念刚开始可能一直迷惑着大多数人,我也一样,不过花点时间仔细的梳理梳理,还是很容易理解的.本文就着重介绍一下原型链,如有不对之处,欢迎指正,共同探讨,共同进步. 在面试时,面试官可能会 ...
- js构造函数的原型链
年初前端面试,总会遇到面试官询问js的原型链问题,借用一张图片能帮助我们去复习这个问题: 1.每个构造函数都有一个prototype的原型对象,他的作用是为了共享构造方法,节省内存空间. 2.查找的机 ...
- 前端开发:JS中原型和原型链的介绍
前言 在前端开发过程中,涉及到JS原理相关的内容也就是常用的几大模块,不仅常用而且很重要,但是涉及到原理的话会有点难懂,尤其是对JS接触不太久的开发者来讲.本篇博文就来分享一下关于JS的原型和原型链相 ...
- JS中的原型链(超清晰理解)
什么是原型链 原型链,所有的原型构成了一个链条,这个链条我们称之为原型链(prototype chain). 原型链的案例 如果我们执行下面这段代码,因为没有定义address这个属性,程序结果理所当 ...
- 记录--JS精粹,原型链继承和构造函数继承的 “毛病”
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 先从面向对象讲起,本瓜认为:面向对象编程,它的最大能力就是:复用! 咱常说,面向对象三大特点,封装.继承.多态. 这三个特点,以" ...
最新文章
- 《专家系统(开发)--表达式检测--与表达式模板一起使用》
- ASP.NET使用log4Net日志组件教程(按日期与按日志大小切割)
- python3.70 wxpy_python3.5中的wxpydeprectionwarning
- 如何快速打通 Docker 镜像发布流程?
- 【转载】在windows上部署使用Redis
- 文献阅读 Linear Regression for Face Recognition
- [深度学习] fast-reid入门教程
- 从雅虎到阿里巴巴-----一个程序员的心路历程__雅虎是一个好公司
- autoconfig
- cortex-M3/M4 指令集
- C语言揭秘二战德军的顶级加解密技术——恩格玛机!
- 音标对照表—kk,88
- cubieboard2 android,在cubieboard2双卡版上从零构建Android4.2.2系统
- 怎么将图片压缩到50k以内?教你一招将图片缩小的方法
- 众所周知的广告屏蔽神器uBlock/Adguard,为啥你装上后和没装一样?
- 关于AVCC与ADCC不一致的问题
- 热门话题“30岁还没结婚你会考虑将就么?”数据告诉你,网友们都如何做出抉择
- android id 重名_android 中不同的Xml中id可以重名吗?
- 双CPU与单CPU有什么区别,有什么优势?
- 敏捷团队建设︱如何组建和管理高效的自组织团队
热门文章
- 产品策略研究期的数据分析与挖掘
- Centos6.4安装ipython
- 推荐几款vs2005的插件
- fox pro删除单条数据_删库之后不要着急跑路,教你神不知鬼不觉找回数据
- js等待5秒后执行_Python+selenium自动化之等待
- ubuntu创建vim php文件,在ubuntu 上配置vim的php开发环境
- 人员梯度培养_关键人才的梯队培养
- 认识AndEngine选自Android 2D游戏引擎AndEngine快速入门教程
- Wireshark数据抓包分析(网络协议篇)第1章网络协议抓包概述
- python的算术运算符不包括_没有算术运算符的A + B,Python与C ++