2024年最新概述ES5和ES6中面向对象的实现方法(1)，学生会面试答题模板

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

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

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

JavaScript

性能

linux

前端资料汇总

前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的小伙伴要注意了，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候无论遇到什么情况，问题都不会大。

this.name = name;

this.age = age;

this.say1 = function() {

console.log(‘say1’ + this.name + ’ ’ + this.age);

}

};

// 直接给原型链赋值

Animal.prototype.say2 = function() {

console.log(‘say2’ + this.name + ’ ’ + this.age);

};

var cat = new Animal(‘小猫’, 3);

cat.say1(); // 输出 say1小猫 3

cat.say2(); // 输出 say2小猫 3

// Javascript中，国际公认也是真正靠谱的继承方式：寄生组合继承

// call() apply() 定义：调用一个对象的一个方法，用另一个对象替换当前对象

Animal.prototype.say2.apply(cat); // 输出 say2小猫 3

var params = {

name: ‘小猫2’,

age: 4

};

cat.say2.call(params); // 输出 say2小猫2 4

// 寄生组合继承

var Cat = function(name, age) {

// Animal.apply(this, arguments); // arguments是一个全局对象，代表了一个数组

Animal.apply(this, [name, age]);

// Animal.call(this, name, age); // apply和call传值不一样

};

// 浅克隆 创建了Animal对象赋值给Cat的原型链中；属于寄生组合继承

// Object.create()是一种浅克隆的方式，相当于New，但是跟New不一样，是进行了一次浅克隆

// 区分 Cat.prototype = new Animal(); 属于组合继承

Cat.prototype = Object.create(Animal.prototype);

Cat.prototype.say1 = function() {

var p = {

name: ‘父类名字’,

age: 10

};

Animal.prototype.say1.apply§;

console.log(‘这是子类的名字’ + this.name + this.age);

};

var cat1 = new Cat(‘子猫’, 5);

cat1.say1(); // 输出 say1子猫 5

})();

ES6中的面向对象和继承

============

面向对象示例：

class ClassTest {

constructor() {

console.log(‘test’);

}

fun1() {

console.log(‘fun1’);

}

static fun2() { // 使用static静态方法，调用时可以不需要new实例

console.log(‘fun2’);

}

}

new ClassTest(); // test

new ClassTest().fun1(); // test // fun1

ClassTest.fun2(); // fun2

继承示例：（待理解）

class Animal {

constructor(name = ‘无姓名’, age = 0) {

this.name = name;

this.age = age;

}

say() {

console.log(‘这是父类的say’ + this.name + this.age);

}

}

// Cat 继承 Animal

class Cat extends Animal {

constructor(name, age) {

super(name, age);

}

say() { // 子类say覆盖父类say 默认调用子类say，加上super关键字可以执行父类say

super.say(); // 调用父类的方法

console.log(‘这是子类的say’ + this.name + this.age);

}

}

const cat = new Cat(‘小猫’, 2);

cat.say(); // 输出 这是父类的say小猫2 // 输出 这是子类的say小猫2

框架相关

原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。

在框架方面，生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的，在学习的过程可以结合框架的官方文档

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

Vue框架

知识要点：
1. vue-cli工程
2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

核心知识点**

3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

[外链图片转存中…(img-Gy7WxMxe-1715754262127)]

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

[外链图片转存中…(img-TRdm9SNV-1715754262128)]