JavaScript面试

1.ES6语法

语法:import export(注意有无default)

环境:babel编译ES6语法,模块化可用webpack和rollup

扩展:阐述自己对模块化标准的统一的期待(AMD,CMD标准)

2.class和普通构造函数的区别

class在语法上更加贴合面向对象的写法

class实现继承更加易读,易理解,也更易于写java等后端语言的人使用

class本质上还是语法糖,使用prototype检验

语法糖:typeof + classname  (function) 和JS中的构造函数一致,无类的概念

    显式原型:classname.prototype.constructor === classname  //true

    隐式原型:(classname的实例).__proto__ === classname.prototype  //true


3.promise步骤

new  promise实例

new  promise时要传入函数参数,有resolve和reject两个参数

成功时执行resolve() ,失败时执行reject()

用then监听结果,catch执行出错时的操作

4.ES6其他常用的功能

let/const  let可以被重新赋值,const定义常量,不能重新赋值

多行字符串/模板变量  用反引号及$符号 例如

var item = 'zhangsan'
var message = `我叫${item}`
console.log(message) //我叫zhangsan

箭头函数 (改变了this指向window) ()=> {}

函数默认参数

//无默认参数
function a(age,name){
    if(!age){
        age=6
    }
}
//有默认参数
function a(age = 6,name){
    
}

块级作用域 (for循环 来看for里的变量能否被外部变量访问到)

for(var i = 0;i < n; i ++){
  //
}
console.log(i) //能访问到

for(let i = 0;i < n; i ++){
  //
}
console.log(i) //不能访问到

解构赋值 拆解对象的值

var arr={a:5,b:6}
var {a,b}=arr //a=5,b=6

//用扩展符
var arr = [5,6,7,8,9]
console.log(...arr) //5,6,7,8,9

5.单线程与异步的关系

单线程:同一时间只能做一件事情(为了避免DOM的渲染的冲突),两段JS不能同时执行

解决方案:异步

实现方式:event-loop(js实现异步的具体解决方案)

event-loop:同步代码直接执行,异步函数先放在异步队列中,待同步函数执行完成后,轮循执行异步队列的函数

console.log(111)
setTimeout(function(){
   conosole.log(222)
})
setTimeout(function(){
   conosole.log(444)
},300)
console.log(333)

/*
  先执行同步代码:(异步代码加入异步队列中)
     打印出111  333
  然后轮循执行异步队列中代码:
     打印出222  444
*/

6.jQuery1.5 Deferred

由Deferred演化成Promise对象,使用开放封闭原则(扩展开放,修改封闭)

Deferred有resolve(),reject(),then(),done(),fail()方法

Promise只有then(),catch()

7.Promise

捕获异常:err和reject两者都要考虑

多个串联:链式执行(第一个执行完后需要返回Promise对象)

Promise.all 接收一个promise对象的数组

Promise.race 接收一个包含多个promise对象的数组,数组中有一个加载完成了就会执行

状态变化:初始状态 pending -> 成功:fulfilled 或者 失败rejected

只能是:pending ->fulfilled 或者 pending -> rejected 状态不可逆

Promise实例必须实现then方法

8.async/await

使用了promise,并没有和promise冲突,完全是同步的写法,没有回调函数,但改变不了JS单线程、异步的本质

function loadImg(src){
    const promise = new Promise(function(resolve, reject) {
          var img = document.createElement('img')
          img.onload = function(){
              resolve(img)
          }
          img.onerr = function(){
              reject()
          }
          img.src = src
     })
     return promise
}
const load = async function(){
    const result1 = await loadImg(src1)
    conosole.log(result1)

    const result2 = await loadImg(src2)
    console.log(result2)
}
load()

9.当前异步解决方案

Promise 

async/await

jQuery Deferred

10.virtual dom

用JS模拟DOM结构,DOM变化的对比放在JS层做,以提高重绘的性能

DOM操作昂贵,JS运行效率高,要减少DOM操作

使用:snabbdom的使用

核心API:h函数 h('标签名',{属性},[子元素]) 或者 h('标签名',{属性},'')

patch(container,vnode) 或者 patch(vnode,newvnode)

var container = document.getElementById('container')
var vnode = h('div#container.two.classes',{on:{click:someFn}},[h('span',{style:{fontSize:'20px'}},'this is block')])
patch(container, vnode)
var newvnode = h('div#container.two.classes',{on:{click:handleFn}},[h('span',{style:{fontSize:'30px'}},'this is text')])
patch(vnode, newvnode)

11.MVVM中JQuery和框架Vue的区别

视图与数据的分离,解耦(开放封闭原则)

以数据驱动视图,只关心数据,DOM操作被封装

12.MVVM的理解

MVC:model  view  controller

(数据模型 -> 视图 ->控制器 ->数据模型)


或者(控制器 -> 数据模型->视图)


MVVM:model  view viewmodel(视图与数据之间的桥:事件绑定,数据绑定)



13.Vue三要素

响应式:修改data属性后,Vue立刻监听到

响应式核心:用Object.defineProperty,将data的属性代理到vm上

var obj = {}
var name = 'zhangsan'
Object.defineProperty(obj, "name", {
    get:function() {
        return name
    },
    set: function(newValue) {
        name = newValue
    }
})
模板引擎:

本质:字符串;有逻辑,v-if,v-for等,可以嵌入JS变量,必须用JS才能实现,转换成html渲染页面,模板最终转换成JS函数(render函数:with方法)

var obj = {
  name: 'zhangsan',
  age:20,
  getAddress: function() {
     console.log(111)
  }
}

function fn(){
   alert(obj.name)
   alert(obj.age)
   alert(obj.getAddress)
}

fn()
var obj = {
  name: 'zhangsan',
  age: 20,
  getAddress: function() {
     console.log(111)
  }
}

function fn() {
   with(obj) {
      alert(name)
      alert(age)
      alert(getAddress)
   }
}

fn()
渲染

14.Vue的流程

解析模板成render函数:

    with的使用,模板中所有信息都被render函数包含

    模板中用到的data中的属性,都变成JS变量,模板中的v-model,v-for,v-on都变成JS逻辑,render函数返回vnode

响应式开始监听:

    Object.defineProperty将data的属性代理到VM上 ,使用get监听是为了防止重复渲染

首次渲染,显示页面,且绑定依赖

data属性变化,触发re-render

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值