2024年Web前端最全这 6 点知识让我对 JavaScript 的对象有了更进一步的了解，2024年最新面试题解析已整理成文档

css

1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解

js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

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

当一个函数作为方法被调用时，对象会将函数作为属性并立即调用，就像在object.method()中一样，其主体中的特殊变量this将指向被调用的对象。

function speak(line) {

console.log(this.type + “小兔子说：” + line)

};

let whiteRabbit = {type: “白色”, speak: speak}

whiteRabbit.speak(“噢，我真可爱！”)

输出：

白色小兔子说：噢，我真可爱！

apply & call

• apply 和 call可以用于object.method()

• apply和call方法都有一个可用于模拟方法调用的第一个参数

• 实际上第一个参数是用来指定 this

function speak(line) {

console.log(${this.type}的小兔子说：${line} );

};

let whiteRabbit = {type: “白色”, speak: speak};

speak.apply(whiteRabbit, [“你这个小坏蛋!”]);

speak.call({type: “黑色”}, “嘿嘿，我不坏，你不爱!”);

白色的小兔子说：你这个小坏蛋!

黑色的小兔子说：嘿嘿，我不坏，你不爱!

2.Prototype(原型)

---

• 几乎所有的对象都有一个prototype

• prototype是另一个用作属性的备用源的对象

• 当一个对象访问自身没有属性时，它会从它的prototype搜索该属性，如果没有找到就继续从它的prototype的prototype查找，依此类推，直到 null 为止。

空对象的原型

原型链最终的指向是Object的prototype, 而Object中的__proto__是null

let empty = {};

console.log(empty.toString);

console.log(empty.toString());

输出：

[Function: toString]

[object Object]

其他对象(数组、函数等等)的默认属性

• 许多对象没有直接将Object.prototype作为自己的原型，但有自己的默认属性

• 从Function.prototype派生的函数和从Array.prototype派生的数组

console.log(Object.getPrototypeOf(isNaN) ==

Function.prototype);

console.log(Object.getPrototypeOf([]) ==

Array.prototype);

输出：

true

true

Object.create 创建具有特定原型的对象

• protoRabbit充当所有兔子共享的属性的容器

• 单个兔子对象（如杀手兔子）包含仅适用于自身的属性（在本例中为type），并从其原型派生共享属性

let protoRabbit = {

speak: function (line) {

console.log(${this.type}兔子说：${line} );

}

}

let killerRabbit = Object.create(protoRabbit)

killerRabbit.type = ‘杀手’

killerRabbit.speak(‘准备受死吧！’)

输出：

杀手兔子说：准备受死吧！

3.构造函数

---

— 构造函数原型

• 创建从某个共享原型派生的对象的更方便的方法是使用构造函数

• 在 JavaScript 中，调用前面带有new关键字的函数会将其视为构造函数

• 构造函数将其this变量绑定到一个新对象，除非它显式返回另一个对象值，否则此新对象将从调用中返回

• 用new创建的对象被称为是其构造函数的实例

• 约定将构造函数的名称大写，以便于与其他函数区分开

function Rabbit(type) {

this.type = type;

}

let killerRabbit = new Rabbit(“killer”);

let blackRabbit = new Rabbit(“black”);

console.log(blackRabbit.type);

输出：

black

— 默认情况下，构造函数具有Object.prototype

• 构造函数（实际上是所有函数）会自动获取一个名为prototype的属性，默认情况下，该属性包含一个从Object.prototype派生的普通空对象

• 使用此构造函数创建的每个实例都将此对象作为其原型

function Rabbit(type) {

this.type = type;

}

let blackRabbit = new Rabbit(“黑色”);

Rabbit.prototype.speak = function(line) {

console.log(${this.type}的兔子说：${line} );

};

blackRabbit.speak(“Boom…一波王炸！”);

输出：

黑色的兔子说：Boom…一波王炸！

4. 重写派生属性

---

— 相同的原型名称

• 如果原型中有同名的属性，则不会更改此属性

• 该属性被添加到对象本身

function Rabbit(type) {

this.type = type;

}

let blackRabbit = new Rabbit(“black”);

let killerRabbit = new Rabbit(“killer”);

Rabbit.prototype.teeth = “small”;

console.log(killerRabbit.teeth);

// small

killerRabbit.teeth = “long, sharp, and bloody”;

console.log(killerRabbit.teeth);

// long, sharp, and bloody

console.log(blackRabbit.teeth);

// small

console.log(Rabbit.prototype.teeth);

// small

下面 console.log(blackRabbit.teeth)的结果是small，因为blackRabbit对象不具有teeth属性，它继承自Rabbit对象自己的teeth属性，值为 small。

5. 原型的干扰

---

— 可枚举与不可枚举

let map = {}

function storePhi(event, phi) {

Vue

• 什么是MVVM？

• mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？

• 组件之间的传值？

• Vue 双向绑定原理

• 描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？

• 虚拟 DOM 实现原理

• Vue 中 key 值的作用？

• Vue 的生命周期

• Vue 组件间通信有哪些方式?

• vue 中怎么重置 data?

• 组件中写 name 选项有什么作用？

• Vue 的 nextTick 的原理是什么？

• Vuex 有哪几种属性?

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

  

  

什么？哪些场景适合？

• 组件之间的传值？

• Vue 双向绑定原理

• 描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？

• 虚拟 DOM 实现原理

• Vue 中 key 值的作用？

• Vue 的生命周期

• Vue 组件间通信有哪些方式?

• vue 中怎么重置 data?

• 组件中写 name 选项有什么作用？

• Vue 的 nextTick 的原理是什么？

• Vuex 有哪几种属性?

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