2024年前端最全JavaScript进阶之OOP（一），面试知识及准备

跳槽是每个人的职业生涯中都要经历的过程，不论你是搜索到的这篇文章还是无意中浏览到的这篇文章，希望你没有白白浪费停留在这里的时间，能给你接下来或者以后的笔试面试带来一些帮助。

也许是互联网未来10年中最好的一年。WINTER IS COMING。但是如果你不真正的自己去尝试尝试，你永远不知道市面上的行情如何。这次找工作下来，我自身感觉市场并没有那么可怕，也拿到了几个大厂的offer。在此进行一个总结，给自己，也希望能帮助到需要的同学。

面试准备

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

面试准备根据每个人掌握的知识不同，准备的时间也不一样。现在对于前端岗位，以前也许不是很重视算法这块，但是现在很多公司也都会考。建议大家平时有空的时候多刷刷leetcode。算法的准备时间比较长，是一个长期的过程。需要在掌握了大部分前端基础知识的情况下，再有针对性的去复习算法。面试的时候算法能做出来肯定加分，但做不出来也不会一票否决，面试官也会给你提供一些思路。

示例：调用构造函数

class Father{

constructor(x,y){

this.x = x

this.y = y

}

sum(){

console.log(this.x + this.y)

}

}

class Son extends Father{

constructor(x,y){

// 这里不能访问父类的 this,父类的sum函数中的this是父类的，子类值没有传递进去

// this.x = x // 报错

// this.y = y // 报错

super(x,y);//调用父类中的构造函数

}

}

let son = new Son(1,2)

son.sum() // 3

示例：调用普通函数

// super调用父类的普通函数

class Father {

say() {

return ‘我是爸爸’

}

}

class Son extends Father {

say() {

//调用父类的普通方法

console.log(super.say()); //我是爸爸

}

}

let son = new Son()

3.3 继承方法的同时扩展方法

需求：继承父类的加法方法的同时，自己扩展一个减法方法。

注意事项：调用父类的函数时，super必须在子类this之前调用(父亲必须放在之前)

// 父类加法操作

class Father {

constructor(x, y) {

this.x = x

this.y = y

}

sum() {

console.log(this.x + this.y);

}

}

// 子类继承父类加法方法的同时扩展减法操作

class Son extends Father {

constructor(x, y) {

// 调用父类的构造函数 super必须在子类this之前调用(父亲必须放在之前)

super(x, y)

this.x = x

this.y = y

}

subtract() {

console.log(this.x - this.y);

}

}

let son = new Son(5, 3)

son.subtract() // 2

son.sum() // 8

四、Tab栏 案例

---

功能描述：

1. 点击Tab栏能实现切换

2. Tab栏和内容 点击右上角×号能删除当前栏目和内容

3. 点击加号能实现增加Tab栏功能

4. 双击Tab栏，可以编辑Tab栏名称

5. 双击内容，可编辑内容

4.1 点击Tab栏能实现切换 Tab栏和内容

4.2 点击右上角×号能删除当前栏目和内容

4.3 点击加号能实现增加Tab栏效果

4.4 双击Tab栏，可以编辑Tab栏名称

4.5 双击内容，可编辑内容

4.6 细节方面：

1. 删除一个栏目后默认选中前一个栏目

2. 新增的栏目也能实现基本功能

3. 当默认选中的是第一个，并且删除的时候，选中删除后的第一个

4. 在编辑Tab名称的时候，回车键也能确认编辑

5. 新增的栏目默认选中

样例获取：

1. Demo演示传送门

2. 下面有实例代码！

源码和教程来自b站pink老师，传送门

是不是太棒了，在21世纪是不是 很久没有遇到博主这样贴心的人才了吧！ 那还愣着干什么，点赞关注走一波啊！

实例代码

---

JS：tab.js

let that = null

class Tab {

constructor(id) {

// 1.获取元素

this.main = document.querySelector(id)

this.tabadd = this.main.querySelector(‘.tabadd’)

// li的父元素

this.ul = this.main.querySelector(‘.fisrstnav ul:first-child’)

// section福元素

this.fatherSection = this.main.querySelector(‘.tabscon’)

that = this

this.init()

}

// 初始化

init() {

this.updateNode();

// inti 初始化操作 让相关的元素绑定事件

for (let i = 0; i < this.lis.length; i++) {

this.lis[i].setAttribute(‘data-index’, i)

this.lis[i].onclick = this.toggleTab;

this.remove[i].onclick = this.removeTab;

this.spans[i].ondblclick = this.editTab;

this.sections[i].ondblclick = this.editTab;

}

this.tabadd.onclick = this.add

}

// 更新数据列表

updateNode() {

this.lis = this.main.querySelectorAll(‘li’)

this.sections = that.main.querySelectorAll(‘section’)

this.remove = this.main.querySelectorAll(‘.icon-guanbi’)

this.spans = this.main.querySelectorAll(‘.fisrstnav li span:nth-child(1)’)

console.log('this.spans: ', this.spans);

}

// 1.切换功能

toggleTab() {

that.clearClass()

this.className = ‘liactive’

that.sections[this.getAttribute(‘data-index’)].className = ‘conactive’

}

clearClass() {

for (let i = 0; i < this.lis.length; i++) {

this.lis[i].className = ‘’

this.sections[i].className = ‘’

}

}

// 2.添加

add() {

// 清除所有选中

that.clearClass()

// 1.创建 li元素和section元素

let random = Math.round(Math.random() * 100, 3)

let li = ‘

• Tab
• ’

  let section = ‘

  新内容’ + random + ‘
  ’

  // 2.追加元素 使用 insertAdjacentHTML 支持字符串形式

  that.ul.insertAdjacentHTML(‘beforeend’, li)

  that.fatherSection.insertAdjacentHTML(‘beforeend’, section)

  // 更新

  that.init()

  }

  // 3.删除

  removeTab(e) {

  // 阻止时间冒泡 防止触发li的点击切换事件

  e.stopPropagation();

  let index = this.parentNode.getAttribute(‘data-index’)

  // 根据索引号 删除对应li和section remove方法可以直接删除指定的元素

  that.lis[index].remove()

  that.sections[index].remove()

  that.init()

  // 当我们删除的不是选中状态的li的时候，原来的选定状态保持不变即可

  // 该句核心思想，如果删除的是当前选中项，删除过后页面上没有 .liactive 进入判断，直接return 否则跳过

  if (document.querySelector(‘.liactive’)) return;

  // 当我们删除过后，设置默认选中其一个

  index == 0 ? index = 0 : index–

  that.lis[index] && that.lis[index].click()

  }

  // 4.编辑

  editTab(e) {

  // 双击禁止选中文字

  window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

  let str = this.innerHTML;

  console.log(this);

  this.innerHTML = ‘’

  let input = this.children[0]

  input.value = str

  input.select() //文本框内的文字处于选定状态

  // 按下回车

  input.addEventListener(‘keyup’, function (e) {

  if (e.keyCode === 13) {

  // 手动调用表单失去焦点事件

  this.blur();

  }

  })

  input.onblur = function () {

  debugger

  this.parentNode.innerHTML = this.value

  }

  }

  }

  #let tab = new Tab(‘#tab’);

  HTML：index.html

  Js 面向对象 动态添加标签页
• 测试1
• 测试2
• 测试3
• +

  测试1
  测试2
  测试3

  CSS：tab.css

  • {

  margin: 0;

  padding: 0;

  }

  ul li {

  list-style: none;

  }

  main {

  width: 960px;

  height: 500px;

  border-radius: 10px;

  margin: 50px auto;

  }

  main h4 {

  height: 100px;

  line-height: 100px;

  text-align: center;

  }

  .tabsbox {

  width: 900px;

  margin: 0 auto;

  height: 400px;

  border: 1px solid lightsalmon;

  position: relative;

  }

  nav ul {

  overflow: hidden;

  }

  nav ul li {

  float: left;

  width: 100px;

  height: 50px;

  line-height: 50px;

  text-align: center;

  #border-right: 1px solid #ccc;

  position: relative;

  cursor: pointer;

  user-select: none;

  }

  nav ul li.liactive {

  #border-bottom: 2px solid #fff;

  z-index: 9;

  }

  nav ul li.liactive span:first-child{

  font-size: 18px;

  font-weight: bold;

  }

  ##tab input {

  width: 80%;

  height: 60%;

  }

  nav ul li span:last-child {

  position: absolute;

  user-select: none;

  font-size: 12px;

  top: -18px;

  right: 0;

  display: inline-block;

  height: 20px;

  }

  .tabadd {

  position: absolute;

  /* width: 100px; */

  top: 0;

  right: 0;

  cursor: pointer;

  }

  .tabadd span {

  display: block;

  width: 20px;

  height: 20px;

  line-height: 20px;

  text-align: center;
  最后

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  最后写上我自己一直喜欢的一句名言：世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它