Web前端最新JavaScript基础知识第七章---作用域、预解析和对象(1)，2024年最新最新大厂Web前端校招面试经验汇总

最后

四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~

祝大家都能收获大厂offer~

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

篇幅有限，仅展示部分内容

• 局部变量只能在该函数内部使用；

• 在函数内部 var 声明的变量是局部变量；

• 函数的形参实际上就是局部变量；

2.4 全局变量和局部变量的区别

1️⃣ 全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存；

2️⃣ 局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间；

---

（3）作用域链

• 只要是代码，就至少有一个作用域；

• 写在函数内部的局部作用域；

• 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域；

• 根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链；

😆作用域链😆：采取就近原则的方式来查找变量最终的值。

---

二、JavaScript 预解析

---

（1）预解析

JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步：预解析和代码执行。

• **预解析：**在当前作用域下，JS 代码执行之前，浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义。

• **代码执行：**从上到下执行JS语句。

预解析只会发生在通过 var 定义的变量和 function 上。学习预解析能够让我们知道为什么在变量声明之前访问变量的值是 undefined，为什么在函数声明之前就可以调用函数。

---

（2）变量预解析和函数预解析

2.1 变量预解析（变量提升）

预解析也叫做变量、函数提升。

变量提升：变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升。

2.2 函数预解析（函数提升）

函数提升：函数的声明会被提升到当前作用域的最上面，但是不会调用函数。

---

（3）预解析案例

3.1 案例1：结果是几？

// 案例1

var num = 10;

fun();

function fun() {

console.log(num); // undefined

var num = 20;

}

3.2 案例2：结果是几？

// 案例2

var num = 10;

function fn(){

console.log(num); // undefined

var num = 20;

console.log(num); //20

}

fn();

3.3 案例3：结果是几？

// 案例3

var a = 18;

f1();

function f1() {

var b = 9;

console.log(a); // undefined

console.log(b); // 9

var a = ‘123’;

}

3.4 案例4：结果是几？

// 案例4

f1();

console.log©; // 9

console.log(b); // 9

console.log(a); // a is not defined

function f1() {

var a = b = c = 9;

console.log(a); // 9

console.log(b); // 9

console.log©; // 9

}

---

三、JavaScript 对象

---

（1）对象

1.1 什么是对象？

1️⃣ 现实生活中：万物皆对象，对象是一个具体的事物，看得见摸得着的实物。例如，一本书、一辆汽车、一个人可以是“对象”，一个数据库、一张网页、一个与远程服务器的连接也可以是“对象”。

2️⃣ 在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。

3️⃣ 对象是由属性和方法组成的。

• 属性：事物的特征，在对象中用属性来表示（常用名词）；

• 方法：事物的行为，在对象中用方法来表示（常用动词）；

1.2 为什么需要对象

保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组。如果要保存一个人的完整信息呢？

例如，将“斯蒂芬库里”的个人的信息保存在数组中的方式为：

var arr = [‘斯蒂芬库里’, ‘男’, 34, 191];

JS 中的对象表达结构更清晰，更强大。斯蒂芬库里的个人信息在对象中的表达结构如下：

---

（2）创建对象的三种方式

在 JavaScript 中，现阶段我们可以采用三种方式创建对象（object）：

• 利用字面量创建对象；

• 利用 new Object 创建对象；

• 利用构造函数创建对象；

2.1 利用字面量创建对象

对象字面量：就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法。

{ } 里面采取键值对的形式表示：

• 键：相当于属性名

• 值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）

代码演示如下：

var star = {

name : ‘battledao’,

age : 23,

sex : ‘男’,

sayHi : function(){

alert(‘大家好啊~’);

}

};

对象的调用：

• 对象里面的属性调用：对象.属性名，这个小点 . 就理解为“ 的 ” ；

• 对象里面属性的另一种调用方式：对象[‘属性名’]，注意方括号里面的属性必须加引号；

• 对象里面的方法调用：对象.方法名()，注意这个方法名字后面一定加括号 ；

代码演示如下：

console.log(star.name) // 调用名字属性

console.log(star[‘name’]) // 调用名字属性

star.sayHi(); // 调用 sayHi 方法,注意，一定不要忘记带后面的括号

2.1.1 练习：请按照要求写出对象

要求：请用对象字面量的形式创建一个名字为可可的狗对象。

具体信息如下：

• 姓名：可可

• 类型(type)：阿拉斯加犬

• 年龄：5岁，

• 颜色：棕红色。

• 技能：汪汪汪(bark) ，演电影 (showFilm)

代码演示如下：

var dog = {

uname: ‘可可’,

type: ‘阿拉斯加犬’,

age: ‘5岁’,

color: ‘棕红色’,

bark: function (a, b) {

return ‘汪汪汪’;

},

showFilm: function () {

return ‘演电影’;

}

}

2.1.2 变量、属性、函数、方法总结

• 变量：单独声明赋值，单独存在；

• 属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征；

• 函数：单独存在的，通过“函数名()”的方式就可以调用；

• 方法：对象里面的函数称为方法，方法不需要声明，使用“对象.方法名()”的方式就可以调用，方法用来描述该对象的行为和功能；

2.2 利用new Object创建对象

代码演示如下：

var andy = new Obect();

andy.name = ‘battledao’;

andy.age = 23;

andy.sex = ‘男’;

andy.sayHi = function(){

alert(‘大家好啊~’);

}

• Object() ：第一个字母大写；

• new Object() ：需要 new 关键字；

• 使用的格式：对象.属性 = 值；

2.2.1 练习： 请按照要求写出对象

要求：请用new Object 形式创建一个鸣人对象。

具体信息如下：

• 姓名：鸣人

• 性别：男

• 年龄：19岁

• 技能（skill）：影分身术

代码演示如下：

var obj = new Object;

obj.uname = ‘鸣人’;

obj.sex = ‘男’;

obj.age = ‘19岁’;

obj.skill = function () {

return ‘影分身术’;

}

计算机网络

• HTTP 缓存

• 你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？

• HTTP 常用的请求方式，区别和用途？

• HTTPS 是什么？具体流程

• 三次握手和四次挥手

• 你对 TCP 滑动窗口有了解嘛？

• WebSocket与Ajax的区别

• 了解 WebSocket 嘛？

• HTTP 如何实现长连接？在什么时候会超时？

• TCP 如何保证有效传输及拥塞控制原理。

• TCP 协议怎么保证可靠的，UDP 为什么不可靠？

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

算法

• 链表

• 字符串

• 数组问题

• 二叉树

• 排序算法

• 二分查找

• 动态规划

• BFS

• 栈

• DFS

• 回溯算法