就一张图，没什么其他的。

继承的方案以及优缺点

1. 通过原型链实现继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// 1.定义父类构造函数
function Person() {
    this.info = "beichen"
}
// 2.在父类原型上添加eating方法
Person.prototype.eating = function () {
    console.log('eating')
}
// 3.定义子类构造函数
function Student() {
    this.name = 'student'
}
// 4.创建父类对象，并作为子类的原型对象
Student.prototype = new Person()
// 5.在子类原型上添加running方法
Student.prototype.running = function () {
    console.log('running')
}
var stu1 = new Student()
stu1.running() // running
stu1.eating() // eating

优点: 子类可以继承父类的方法

缺点:

• 第一，我们通过直接打印对象是看不到这个属性的；
• 第二，这个属性会被多个对象共享，如果这个对象是一个引用类型，那么就会造成问题；
• 第三，不能给Person传递参数（让每个stu有自己的属性），因为这个对象是一次性创建的（没办法定制化）；

2. 借用构造函数继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// 1.定义父类构造函数
function Person(info, age) {
	this.info = info
	this.age = age
}
// 2.在父类原型上添加eating方法
Person.prototype.eating = function () {
    console.log('eating')
}
// 3.定义子类构造函数
function Student(info, age, name) {
	// 借用构造函数继承
    Person.apply(this, [info, age])
    this.name = name
}
// 5.在子类原型上添加running方法
Student.prototype.running = function () {
    console.log('running')
}
var stu1 = new Student()
console.log(stu1.info) // beichen
console.log(stu1.name) // student
console.log(stu1.age) // 22

在子类中可以通过apply或call调用都可以

优点：属性不会被共享，可以给父类传入参数

缺点：父类的方法不能复用，子类实例的方法每次都是单独创建的。

对象增强

属性描述符需要使用到Object.defineProperty

接收三个参数：

​ 第一个参数: obj

​ 第二个参数: prop要定义或修改的属性的名称或Symbol

​ 第三个参数: descriptor要定义或修改的属性描述

属性描述符有类：数据属性、存取属性

• 数据属性描述符

  • configurable

  设置为false不可配置(不可被删除,不可在把值变为true)，默认为true

  1 2 3

  Object.defineProperty({ configurable: false })

  • enumerable

  设为false不可被枚举

  • writable

  不可被写入(只读)

  • value

  设置之后每次读取的值都为固定的值。

• 存取属性描述符

  • configurable
  • enumerable
  • set

  当定义的属性被修改/赋值，就会执行set方法，并将修改的值传入set函数的参数中。

  1 2 3 4 5 6 7 8 9

  var _name = '' // 私有变量 Object.defineProperty({ set: function(value) { console.log(value) //value为修改后的值 默认为undefined }， get: function() { return _name } })

  • get

  在调用obj.name就会执行get方法，默认的值也为undefined。

Object.defineProperties可以监听多个属性描述符。

类数组(array-like)转成数组

1. 通过for循环遍历存入新的数组

   1 2 3 4

   var newArguments = [] for (var arg of arguments) { newarguments.push(arg) }

2. Array.from() (ES6中的方式)

   from()中传入一个可迭代对象

   var newArgs1 = Array.from(arguments)

3. ...的语法 (ES6中的方式)

   var newArgs2 = [...arguments]

4. 使用slice()方法

   var newArgs3 = [].slice.apply(arguments)

   var newArgs3 = Array.prototype.slice.apply(arguments)

   slice也可以说是一种浅拷贝的方法。

   slice不会对原数组进行修改，而是返回一个新数组。(纯函数)

   splice会返回一个新数组，也会对原数组进行修改。

箭头函数中没有arguments

JS内存管理和闭包

1.JS内存管理

2.垃圾回收机制

常见的GC算法

1. 引用计数(Reference Counting)

   当有一个对象引用指向它时，那么这个对象就+1

   当一个对象的引用为0时，这个对象就被销毁掉了

   ex: 循环引用

   1 2 3 4 5 6 7 8 9

   obj1 = {} obj2 = {} obj1.info = obj2 obj2.info = obj1 // 此时obj1和obj2的引用计数都为2 obj1 = null obj2 = null // 此时obj1和obj2的引用计数都为1，不为0，不会被销毁掉，需要我们手动销毁

2. 标记清除(Mark-Sweep)

   标记清除的核心思想就是可达性(Reachability)

   描述: 这个算法是设置一个根对象(Root Object/window/Global Object，在不同地方有不同的叫法，但是i都是指的同一个对象)，垃圾回收器会定期从这个根开始，找所有从这个根开始有引用到的对象，对于那么没有引用到的对象，就认为是不可用对象。

   这个算法能很好的解决循环引用的问题

   ex:

   1 2 3 4 5 6 7 8 9 10

   var RootObject = { obj: { foo: function a() {}, bar: function b() {} } } RootObject -> obj -> foo/bar foo -> function bar -> function

浏览器运行原理

• 网页请求的过程
  输入一个url/域名，会经过DNS解析成ip地址，然后去请求指定的服务器，服务器返回资源(大多是html)给域名进行展示

回流和重绘(面试重点)

回流
回流reflow: (也可以称之为重排)

• 第一次确定节点大小和位置称之为布局。
• 之后对节点的大小，位置修改重新计算称之为回流
  回流举例: 修改的盒子的大小/宽高，移除等。

1. 修改DOM结构(添加/删除节点)
2. 改变布局(width/height/padding/font-size)
3. 改变窗口大小(手动修改)
   反面例子: 如果是修改了文字的颜色之类的是不需要进行重新布局，所以不会产生回流。

重绘
第一次渲染内容称之为绘制(paint)
之后重新渲染称之为重绘

回流一定会引起重绘，所以需要尽量避免回流，且非常消耗浏览器性能。
避免回流的方式:

• 1.修改样式尽量一次性修改
• 2.尽量避免频繁的操作DOM
• 3.尽量避免通过getComputedStyle获取尺寸、位置等信息
• 4.对某些元素使用position的absolute和fixed (会引起回流，但是开销相对较小)

严格模式下，独立调用的函数的this指向时undefined

typeof null => object
typeof undefined => undefined

箭头函数

箭头函数的返回值如果是一个对象，需要加一个小括号()
item => ({ name: ‘beichen’ })

• 箭头函数中压根没有this，不能绑定arguments，super参数
• 箭头函数是没有显示原型的，所以不能作为构造函数，不能使用new来创建对象

this绑定的规则的优先级

• 1.默认绑定的优先级是最低的
• 2.显式绑定的优先级高于隐式绑定
• 3.apply/bind/call的优先级高于隐式绑定
• 4.new绑定优先级高于隐式绑定
• 5.new不能和apply和call一起使用,也没有可比性
• 6.new的优先级高于bind的优先级
• 7.bind的优先级高于apply和call

优先级排序
1.new
2.bind
3.apply/call
4.隐式绑定
5.默认绑定(独立函数调用)

sb面试题
function foo() { console.log(this) } var obj1 = { name: 'obj1', foo: foo } var obj2 = { name: 'obj2' }; (obj2.foo = obj1.foo)() // this => Window

• 前期准备

1. 下载git
2. 登录github创建仓库

一.git的配置

在你项目的目录下，vscode的终端(这里需要把bash设置为vscode终端的默认启动项)，或者是在项目的目录下打开git bash。

1. 设置用户名、密码、邮箱

git config --global user.name "yourname"

git config --global user.password "password"

git config --global user.email "your_email@youremail.com"

也可以通过git config --list查看你所添加的这些属性

2. 生成密钥

ssh-keygen -t rsa -C "your_email@youremail.com"

3. 添加密钥并验证

然后将你的C -> user-> <用户名> -> .ssh -> id_rsa.pub(也就是公匙)

ctrl+a全选复制，粘贴到刚才你的执行的生成密钥的哪里，然后一直回车就可以了

ssh -T git@github.com

可以验证你的密钥是否添加成功，在github的仓库中也可以添加密钥。

使用宝塔部署node项目

我的项目是vue+node+mysql完成的前后端分离项目

如果你想通过域名或者ip访问的话，需要购买域名或者服务器，购买任意一个就可以了。

1.注册宝塔

这个我就不多介绍了，宝塔也是比较好用的，是一个服务器面板，里面很多东西都是免费的，感兴趣的朋友可以去了解一下，用法不难。

局部指令

这里的是简单实现了一下输入框获取焦点的自定义指令

这里的v-focus，focus是我们自己定义的，前缀是v-，简单来说就是v- + 自定义的名称。

这里的局部指令是仅限于当前组件中，我们需要在那个地方获取焦点，就将v-focus添加到那个标签里面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<template>
  <div>
    <input type="text" v-focus>
  </div>
</template>

<script>
  import { ref, onMounted } from 'vue'
  
  export default {
    /*
     * 局部指令
    */
    directives: {
      focus: {
        mounted(el, bindings, vnode, preVnode) {
          console.log("focus mounted")
          el.focus()
        },
      }
    }
  }
</script>