原型与原型链

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var object = {}
object.__proto__ === Object.prototype // 为 true

var fn = function(){}
fn.__proto__ === Function.prototype // 为 true
fn.__proto__.__proto__ === Object.prototype // 为 true

var array = []
array.__proto__ === Array.prototype // 为 true
array.__proto__.__proto__ === Object.prototype // 为 true

Function.__proto__ === Function.prototype // 为 true
Array.__proto__ === Function.prototype // 为 true
Object.__proto__ === Function.prototype // 为 true

true.__proto__ === Boolean.prototype // 为 true

Function.prototype.__proto__ === Object.prototype // 为 true

面向对象new与this

1
2
3
4
function fn(){
console.log(this)
}
new fn()

new fn() 会执行 fn,并打印出 this,请问这个 this 有哪些属性?这个 this 的原型有哪些属性?

  • this 自身没有属性(只有一个隐藏的 proto 属性)
  • this 的原型是 fn.prototype,只有一个属性 constructor,且 constructor === fn(另外还有一个隐藏属性 __proto__,指向 Object.prototype

JSON与JavaScript

JSON 和 JavaScript 是什么关系?

关系:JSON 是一门抄袭/借鉴 JavaScript 的语言,同时也是一种数据交互格式,JSON 是 JavaScript 的子集(或者说 JSON 只抄袭了一部分 JavaScript 语法,而且没有新增任何原创的语法)

JSON 和 JavaScript 的区别有哪些?

区别:JSON 不支持函数、undefined、变量、引用、单引号字符串、对象的key不支持单引号也不支持不加引号、没有内置的 Date、Math、RegExp 等。
而 JavaScript 全都支持。

前端MVC

前端 MVC 是什么?

  • MVC 是一种设计模式(或者软件架构),把系统分为三层:Model数据、View视图和Controller控制器。
  • Model 数据管理,包括数据逻辑、数据请求、数据存储等功能。前端 Model 主要负责 AJAX 请求或者 LocalStorage 存储
  • View 负责用户界面,前端 View 主要负责 HTML 渲染。
  • Controller 负责处理 View 的事件,并更新 Model;也负责监听 Model 的变化,并更新 View,Controller 控制其他的所有流程。

MVC 三个对象分别有哪些重要属性和方法

  • 代码1-将MVC分别存为3个基础文件将共有的属性放进去Model.js,View.js,Controller.js
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    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)
    options.bindEvents.call(this)
    }
    }
    for(let key in options){
    if(key !== 'init'){
    object[key] = options[key]
    }
    }
    return object
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    window.Model = function(options) {
    let resourceName = options.resourceName
    return{
    init: function () {
    var APP_ID = '';
    var APP_KEY = '';
    AV.init({
    appId: APP_ID,
    appKey: APP_KEY
    })
    },
    //获取数据
    fetch: function () {
    var query = new AV.Query(resourceName);
    return query.find() //Promise对象
    },
    //创建数据
    save: function (object) {
    var X = AV.Object.extend(resourceName);
    var x = new X();
    return x.save(object)
    }
    }
    }
    1
    2
    3
    window.View = function(selector){
    return document.querySelector(selector)
    }
  • 代码2-每个模块自己独有的MVC
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    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(){}
    }

在 ES5 中如何用函数模拟一个类

ES 5 没有 class 关键字,所以只能使用函数来模拟类。

1
2
3
4
5
6
function Human(name){
this.name = name
}
Human.prototype.run = function(){}

var person = new Human('qq')

Promise相关

jQuery 或者 axios 的 AJAX 功能,都返回的是 Promise 对象。

1
$.ajax({url:'/xxx', method:'get'}).then(success1, error1).then(success2, error2)

如果我自己创建 Promise 对象,我会这么写

1
2
3
4
5
6
7
8
function asyncMethod(){
return new Promise(function (resolve, reject){
setTimeout(function(){
成功则调用 resolve
失败则调用 reject
},3000)
})
}