您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章给大家分享的是有关前端基础面试题及参考答案的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。
基础题
我出的这套基础题，面试(当面答题，想百度是不存在的)好多人，情况都比较差，没有令我满意的，是我出题太难了么？
介绍一下js原型继承
查看答案
当我们想要从 object 中读取一个缺失的属性时，js 会自动从原型中获取它
举例：
const animal = {
eats: true,
sleep: true,
voice: '',
bark(){
console.log(this.voice);
},
}
const dog = {
run: true,
voice: 'wang~~ wang~~',
}
dog.__proto__ = animal;
console.log(dog.run) // true
console.log(dog.eats) // true
console.log(dog.bark()) // wang~~ wang~~
console.log(dog.sleep) // true总结：
所有的对象都有一个隐藏的 [[Prototype]] 属性，它可以是另一个对象或者 null。
可以使用 obj.__proto__ 进行访问。
[[Prototype]] 引用的对象称为“原型”。
要读取 obj 属性或者调用一个方法，而且它不存在，那么就会尝试在原型中查找它。
写/删除直接在对象上进行操作，它们不使用原型（除非属性实际上是一个 setter）。
我们调用 obj.method()，而且 method 是从原型中获取的，this 仍然会引用 obj。
方法重视与当前对象一起工作，即使它们是继承的。
扩展：
构造函数继承、组合继承、寄生继承、寄生组合式继承。
说说什么是防抖、节流，在实际应用中在哪些场景会用到它们
防抖：
连续触发的事件（高频），在单位时间T内只执行最后一次，
若在T内再次触发，则清空定时重新计算。场景：模糊搜索
节流：
连续触发的事件（高频），在单位时间T内只执行一次。窗口滚动，获取滚动条top
javascript如何实现跨窗口通信
若子域同源，则可以通过设置document.domain将窗口视为同源站点，进行通信，
例如本地储存等等方式。
若不同源，我们可以在通过 postMessage(data,targetOrigin) 这个接口，进行跨窗口通信。
什么是点击劫持，如何防范
点击劫持：
允许恶意网页以用户的名义点击 “受害站点”。
通常恶意网页在受害网站链接之上放置一个透明 <iframe> 标签。
防范：
服务端 header 字段 X-Frame-Options 能够允许或禁止 frame 内页面的显示。
介绍一下什么是单向链表？有哪些特点？你知道的在哪些方面有链表的应用
链表（Linked list）是一种常见的基础数据结构，是一种线性表，
但是并不会按线性的顺序储存数据，而是在每一个节点里存到下一个节点的指针（Pointer）。
由于不必须按顺序储存，链表在插入的时候可以达到 o(1)的复杂度，比另一种线性表顺序表快得多，
但是查找一个节点或者访问特定编号的节点则需要 o(n)的时间，而顺序表响应的时间复杂度分别是 o(logn)和 o(1)。
特点：
无需预先分配内存,可以充分利用计算机内存空间，实现灵活的内存动态管理
插入/删除节点不影响其他节点
随机访问速度较慢
增加了结点的指针域，空间开销比较大
单向链表：
是链表中最简单的一种，它包含两个域，一个信息域和一个指针域。
这个链接指向列表中的下一个节点，而最后一个节点则指向一个空值。
应用：
git commit、es6的Iterator、react的fiber算法。
前后端路由差别
前端路由（spa）纯浏览器行为，是由浏览器控制的（hash、history），
当打开一个spa页面后，切换路由，浏览器改变地址栏url并通过js展示对应页面（组件）
后端路由，切换路由时，服务端会去匹配并查找对应资源，返回给浏览器并渲染。
是否研究过webpack，谈谈你对它的理解及loader的设计原则
本题相对开放一些。
webpack个人理解：
webpack是划时代的，比较完美解决了前端模块依赖的问题，任何资源都是js，任何资源都可以在js中声明依赖，
真正实现了通用的模块化开发。
loader的设计原则：
单一职责、所有模块都是js模块，webpack 只支持js模块，所有其他类型的模块，
比如图片，css等，都需要通过对应的loader转成js模块。
所以在webpack中无论任何类型的资源，本质上都被当成js模块处理。
所有的loader都是一个管道，可以把一个loader看做是一个数据管道，
进口是一个字符串，然后经过加工，输出另一个字符串。
给定一个一维数组arr，将其按一定数量num分组为二维数组，例如: 条件为arr=[0,1,2,3,4,5,6], num=3, 结果为[[0,1,2],[3,4,5],[6]]
假设我们有一个函数 slow(x,y,z,...) ，它是 CPU 重负载的，但它的结果是稳定的，换句话说，对于相同的输入 x，y，z...，它总是返回相同的结果 XYZ，我们该如何优化，才能避免在重新计算上花费额外的时间
function slow(x,y,z) {
// 这里可能会有重负载的CPU密集型工作
// ...
alert(`Called with ${XYZ}`);
return XYZ;
}用js实现一个发布-订阅模式
class Event{
constructor(){
this.pool = new Map()
}
broadcast(){
const [key,...rest] = [...arguments];
if(this.pool.has(key)){
const func = this.pool.get(key)
func.apply(this, rest)
}
}
addEventListenering(key, func){
this.pool.set(key,func)
}
removeEventListenering(key){
this.pool.delete(key)
}
}
const ev = new Event();
ev.addEventListenering('event1',function(param){
console.log('发布新值了',param)
})
ev.broadcast('event1',1000); //发布新值了 1000
ev.broadcast('event1',2000); //发布新值了 2000
ev.broadcast('event1',3000); //发布新值了 3000
ev.removeEventListenering('event1');
ev.broadcast('event1',3000);以下代码打印的是什么
function A() {
this.a = 1;
}
A.prototype.b = 1;
const a = new A();
console.log(a.a);
console.log(a.b);
const b = new A();
b.__proto__.a = 2;
A.prototype.b = 2;
console.log(a.a);
console.log(a.b);1 1 1 2
请输出下面代码的打印内容
var name = '小红';
var obj = {
name: '小明',
sayName() {
console.log(`${this.name}`);
},
};
var sayName = () => {
console.log(`${this.name}`);
};
var fn = obj.sayName;
sayName();
obj.sayName();
sayName.call(obj);
obj.sayName.call(this);
fn();小红 小明 小红 小红 小红复制代码
请输出以下代码的打印内容
new Promise((resolve) => {
console.log(3);
resolve();
}).then(() => {
onsole.log(4);
});
setTimeout(() => {6
console.log(2);
}, 0);
Promise.resolve().then(() => {
console.log(5);
});
console.log(1);3 1 4 5 2
感谢各位的阅读！关于前端基础面试题及参考答案就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。