晨光静好时!2 道 JS 与 TS 面试题解析,开启惬意学习日
myzbx 2025-06-13 15:34 34 浏览
当第一缕晨光温柔地唤醒窗台的绿植,泡上一杯清香四溢的茉莉花茶,坐在洒满阳光的角落。此刻,放下对面试的焦虑,让我们像聊生活趣事般,轻松拆解两道 JavaScript 和 TypeScript 的高频面试题,在这宁静的时光里,悄然充实自己的技术行囊。
第一题:JavaScript 中的闭包与 TypeScript 的泛型
面试官可能会问:“讲讲 JavaScript 闭包的原理以及应用场景,再谈谈 TypeScript 泛型的作用是什么?” 别被这些专业名词唬住,闭包就像一个专属的 “秘密小窝”,而泛型则是数据类型的 “万能模板”,接下来我们慢慢揭开它们的神秘面纱。
JavaScript 闭包
// 定义一个外层函数,它返回一个内部函数
function outer() {
// 声明一个局部变量,这个变量会被闭包保护
let count = 0;
return function inner() {
count++; // 内部函数可以访问并修改外层函数的局部变量
return count;
};
}
// 调用外层函数,得到一个内部函数实例,此时闭包形成
const increment = outer();
console.log(increment()); // 输出1
console.log(increment()); // 输出2在这段代码中,outer函数返回的inner函数就是一个闭包。inner函数能够记住并访问outer函数作用域内的count变量,即便outer函数已经执行完毕。在实际开发里,闭包常用于实现私有变量,保护数据不被随意篡改;还能用于函数防抖节流,优化页面性能,比如控制按钮在短时间内只能点击一次。
TypeScript 泛型
// 定义一个使用泛型的函数,T表示类型参数
function identity<T>(arg: T): T {
return arg; // 返回与传入参数相同类型的值
}
// 调用函数时,可以明确指定类型
const result1 = identity<number>(5); // result1的类型为number
// 也可以让TypeScript自动推断类型
const result2 = identity('hello'); // result2的类型为string泛型就像是一个 “万能模具”,在定义函数、类或接口时,不预先指定具体类型,而是在使用时再确定。这样可以提高代码的复用性,比如上面的identity函数,既可以处理数字类型,也能处理字符串类型,甚至是自定义的复杂对象类型,让代码更加灵活通用。
第二题:JavaScript 的原型链继承与 TypeScript 的类继承
“请分别阐述 JavaScript 原型链继承的原理,以及 TypeScript 中类继承的实现方式和优势。” 这两个知识点就像家族中的 “传承密码”,一个是 JavaScript 的传统传承方式,一个是 TypeScript 的现代传承方案。
JavaScript 原型链继承
// 定义父构造函数
function Animal() {
this.type = '生物';
}
// 在父原型上添加方法
Animal.prototype.say = function() {
console.log(`我是一只${this.type}`);
};
// 定义子构造函数
function Dog() {
Animal.call(this); // 继承父类属性
this.breed = '金毛';
}
// 设置原型链,让Dog的原型指向Animal的实例
Dog.prototype = new Animal();
Dog.prototype.constructor = Dog; // 修正构造函数指向
const myDog = new Dog();
myDog.say(); // 输出:我是一只生物在 JavaScript 中,通过构造函数和原型链实现继承。子构造函数通过call方法继承父类的属性,再将子类的原型指向父类的实例,这样子类就能继承父类原型上的方法。不过这种方式存在一些问题,比如原型上的引用类型属性会被所有实例共享。
TypeScript 类继承
// 定义父类
class Shape {
color: string;
constructor(color: string) {
this.color = color;
}
draw(): void {
console.log(`绘制一个${this.color}的图形`);
}
}
// 定义子类,继承自Shape类
class Circle extends Shape {
radius: number;
constructor(color: string, radius: number) {
super(color); // 调用父类构造函数
this.radius = radius;
}
draw(): void {
super.draw(); // 调用父类的draw方法
console.log(`半径为${this.radius}`);
}
}
const circle = new Circle('红色', 5);
circle.draw();在 TypeScript 中,使用class和extends关键字实现类继承。子类通过super关键字调用父类的构造函数和方法,语法更加直观清晰,而且 TypeScript 的类型检查能在编译阶段发现继承中的类型错误,让代码更加健壮,维护起来也更轻松。
面试应答模板
闭包与泛型问题回答
“JavaScript 的闭包其实就是函数和它能够访问的外部变量的组合。当内部函数引用了外层函数的变量,并且这个内部函数被保存下来,就形成了闭包。比如一个计数器函数,通过闭包可以保护内部的计数变量不被外部随意修改,还能实现累加功能。而 TypeScript 的泛型,是一种提高代码复用性的方式。它就像一个通用模板,在定义函数或类的时候,不固定具体的数据类型,等到使用的时候再指定。这样同样的代码逻辑可以处理不同类型的数据,减少重复代码,让代码更灵活,也更容易维护。”
原型链继承与类继承问题回答
“JavaScript 的原型链继承,是通过构造函数和原型的关系实现的。子类构造函数先借用父类构造函数初始化属性,再把自己的原型指向父类的实例,这样就能继承父类原型上的方法。不过它有个缺点,原型上的引用类型属性会被所有实例共享,一个实例修改了,其他实例也会受影响。TypeScript 的类继承就直观多了,用class定义类,extends实现继承,子类通过super调用父类的构造函数和方法。而且 TypeScript 有严格的类型检查,在写继承关系的代码时,能提前发现类型不匹配的问题,代码的可读性和可靠性都更高,特别适合大型项目的开发。”
晨光渐渐明亮,在这悠然的时光里,我们完成了一次知识的美好邂逅。对于今天的这两道面试题,你是否有了新的感悟?或者还有哪些 JavaScript 和 TypeScript 的知识点想深入了解?欢迎在评论区分享你的想法和疑问!觉得文章对你有帮助,别忘了点赞关注,明天清晨,我们继续相约,探索更多有趣又实用的前端面试知识!
相关推荐
- 如何设计一个优秀的电子商务产品详情页
-
加入人人都是产品经理【起点学院】产品经理实战训练营,BAT产品总监手把手带你学产品电子商务网站的产品详情页面无疑是设计师和开发人员关注的最重要的网页之一。产品详情页面是客户作出“加入购物车”决定的页面...
- 怎么在JS中使用Ajax进行异步请求?
-
大家好,今天我来分享一项JavaScript的实战技巧,即如何在JS中使用Ajax进行异步请求,让你的网页速度瞬间提升。Ajax是一种在不刷新整个网页的情况下与服务器进行数据交互的技术,可以实现异步加...
- 中小企业如何组建,管理团队_中小企业应当如何开展组织结构设计变革
-
前言写了太多关于产品的东西觉得应该换换口味.从码农到架构师,从前端到平面再到UI、UE,最后走向了产品这条不归路,其实以前一直再给你们讲.产品经理跟项目经理区别没有特别大,两个岗位之间有很...
- 前端监控 SDK 开发分享_前端监控系统 开源
-
一、前言随着前端的发展和被重视,慢慢的行业内对于前端监控系统的重视程度也在增加。这里不对为什么需要监控再做解释。那我们先直接说说需求。对于中小型公司来说,可以直接使用三方的监控,比如自己搭建一套免费的...
- Ajax 会被 fetch 取代吗?Axios 怎么办?
-
大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!今天给大家带来的主题是ajax、fetch...
- 前端面试题《AJAX》_前端面试ajax考点汇总
-
1.什么是ajax?ajax作用是什么?AJAX=异步JavaScript和XML。AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX可以使网页实...
- Ajax 详细介绍_ajax
-
1、ajax是什么?asynchronousjavascriptandxml:异步的javascript和xml。ajax是用来改善用户体验的一种技术,其本质是利用浏览器内置的一个特殊的...
- 6款可替代dreamweaver的工具_替代powerdesigner的工具
-
dreamweaver对一个web前端工作者来说,再熟悉不过了,像我07年接触web前端开发就是用的dreamweaver,一直用到现在,身边的朋友有跟我推荐过各种更好用的可替代dreamweaver...
- 我敢保证,全网没有再比这更详细的Java知识点总结了,送你啊
-
接下来你看到的将是全网最详细的Java知识点总结,全文分为三大部分:Java基础、Java框架、Java+云数据小编将为大家仔细讲解每大部分里面的详细知识点,别眨眼,从小白到大佬、零基础到精通,你绝...
- 福斯《死侍》发布新剧照 "小贱贱"韦德被改造前造型曝光
-
时光网讯福斯出品的科幻片《死侍》今天发布新剧照,其中一张是较为罕见的死侍在被改造之前的剧照,其余两张剧照都是死侍在执行任务中的状态。据外媒推测,片方此时发布剧照,预计是为了给不久之后影片发布首款正式预...
- 2021年超详细的java学习路线总结—纯干货分享
-
本文整理了java开发的学习路线和相关的学习资源,非常适合零基础入门java的同学,希望大家在学习的时候,能够节省时间。纯干货,良心推荐!第一阶段:Java基础重点知识点:数据类型、核心语法、面向对象...
- 不用海淘,真黑五来到你身边:亚马逊15件热卖爆款推荐!
-
Fujifilm富士instaxMini8小黄人拍立得相机(黄色/蓝色)扫二维码进入购物页面黑五是入手一个轻巧可爱的拍立得相机的好时机,此款是mini8的小黄人特别版,除了颜色涂装成小黄人...
- 2025 年 Python 爬虫四大前沿技术:从异步到 AI
-
作为互联网大厂的后端Python爬虫开发,你是否也曾遇到过这些痛点:面对海量目标URL,单线程爬虫爬取一周还没完成任务;动态渲染的SPA页面,requests库返回的全是空白代码;好不容易...
- 最贱超级英雄《死侍》来了!_死侍超燃
-
死侍Deadpool(2016)导演:蒂姆·米勒编剧:略特·里斯/保罗·沃尼克主演:瑞恩·雷诺兹/莫蕾娜·巴卡林/吉娜·卡拉诺/艾德·斯克林/T·J·米勒类型:动作/...
- 停止javascript的ajax请求,取消axios请求,取消reactfetch请求
-
一、Ajax原生里可以通过XMLHttpRequest对象上的abort方法来中断ajax。注意abort方法不能阻止向服务器发送请求,只能停止当前ajax请求。停止javascript的ajax请求...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)
- JS Loop For (32)
