2020前端面试题之 this相关的习题(二)

先看下习题:

var myObject = {
    foo:'bar',
    func:function(){
        var self = this;
        console.log(this.foo);  // bar
        console.log(self.foo);   // bar
        (function(){
            console.log(this);   // 该this指向的是  window
            console.log(this.foo);  // undefined
            console.log(self.foo);  // bar
        }());
    }
}
myObject.func();

解析: 前两个 console ,this指向的是 myObject ,所以打印出的是 bar。
在后面的闭包里面,this 指向的是window,而self 是被赋过值的,因此 self.foo 是bar,this.foo 是undefined(因为这里this指向的是window)。

<think>嗯,用户想了解前端面试题,我需要整理一个结构清晰的回答。首先得确定前端面试题通常涵盖哪些方面。常见的包括HTML、CSS、JavaScript,然后是框架,比如React、Vue,还有工程化、性能优化、网络相关,以及手写代码和算法题。可能还需要提到项目经验和软技能。 用户可能是准备面试的前端开发者,需要全面的知识点梳理。得确保每个部分都有例子,这样用户更容易理解。比如在HTML部分,语义化标签的例子,CSS的盒模型、布局方式,JavaScript的事件循环、闭包这些高频问题。 还要注意用户提到的系统级指令,所有数学公式要用$...$,但前端内容可能涉及代码较多,数学公式可能较少。不过如果有算法题,比如时间复杂度,可能需要用到,比如$O(n)$。需要检查是否有需要用到LaTeX的地方,正确应用格式。 另外,回答要结构清晰,分点列出,每个技术点下给出常见问题和示例。比如在React部分,可以提到生命周期、Hooks,虚拟DOM等。同时,工程化部分要涉及构建工具、模块化等。 还要考虑用户可能需要实际代码示例,比如手写防抖、节流函数,或者CSS居中布局的代码。这些示例需要用代码块展示,但根据用户要求,中文回答,所以代码注释可能需要用中文。 最后,总结部分要提醒用户结合项目经验,准备开放性问题,保持沟通清晰。可能用户希望知道如何系统准备,所以分门别类很重要。需要确保信息准确,避免错误,比如闭包的定义和应用场景,事件循环的原理等,不能有技术性错误。</think>我将从以下几个方面系统介绍前端面试的核心知识点和常见题型,并配以示例说明: 一、HTML & CSS 1. 高频考点 - 盒模型:标准模型 vs 怪异模式(box-sizing) - 布局方式:Flex布局(实现垂直居中)、Grid布局 - 定位机制:position各属性值的区别 - 响应式设计:媒体查询@media的使用 - 选择器优先级计算(权重叠加规则) 示例题: ```css /* 实现元素水平垂直居中 */ .container { display: flex; justify-content: center; align-items: center; } ``` 、JavaScript 1. 核心机制 - 事件循环:宏任务/微任务执行顺序 - 作用域链与闭包应用场景 - 原型链与继承实现 - this指向的四种绑定规则 2. 手写实现 - 防抖/节流函数 - Promise.all - 深拷贝函数 - 函数柯里化 示例题: ```javascript // 手写防抖函数 function debounce(fn, delay) { let timer = null return function(...args) { if(timer) clearTimeout(timer) timer = setTimeout(() => { fn.apply(this, args) }, delay) } } ``` 三、框架相关(以React为例) 1. 核心概念 - 虚拟DOM与Diff算法 - Hooks原理与使用规则 - 生命周期管理 - 状态管理(Redux/Mobx) 2. 性能优化 - 组件memoization - 代码分割(Code Splitting) - 渲染优化手段 四、工程化体系 1. 构建工具 - Webpack核心流程(Loader/Plugin机制) - Tree-shaking原理 - 打包优化策略 2. 质量保障 - 单元测试框架使用 - E2E测试方案 - 持续集成配置 五、网络基础 1. 核心协议 - HTTP/HTTPS握手过程 - 缓存策略(强缓存/协商缓存) - TCP三次握手/四次挥手 - WebSocket通信机制 六、算法题 1. 常见类型 - 链表操作(反转/环检测) - 树结构遍历(DFS/BFS) - 数组处理(去重/扁平化) - 字符串操作(回文检测) 示例题: ```javascript // 叉树层序遍历 function levelOrder(root) { if(!root) return [] const res = [] const queue = [root] while(queue.length) { const level = [] const len = queue.length for(let i=0; i<len; i++) { const node = queue.shift() level.push(node.val) if(node.left) queue.push(node.left) if(node.right) queue.push(node.right) } res.push(level) } return res } ``` 七、项目深度 1. 必备准备 - 技术选型对比分析 - 复杂问题解决案例 - 性能优化具体方案 - 项目架构设计思路 八、开放问题 1. 常见题型 - 前端技术趋势分析 - 框架设计理念对比 - 错误监控方案设计 - 性能指标优化策略 建议准备策略: 1. 构建知识体系脑图,建立知识点关联 2. 针对岗位要求定制化准备(如框架侧重) 3. 通过实际编码练习巩固理论 4. 模拟面试训练表达能力 典型面试流程: 技术笔试 → 算法考察 → 框架原理 → 项目深挖 → 系统设计 → 行为面试 最后提醒:面试不仅是技术考核,更是沟通能力、学习能力和解决问题能力的综合展示,建议保持清晰的技术演进叙述逻辑。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

派大星_study

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值