## new 做了什么？
1. 创建一个空对象
2. 获取arguments第一个参数
3. 将构造函数的原型链赋值给空（新）对象
4. 改变构造函数this指向，指向空对象，使得空对象可以访问构造函数中的属性以及原型上的属性和方法，最后return出去。
* new 实现代码
``` js
function MyNew(){
var obj = {},
// 截取类数组arguments第一个参数并返回，其实就是构造函数
// 注意：shift会改变原数组，故改变指向使用apply对应第二个参数为去除构造函数剩余的数组arguments
Constructor = [].shift.call(arguments)
// 构造函数原型赋值给obj对象
obj.__proto__ = Constructor.prototype
// 改变构造函数指向，指向obj对象
Constructor.apply(obj, arguments)
return obj
}
```
* 先分析一下`[].shift.call(arguments)`做了什么？其实等同于`Array.prototype.shift.call()`；call作用相当于把this执行修改指向类数组arguments对象上，让该对象也同时拥有Array原型上的方法，故这是先改变指向（类数组数据和数组原型方法合并），然后再使用数组原型上的方法shift，进行删除第一个参数，并作为新的项返回。
## defer作用
* defer：异步加载js文件，HTML解析遇到他们也不会阻塞，而是异步加载完成，等到解析完成，然后照先后引入顺序执行。对于有相互依赖的文件，则最好采取这种方式。
* async：异步加载js文件，HTML解析遇到他们也不会阻塞，会异步加载，但是加载完成则会立即执行。而这时候不看先后顺序，只看谁先被下载完成。适合独立文件。
## 组件传递方式
* 父子通讯：
props / $emit和$on
$parent / $children
ref
$attrs / $listeners
* 兄弟组件通讯
Vuex
eventBus
$root
$parent
* 跨层级组件通讯
provide / inject
Vuex
eventBus
## v-model语法糖
```
<input type="text" :value="msg" @input="msg=$event.target.value" />
```
* 扩展：自定义组件中使用
```
model:{
prop: 'val',
event: 'change'
},
props:{
val:{
type: String,
default: ''
}
}
// 配合
this.$emit('change', newVal)
```
注意：在element-ui中二次封装组件，注意添加$attrs和$listeners，比如一些属性和方法可以进行直接（继承）使用。
## js原型，继承
https://segmentfault.com/a/1190000016708006
继承本质是：构造函数继承和原型继承。
* 只有构造函数继承：父级构造函数原型prototype上的属性和方法无法继承。
特点：
解决原型链中父类共享引用属性的问题；
创建子类实例，可以向父类传递参数；
可以实现多个call继承。
缺点：
实例并不是父类实例，只是子类实例；
只继承父类实例的属性和方法，不能继承父类原型属性和方法；
无法实现函数复用，每个子类都有父类实例函数的副本，影响性能。
``` js
function Person(){
this.name = 'vvmily'
this.fn = function(){
console.log('this is a fn')
}
}
Person.prototype.say = function(){
console.log('this is a prototype fn !!!')
}
function Child(){
Person.call(this)
this.age = 19
this.cn = function(){
console.log(this.age)
}
}
Child.prototype.ck = function(){
console.log('ck')
}
var c = new Child()
```
* 原型继承：父级构造函数私有变量成为公有化，如当引用类型this.arr则被公有化。
特点：
父类新增的方法和属性，子类都能访问到；
缺点：
无法实现多继承；
来自原型对象的书友属性被所有实例共享；
子类新增属性和方法，必须在子构造函数原型继承父类实例之后（Child.prototype=new Person()）,毕竟需要等待指向改变之后方可添加属性和方法
``` js
function Person(){
this.name = 'vvmily'
this.arr = [1,2,3,4,5]
this.fn = function(){
console.log('this is a fn')
}
}
Person.prototype.say = function(){
console.log('this is a prototype fn !!!')
}
function Child(){
this.age = 19
this.cn = function(){
console.log(this.age)
}
}
Child.prototype.ck = function(){
console.log('ck')
}
Child.prototype = new Person()
Child.prototype.construtor = Child
var c = new Child()
var c1 = new Child()
// 注意：c.arr数据和c1.arr指向一致的
```
* 组合继承：父级构造函数和原型继承父级构造函数实例
缺点：
调用两次父级构造函数，生成两份实例
优点：
继承所有属性和方法；
不存在属性共享问题；
可以传递参数，函数可以复用。
``` js
function Person(){
this.name = 'vvmily'
this.fn = function(){
console.log('this is a fn')
}
}
Person.prototype.say = function(){
console.log('this is a prototype fn !!!')
}
function Child(){
Person.call(this)
this.age = 19
this.cn = function(){
console.log(this.age)
}
}
Child.prototype.ck = function(){
console.log('ck')
}
Child.prototype = new Person() // 如果不通过原型继承，则Person原型上的say方法则无法继承
Child.prototype.construtor = Child // 如果继承Person实例，则构造函数需要重新指向
var c = new Child()
```
* 组合继承：构造函数和原型继承
``` js
function Person(){
this.name = 'vvmily'
this.fn = function(){
console.log('this is a fn')
}
}
Person.prototype.say = function(){
console.log('this is a prototype fn !!!')
}
function Child(){
Person.call(this)
this.age = 19
this.cn = function(){
console.log(this.age)
}
}
Child.prototype.ck = function(){
console.log('ck')
}
Child.prototype = Object.create(Person.prototype) // 重点
Child.prototype.construtor = Child // 重点
var c = new Child()
```
* 来个ES6的Class语法糖吧
```
class Person {
constructor(name){
this.name = name || 'vvmily'
}
say(){
console.log('this a say fn!!!')
}
}
class Child extends Person {
constructor(name){
super(name)
this.ccc = 'ccc'
}
ck(){
console.log('ck')
}
}
var c = new Child('ming')
```
## ref
ref：被用来给元素或者子组件注册引用信息的，引用信息将会注册在父组件的$refs对象上。
## thread-loader作用
多进程打包作用，提升打包速度（耗时任务长的，可以考虑，项目较小时，使用的话或许打包更久，反而不好，看项目合适情况）。
```
test: '/\.js$/',
exclude: /node_modules/,
use: [
{
loader: 'thread-loader',
options:{
worders: 2 // 进程数量 2
}
}
]
```
## 波菲那齐数列
* 斐波那契数列又被称为黄金分割数列，指的是这样的一个数列：1,1,2,3,5,8,13,21,34....，它有如下递推的方法定义：F(1)=1,F(2)=1,F(n)=F(n-1)+F(n-2)(n>=2,n是正整数)，请使用js实现斐波那契函数。
四种实现方式，具体参考：https://segmentfault.com/a/1190000018473729
## 浏览器加载网页的主要步骤包括哪些？如何针对步骤进行性能优化？
## 防抖节流
防抖节流实现：https://www.kancloud.cn/vvmily_king/vvmily/2331774
## 事件委托
* 利用DOM元素默认冒泡行为，实现在上级挂载事件，可以通过e.stopPropagation()阻止冒泡事件，既停止事件冒泡 ；
* 优点：减小内存，和事件注册。
* 注意：e.preventDefault();阻止事件默认行为。
动画
指令实现，过滤器实现
## less scss区别
* 首先sass和less都是css的预编译处理语言，他们引入了mixins，参数，嵌套规则，运算，颜色，名字空间，作用域，JavaScript赋值等 加快了css开发效率。
* sass和less主要区别:在于实现方式 less是基于JavaScript的在客户端处理 所以安装的时候用npm，sass是基于ruby所以在服务器处理。
* 很多开发者不会选择LESS因为JavaScript引擎需要额外的时间来处理代码然后输出修改过的CSS到浏览器。
H5新特性
https://blog.csdn.net/caseywei/article/details/81105544
* HTML5有哪些新特性,移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5
*
* 新增加了图像、位置、存储、多任务等功能。
*
* 新增元素：
*
* canvas
*
* 用于媒介回放的video和audio元素
*
* 本地离线存储。localStorage长期存储数据，浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后自动删除
*
* 语意化更好的内容元素，比如 article footer header nav section
*
* 位置API：Geolocation
*
* 表单控件，calendar date time email url search
* 新的技术：web worker(web worker是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行) web socket
* 拖放API：drag、drop
* 移除的元素：
*
* 纯表现的元素：basefont big center font s strike tt u
*
* 性能较差元素：frame frameset noframes
*
* 区分：
*
* DOCTYPE声明的方式是区分重要因素
*
* 根据新增加的结构、功能来区分
## 浏览器有哪些对象
* navigator：获取浏览器信息
*
* screen：获取屏幕信息
*
* location：获取当前页面URL信息
*
* document：对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点。
*
* history：对象保存了浏览器的历史记录。JavaScript可以调用history对象的back()或forward(),相当于用户点击了浏览器的后腿或前进按钮。
## BFC是什么
**触发BFC的条件**
* body根元素
* 设置浮动，不包括none
* 设置定位，absoulte或者fixed
* 行内块显示模式，inline-block
* 设置overflow，即hidden，auto，scroll
* 表格单元格，table-cell
* 弹性布局，flex
https://www.itcast.cn/news/20201016/16152387135.shtml
## Promise实现
https://juejin.cn/post/6856213486633304078#heading-0
## 响应式原理
https://segmentfault.com/a/1190000019700618
loader和plugin区别
es6中module，amd,cmd和module区别
echart / canvas实现
promise原理
http1.2.3
webpack平常都会配置那些，用过那些插件，或者说plugin
计算属性和watch 区别和使用场景
1、响应式原理
https://segmentfault.com/a/1190000019700618
2、js、h5新特性
3、http(1\2\3)，请求过程，握手，解析构建渲染等等
4、性能优化，如缓存赖加载等等
5、webpack
6、原型
7、设计模式
7、继承，多态
8、vue的相关内容
9、css(less\scss、动画）
10、事件委托、异步队列
11、堆栈
移动端、小程序
- 首页
- 2021年
- 基础知识
- 同源策略
- 跨域
- css
- less
- scss
- reset
- 超出文本显示省略号
- 默认滚动条
- 清除浮动
- line-height与vertical-align
- box-sizing
- 动画
- 布局
- JavaScript
- 设计模式
- 深浅拷贝
- 排序
- canvas
- 防抖节流
- 获取屏幕/可视区域宽高
- 正则
- 重绘重排
- rem换算
- 手写算法
- apply、call和bind原理与实现
- this的理解-普通函数、箭头函数
- node
- nodejs
- express
- koa
- egg
- 基于nodeJS的全栈项目
- 小程序
- 常见问题
- ec-canvas之横竖屏切换重绘
- 公众号后台基本配置
- 小程序发布协议更新
- 小程序引入iconfont字体
- Uni-app
- 环境搭建
- 项目搭建
- 数据库
- MySQL数据库安装
- 数据库图形化界面常用命令行
- cmd命令行操作数据库
- Redis安装
- APP
- 控制缩放meta
- GIT
- 常用命令
- vsCode
- 常用插件
- Ajax
- axios-services
- 文章
- 如何让代码更加优雅
- 虚拟滚动
- 网站收藏
- 防抖节流之定时器清除问题
- 号称破解全网会员的脚本
- 资料笔记
- 资料笔记2
- 公司面试题
- 服务器相关
- 前端自动化部署-jenkins
- nginx.conf配置
- https添加证书
- shell基本命令
- 微型ssh-deploy前端部署插件
- webpack
- 深入理解loader
- 深入理解plugin
- webpack注意事项
- vite和webpack区别
- React
- react+antd搭建
- Vue
- vue-cli
- vue.config.js
- 面板分割左右拖动
- vvmily-admin-template
- v-if与v-for那个优先级高？
- 下载excel
- 导入excel
- Echart-China-Map
- vue-xlsx(解析excel)
- 给elementUI的el-table添加骨架
- cdn引入配置
- Vue2.x之defineProperty应用
- 彻底弄懂diff算法的key作用
- 复制模板内容
- 表格操作按钮太多
- element常用组件二次封装
- Vue3.x
- Vue3快速上手（第一天）
- Vue3.x快速上手（第二天）
- Vue3.x快速上手（第三天）
- vue3+element-plus搭建项目
- vue3
- 脚手架
- vvmily-cli
- TS
- ts笔记
- common
- Date
- utils
- axios封装
- 2022年
- HTML
- CSS基础
- JavaScript 基础
- 前端框架Vue
- 计算机网络
- 浏览器相关
- 性能优化
- js手写代码
- 前端安全
- 前端算法
- 前端构建与编译
- 操作系统
- Node.js
- 一些开放问题、智力题