腾讯前端面试题之 - 远程面试

一面——那是一个电话

腾讯面试官(小腾):你好,我是腾讯面试官,巴拉巴拉……先自我介绍一下(声音特别温柔😝)!

笔者:我…

小腾:那我们就简单的聊一下一些基础的前端知识!

。。。。。。

这通面试电话,面试官主要问了我4个前端相关问题。

1.知道什么是事件委托吗?

2.对Promise了解吗?

3.window的onload事件和domcontentloaded谁先谁后?

4.你之前遇到过跨域问题吗?是怎么解决的。

众人皆知,不以结婚为目的的恋爱都是耍流氓,额,不,跑题了😁。。。不给答案的面试题都是来骗点击量的😝!!!由于这些问题实在过于简单,但是涉及面又挺广的,还请大家自行百度(千万不要因为这个不给我赞,你的赞是宝宝持续分享的动力QAQ)。

二面——QQ远程面

啊呀,罗里吧嗦的,老太婆的裹脚布…,我写到这里,被主管劈头盖脸就是一顿!现在的年轻人时间宝贵,喜欢干货,不喜欢你这磨磨唧唧的!如此,只能干货先行了(大家如果喜欢我的行文风格,就点个赞,或者评论一下呗,笔者特别想怼一下那个主管)!

干货如下,答案为自己整理,如果有误,欢迎指出!

一.有一个类如下:

function Person(name) {
    this.name = name
}
let p = new Person('Tom');
  • p.proto等于什么? 答案: Person.prototype

  • Person.proto等于什么? 答案: Function.prototype

解析:

12两问其实问的是同一个问题,都是考察原型链相关的知识,我们只需要记住一句话就可以迎刃而解。实例的proto属性(原型)等于其构造函数的prototype属性。实例p的构造函数为Person,而Person的构造函数为Function,结果就一目了然了。

触类旁通

var foo = {},
F = function({};
Object.prototype.a = 'value a';
Function.prototype.b = 'value b';
console.log(foo.a)  
console.log(foo.b)    
console.log(F.a)      
console.log(F.b)  

这里就不给答案了,大家自己分析一下,然后再去控制台运行一下吧!冬天到了,动动手,暖一暖,有木有觉得笔者还是相当的贴心的!!!

3. 若将题干改为

function Person(name) {
    this.name = name    return name;
}
let p = new Person('Tom');

实例化Person过程中,Person返回什么(或者p等于什么)? 答案:

{name: 'Tom'}

4. 若将题干改为

function Person(name) {
    this.name = name    return {}
}
let p = new Person('Tom');

实例化Person过程中,Person返回什么(或者p等于什么)?

答案:{}

构造函数不需要显示的返回值。使用new来创建对象(调用构造函数)时,如果return的是非对象(数字、字符串、布尔类型等)会忽而略返回值;如果return的是对象,则返回该对象(注:若return null也会忽略返回值)。

5. typeof和instanceof的区别

在 JavaScript 中,判断一个变量的类型尝尝会用 typeof 运算符,在使用 typeof 运算符时采用引用类型存储值会出现一个问题,无论引用的是什么类型的对象,它都返回 “object”。
instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造 
函数的 prototype 属性。
语法:object instanceof constructor
参数:object(要检测的对象.)constructor(某个构造函数)
描述:instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上。

6. 如果Student inherit from Person(Student类继承Person,需是基于原型的继承),let s = new Student('Lily'),那么s instanceof Person返回什么?

function Person (name) {
    this.name = name;
}
function Student () {}
Student.prototype = Person.prototype;
Student.prototype.constructor = Student;
let s = new Student('Tom');
console.log(s instanceof Person); // 返回 true

答案:true

7. new和instanceof的内部机制

答:

  • 创建一个新对象,同时继承对象类的原型,即Person.prototype;
  • 执行对象类的构造函数,同时该实例的属性和方法被this所引用,即this指向新构造的实例;
  • 如果构造函数return了一个新的“对象”,那么这个对象就会取代整个new出来的结果。如果构造函数没有return对象,那么就会返回步骤1所创建的对象,即隐式返回this。(一般情况下构造函数不会返回任何值,不过在一些特殊情况下,如果用户想覆盖这个值,可以选择返回一个普通的对象来覆盖。)

8.下面代码输出什么?

for(var i = 0; i < 10; i++) {
    setTimeout(() => {
        console.log(i)
    }, 0)
}

答案: 10个10

9. 刚刚我们用到了箭头函数,说一下箭头函数This指向问题?

答案: 默认指向在定义它时,它所处的对象,而不是执行时的对象,定义它的时候,可能环境是window(即继承父级的this)。

如果对This还有不清楚的地方,可以参考我的另一篇文章彻底理解JavaScript中的this。

10. for…in迭代和for…of有什么区别?

答案:for…in和for…of的区别

11.说一下你对generator的了解?

答案: 建议大家查看阮一峰老师的generator相关章节

12.使用过flex布局吗?flex-grow和flex-shrink属性有什么用?

答案: flex-grow:项目的放大比例,默认为0,即如果存在剩余空间,也不放大。flex-shrink:项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

想彻底理解flex,可以查看阮一峰老师的Flex布局教程:语法篇

13. 说一下macrotask 和 microtask?并说出下面代码的运行结果。

console.log('a');
setTimeout(() => {
    console.log('b');
}, 0);
console.log('c');
Promise.resolve().then(() => {
    console.log('d');
}).then(() => {
    console.log('e');
});
console.log('f');

答案: 输出结果为 acfdeb

14. Http请求中的keep-alive有了解吗。

在http早期,每个http请求都要求打开一个tpc socket连接,并且使用一次之后就断开这个tcp连接。 使用keep-alive可以改善这种状态,即在一次TCP连接中可以持续发送多份数据而不会断开连接。通过使用keep-alive机制,可以减少tcp连接建立次数,也意味着可以减少TIME_WAIT状态连接,以此提高性能和提高httpd服务器的吞吐率(更少的tcp连接意味着更少的系统内核调用,socket的accept()和close()调用)。 但是,keep-alive并不是免费的午餐,长时间的tcp连接容易导致系统资源无效占用。配置不当的keep-alive,有时比重复利用连接带来的损失还更大。所以,正确地设置keep-alive timeout时间非常重要。

15. React中的controlled component 和 uncontrolled component区别(受控组件和不受控组件)。

答案: : 请查阅React官网受控组件,非受控组件

16. 了解过react-router内部实现机制吗?

答案:请看这篇文章react-router的实现原理

17.数组扁平化处理:实现一个flatten方法,使得输入一个数组,该数组里面的元素也可以是数组,该方法会输出一个扁平化的数组。

// Example
let givenArr = [[1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14]]]], 10];
let outputArr = [1,2,2,3,4,5,5,6,7,8,9,11,12,12,13,14,10]
// 实现flatten方法使得flatten(givenArr)——>outputArr
function flatten(arr){
    while(arr.some(item=>Array.isArray(item)){
        arr = [].concat(...arr);
    }
    return arr;
}

18.如果在17问的前提下,要做去重和排序处理又该怎么做(不用给出具体代码)。

答案:最好封装一个数组方法的类,该类包含flatten(扁平化)、sort(排序)和unique(去重)等方法。

点赞是对小编最大的鼓励~

各位小哥哥小姐姐帮小编点一下广告,这对小编最大的鼓励哟,笔芯~

友情链接