JavaScript面试

最新推荐文章于 2025-05-12 16:12:31 发布

原创最新推荐文章于 2025-05-12 16:12:31 发布 · 544 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript面试 #virtual dom #es6和Vue #class和普通构造函数 #mvvm

前端面试专栏收录该内容

18 篇文章

订阅专栏

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()