JS面试题汇总（八），2024年最新2024大厂Web前端面试最火问题

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）

正文

当需要阻止默认行为时，可以使用

//阻止浏览器的默认行为

function stopDefault(e) {

//阻止默认浏览器动作(W3C)

if (e && e.preventDefault) e.preventDefault();

//IE中阻止函数器默认动作的方式

else window.event.returnValue = false;

return false;

}

74. js 中 this 闭包 作用域

参考答案：

this：指向调用上下文

闭包：定义一个函数就开辟了一个局部作用域，整个 js 执行环境有一个全局作用域

作用域：一个函数可以访问其他函数中的变量（闭包是一个受保护的变量空间）

var f = (function fn() {

var name = 1;

return function() {

name++;

console.log(name)

}

})()

==

undefined 有疑问

75. javascript 的本地对象，内置对象和宿主对象

参考答案：

1. 本地对象

ECMA-262 把本地对象（native object）定义为“独立于宿主环境的 ECMAScript 实现提供的对象"。简单来说，本地对象就是 ECMA-262 定义的类（引用类型）。它们包括：Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError

2. 内置对象

JS中内置了17个对象，常用的是Array对象、Date对象、正则表达式对象、string对象、Global对象

3. 宿主对象

由ECMAScript实现的宿主环境提供的对象，可以理解为：浏览器提供的对象。所有的BOM和DOM都是宿主对象。

76. javascript 的同源策略

参考答案：

一段脚本只能读取来自于同一来源的窗口和文档的属性

解析：

同源策略：限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。（来自 MDN 官方的解释）

简单来说就是：一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合

具体解释：

（1）源包括三个部分：协议、域名、端口（http 协议的默认端口是 80）。如果有任何一个部分不同，则源不同，那就是跨域了。

（2）限制：这个源的文档没有权利去操作另一个源的文档。这个限制体现在：（要记住）

Cookie、LocalStorage 和 IndexDB 无法获取。

无法获取和操作 DOM。

不能发送 Ajax 请求。我们要注意，Ajax 只适合同源的通信。

同源策略带来的麻烦：ajax 在不同域名下的请求无法实现，需要进行跨域操作

77. 事件冒泡与事件捕获

参考答案：

事件冒泡：由最具体的元素（目标元素）向外传播到最不具体的元素

事件捕获：由最不确定的元素到目标元素

78. foo = foo||bar ，这行代码是什么意思？为什么要这样写？

参考答案：

这种写法称为短路表达式

解析：

相当于

var foo;

if (foo) {

foo = foo;

} else {

foo = bar;

}

常用于函数参数的空判断

79. 复杂数据类型如何转变为字符串

参考答案：

• 首先，会调用 valueOf 方法，如果方法的返回值是一个基本数据类型，就返回这个值

• 如果调用 valueOf 方法之后的返回值仍旧是一个复杂数据类型，就会调用该对象的 toString 方法

• 如果 toString 方法调用之后的返回值是一个基本数据类型，就返回这个值，

• 如果 toString 方法调用之后的返回值是一个复杂数据类型，就报一个错误。

80. javascript 中 this 的指向问题

参考答案：

• 全局环境、普通函数（非严格模式）指向 window

• 普通函数（严格模式）指向 undefined

• 函数作为对象方法及原型链指向的就是上一级的对象

• 构造函数指向构造的对象

• DOM 事件中指向触发事件的元素

• 箭头函数…

解析：

1、全局环境

---

全局环境下，this 始终指向全局对象（window），无论是否严格模式；

// 在浏览器中，全局对象为 window 对象：

console.log(this === window); // true

this.a = 37;

console.log(window.a); // 37

2、函数上下文调用

---

2. 1 普通函数

普通函数内部的 this 分两种情况，严格模式和非严格模式。

（1）非严格模式下，没有被上一级的对象所调用, this 默认指向全局对象 window。

function f1() {

return this;

}

f1() === window; // true

（2）严格模式下，this 指向 undefined。

function f2() {

“use strict”; // 这里是严格模式

return this;

}

f2() === undefined; // true

2. 2 函数作为对象的方法

（1）函数有被上一级的对象所调用，那么 this 指向的就是上一级的对象。

（2）多层嵌套的对象，内部方法的 this 指向离被调用函数最近的对象（window 也是对象，其内部对象调用方法的 this 指向内部对象， 而非 window）。

//方式1

var o = {

prop: 37,

f: function() {

return this.prop;

}

};

//当 o.f()被调用时，函数内的this将绑定到o对象。

console.log(o.f()); // logs 37

//方式2

var o = {

prop: 37

};

function independent() {

return this.prop;

}

//函数f作为o的成员方法调用

o.f = independent;

console.log(o.f()); // logs 37

//方式3

//this 的绑定只受最靠近的成员引用的影响

o.b = {

g: independent,

prop: 42

};

console.log(o.b.g()); // 42

特殊例子

// 例子1

var o = {

a: 10,

b: {

// a:12,

fn: function() {

console.log(this.a); //undefined

console.log(this); //{fn: ƒ}

}

}

};

o.b.fn();

// 例子2

var o = {

a: 10,

b: {

a: 12,

fn: function() {

console.log(this.a); //undefined

console.log(this); //window

}

}

};

var j = o.b.fn;

j();

// this永远指向的是最后调用它的对象，也就是看它执行的时候是谁调用的，例子2中虽然函数fn是被对象b所引用，但是在将fn赋值给变量j的时候并没有执行所以最终指向的是window，这和例子1是不一样的，例子1是直接执行了fn

2. 3 原型链中的 this

（1）如果该方法存在于一个对象的原型链上，那么 this 指向的是调用这个方法的对象，就像该方法在对象上一样。

var o = {

f: function() {

return this.a + this.b;

}

};

var p = Object.create(o);

p.a = 1;

p.b = 4;

console.log(p.f()); // 5

上述例子中，对象 p 没有属于它自己的 f 属性，它的 f 属性继承自它的原型。当执行 p. f()时，会查找 p 的原型链，找到 f 函数并执行。因为 f 是作为 p 的方法调用的，所以函数中的 this 指向 p。

（2）相同的概念也适用于当函数在一个 getter 或者 setter 中被调用。用作 getter 或 setter 的函数都会把 this 绑定到设置或获取属性的对象。

（3）call()和 apply()方法：当函数通过 Function 对象的原型中继承的方法 call() 和 apply() 方法调用时， 其函数内部的 this 值可绑定到 call() & apply() 方法指定的第一个对象上， 如果第一个参数不是对象，JavaScript 内部会尝试将其转换成对象然后指向它。

function add(c, d) {

return this.a + this.b + c + d;

}

var o = {

a: 1,

b: 3

};

add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16

add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34

function tt() {

console.log(this);

}

// 第一个参数不是对象，JavaScript内部会尝试将其转换成对象然后指向它。

tt.call(5); // 内部转成 Number {[[PrimitiveValue]]: 5}

tt.call(“asd”); // 内部转成 String {0: “a”, 1: “s”, 2: “d”, length: 3, [[PrimitiveValue]]: “asd”}

（4）bind()方法：由 ES5 引入， 在 Function 的原型链上， Function. prototype. bind。通过 bind 方法绑定后， 函数将被永远绑定在其第一个参数对象上， 而无论其在什么情况下被调用。

function f() {

return this.a;

}

var g = f.bind({

a: “azerty”

});

console.log(g()); // azerty

var o = {

a: 37,

f: f,

g: g

};

console.log(o.f(), o.g()); // 37, azerty

2. 4 构造函数中的 this

当一个函数用作构造函数时（使用 new 关键字），它的 this 被绑定到正在构造的新对象。

构造器返回的默认值是 this 所指的那个对象，也可以手动返回其他的对象。

function C() {

this.a = 37;

}

var o = new C();

console.log(o.a); // 37

// 为什么this会指向o？首先new关键字会创建一个空的对象，然后会自动调用一个函数apply方法，将this指向这个空对象，这样的话函数内部的this就会被这个空的对象替代。

function C2() {

this.a = 37;

return {

a: 38

}; // 手动设置返回{a:38}对象

}

o = new C2();

console.log(o.a); // 38

特殊例子

当 this 碰到 return 时

// 例子1

function fn() {

this.user = “追梦子”;

return {};

}

var a = new fn();

console.log(a.user); //undefined

// 例子2

function fn() {

this.user = “追梦子”;

return function() {};

}

var a = new fn();

console.log(a.user); //undefined

// 例子3

function fn() {

this.user = “追梦子”;

return 1;

}

var a = new fn();

console.log(a.user); //追梦子

// 例子4

function fn() {

this.user = “追梦子”;

return undefined;

}

var a = new fn();

console.log(a.user); //追梦子

// 例子5

function fn() {

this.user = “追梦子”;

return undefined;

}

var a = new fn();

console.log(a); //fn {user: “追梦子”}

// 例子6

// 虽然null也是对象，但是在这里this还是指向那个函数的实例，因为null比较特殊

function fn() {

this.user = “追梦子”;

return null;

}

var a = new fn();

console.log(a.user); //追梦子

// 总结：如果返回值是一个对象，那么this指向的就是那个返回的对象，如果返回值不是一个对象那么this还是指向函数的实例。

2. 5 setTimeout & setInterval

（1）对于延时函数内部的回调函数的 this 指向全局对象 window；

（2）可以通过 bind()方法改变内部函数 this 指向。

//默认情况下代码

function Person() {

this.age = 0;

setTimeout(function() {

console.log(this);

}, 3000);

}

var p = new Person(); //3秒后返回 window 对象

//通过bind绑定

function Person() {

this.age = 0;

setTimeout(

function() {

console.log(this);

}.bind(this),

3000

);

}

var p = new Person(); //3秒后返回构造函数新生成的对象 Person{…}

3、在 DOM 事件中

---

3. 1 作为一个 DOM 事件处理函数

当函数被用作事件处理函数时，它的 this 指向触发事件的元素（针对 addEventListener 事件）。

// 被调用时，将关联的元素变成蓝色

function bluify(e) {

//this指向所点击元素

console.log(“this === e.currentTarget”, this === e.currentTarget); // 总是 true

// 当 currentTarget 和 target 是同一个对象时为 true

console.log(“this === e.target”, this === e.target);

this.style.backgroundColor = “#A5D9F3”;

}

// 获取文档中的所有元素的列表

var elements = document.getElementsByTagName(“*”);

// 将bluify作为元素的点击监听函数，当元素被点击时，就会变成蓝色

for (var i = 0; i < elements.length; i++) {

elements[i].addEventListener(“click”, bluify, false);

}

3. 2 作为一个内联事件处理函数

（1）当代码被内联处理函数调用时，它的 this 指向监听器所在的 DOM 元素；

（2）当代码被包括在函数内部执行时，其 this 指向等同于 普通函数直接调用的情况，即在非严格模式指向全局对象 window，在严格模式指向 undefined：

show me

show inner this

use strict

// 控制台打印

show me

Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}

undefined

4、箭头函数

---

4. 1 全局环境中

在全局代码中，箭头函数被设置为全局对象：

var globalObject = this;

var foo = () => this;

console.log(foo() === globalObject); // true

4. 2 this 捕获上下文

箭头函数没有自己的 this，而是使用箭头函数所在的作用域的 this，即指向箭头函数定义时（而不是运行时）所在的作用域。

//1、箭头函数在函数内部，以非方法的方法使用

function Person() {

this.age = 0;

setInterval(() => {

this.age++;

}, 3000);

}

var p = new Person(); //Person{age: 0}

//普通函数作为内部函数

function Person() {

this.age = 0;

setInterval(function() {

console.log(this);

this.age++;

}, 3000);

}

var p = new Person(); //Window{…}

4. 2 this 捕获上下文

箭头函数没有自己的 this，而是使用箭头函数所在的作用域的 this，即指向箭头函数定义时（而不是运行时）所在的作用域。

//1、箭头函数在函数内部，以非方法的方法使用

function Person() {

this.age = 0;

setInterval(() => {

console.log(this);

this.age++;

}, 3000);

}

var p = new Person(); //Person{age: 0}

//普通函数作为内部函数

function Person() {

this.age = 0;

setInterval(function() {

最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
.age = 0;

setInterval(() => {

this.age++;

}, 3000);

}

var p = new Person(); //Person{age: 0}

//普通函数作为内部函数

function Person() {

this.age = 0;

setInterval(function() {

console.log(this);

this.age++;

}, 3000);

}

var p = new Person(); //Window{…}

4. 2 this 捕获上下文

箭头函数没有自己的 this，而是使用箭头函数所在的作用域的 this，即指向箭头函数定义时（而不是运行时）所在的作用域。

//1、箭头函数在函数内部，以非方法的方法使用

function Person() {

this.age = 0;

setInterval(() => {

console.log(this);

this.age++;

}, 3000);

}

var p = new Person(); //Person{age: 0}

//普通函数作为内部函数

function Person() {

this.age = 0;

setInterval(function() {

最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

[外链图片转存中…(img-SGddkKsz-1713321116183)]

[外链图片转存中…(img-zYpgG7wn-1713321116183)]

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-KDw3RHZW-1713321116183)]

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！