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,原型链相关

functionfn(){console.log(this)}newfn()

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){returndocument.querySelector(xxx);}

window.Model =function(object){letresourceName = object.resourceName;return{init:function(){         },fetch:function(){         },save:function(object){        }    }}

window.Controller =function(options){varinit = options.init;letobject = {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(letkeyinoptions) {if(key !=='init'){            object[key] = options[key]        }    };returnobject;}

代码二:

varmodel = {data:null,    init(){}    fetch(){}    save(){}    update(){}    delete(){}}view = {    init() {}    template:'

hi}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 关键字，所以只能使用函数来模拟类。

functionHuman(name){this.name = name}Human.prototype.run =function(){}varperson =newHuman('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封装的

functionsuccess(responseText){console.log("成功")console.log(responseText);//responseTex}functionfail(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

functionxxx(){returnnewPromise((f1, f2) =>{        doSomething()        setTimeout(()=>{if(success){               f1();           }else{               f2();           }        },3000)    })}调用方法:xxx().then(success, fail)

或者:

functionasyncMethod(){returnnewPromise(function(resolve, reject){        setTimeout(function(){            成功则调用 resolve            失败则调用 reject        },3000)    })}

公众号：javafirst