js面试题

JavaScript016

js面试题,第1张

1.eventLoop

2.setTimeout 误差原因

3.深浅拷贝

4.跨域原因及解决方案

5.css放在头部，js放在尾部

6.css触发bfc

7.webpack plugin和loader区别

8.前端优化

9.协商缓存

10.长列表优化

11.webview交互

12.vue响应式原理

13.原型

14.算法题：数组中有n个元素，排列

EventLoop是计算机系统的运行机制，js就是运行这个机制，因为js是单线程语言，所以一旦遇到一个耗时很长的任务就会卡住，js为了解决这个问题就有了EventLoop

Event Loop是一个程序结构，用于等待和发送消息和事件。

就是在程序中有了两个线程，一个负责应用本身，主线程，另一个负责主线程和其它进程，称为EventLoop

1、js是单线程语言

基本数据类型存放在栈中的简单数据段

引用数据类型存放在堆中的对象

因为定时器是宏任务，如果执行栈的时间大于定时器花费的时间，那么定时器的回调在 宏任务(macrotask) 里，来不及去调用，所有这个时间会有误差。所以就会有误差

宏任务是宿主发起的比如script,setTimeout

css放在头部是因为页面加载html生成dom树的时候就可以同时对dom树进行渲染，防止闪跳，白屏

js放在尾部是因为js会修改dom树，需要一个稳定的dom树

BFC是css的一个布局概念，块级格式化上下文

浮动float不为none的时候

定位为position:absolute和fixed的

display的时候

overflow不为visible

解决浮动父元素坍塌问题

解决自适应布局的问题

解决外边距垂直方向重合问题

loader是文件加载器，运行在nodejs中，并对文件进行打包，压缩转换

plugin是插件，用于拓展webpack的功能

浅拷贝有两种定于，第一种是赋值，第二种是拷贝对象的第一层属性，深层还是一样的

深拷贝是指将对象拷贝一份，无论如何修改都不会改变原有的

响应式原理就是当数据发生改变的时候视图也会跟着更新

VUE是利用了Object.defineProperty的方法里面的setter 与getter方法的观察者模式来实现。

知识点：

面试题(一)：

面试题(二)：

第一种：方法调用

第二种：函数调用，里面的this指向的是window

第三种：构造函数调用：this指向调用它的对象

第四种：上下文调用模式，this指向谁？指向的是传入的对象

let var const 函数作用域 {}

1、在函数里面创建一个对象obj

2、将函数里面的this指向创建的那个对象obj

3、返回这个obj对象

闭包的概念：

闭包的使用场景：

闭包的问题：让变量得不到释放，增加内存使用率

给DOM 添加点击事件：

区别：onclick 会覆盖相同的事件，addEventListener会逐一的触发

DOM 事件三要素: 事件源， 事件类型， 事件处理程序

事件流程： 冒泡，捕获

ES5的继承

1、构造函数实现继承

2、借助原型是实现继承

3、组合方式实现继承

ES6的继承

深入学习可参考： https://juejin.im/post/5daeefc8e51d4524f007fb15?utm_source=gold_browser_extension#heading-22

对象是属性和方法的集合，面向对象的三大特性是封装，继承，多态

常见的有

对象的属性可以通过 . 或者[]来访问，他们有以下区别:

call，apply， bind方法都可以改变函数的this指向

每一个构造函数都有一个prototype属性，这个属性称之为函数的显示原型，

构造函数实例化后或者对象都有一个 __proto__ 属性，称之为对象的隐式原型，后续原型链就是通过proto查找属性的。

当我们访问对象的某个属性时，会先从当前对象中查找，如果没有找到的则继续去对象的proto隐士原型中去查找，，如果还没找到则继续向上级对象的原型中查找，直到找到顶层Object对象，如果没有找到返回undefined，这种通过对象的 __proto__ 隐式原型查找属性的链条关系就称之为原型链。

set通过new实例化常用的方法有:

map通过new Map创建一个对象：

.stop 阻止事件冒泡

.capture 设置事件捕获

.prevent 阻止默认事件

.self 之间作用在本身触发

.once 事件只触发一次

.navtive 组件触发的是原生的js事件

键盘修饰符操作

.enter, .space, .....等

.number 修饰符可以将 输入的值转化为Number类型

.trim 修饰符会自动过滤掉输入的首尾空格

.lazy 把v-model改为失去焦点触发

创建阶段

M 数据模型，负责逻辑

V 视图 负责页面渲染

Vmodel底层操作，负责视图和数据的交互，当数据发生变化通知视图修改

number数字，string字符串，boolean布尔值，Array, function symbol, object对象