腾讯前端常考面试题汇总
手写 bind、apply、call
// callFunction.prototype.call = function (context, ...args) {context = context || window;const fnSymbol = Symbol("fn");context[fnSymbol] = this;context[fnSymbol](...args);delete context[fnSymbol];
}// applyFunction.prototype.apply = function (context, argsArr) {context = context || window;const fnSymbol = Symbol("fn");context[fnSymbol] = this;context[fnSymbol](...argsArr);delete context[fnSymbol];
}// bindFunction.prototype.bind = function (context, ...args) {context = context || window;const fnSymbol = Symbol("fn");context[fnSymbol] = this;return function (..._args) {args = args.concat(_args);context[fnSymbol](...args);delete context[fnSymbol]; }
}前端进阶面试题详细解答
vue实现双向数据绑定原理是什么？
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script><!-- 引入vue文件 --><div id="box"><new-input v-bind:name.sync="name"></new-input>{{name}}<!-- 小胡子语法 --><input type="text" v-model="name" /></div><script>Vue.component("new-input", { props: ["name"], data: function () { return { newName: this.name, }; }, template: `<label><input type="text" @keyup="changgeName" v-model="newName" /> 你的名字：</label>`, // 模板字符串methods: { changgeName: function () { this.$emit("update:name", this.newName); }, }, watch: { name: function (v) { this.newName = v; }, }, // 监听}); new Vue({ el: "#box", //挂载实例data: { name: "nick", }, //赋初始值}); </script></body>
</html><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><input type="text" v-mode="msg" /><p v-mode="msg"></p><script>const data = { msg: "你好", }; const input = document.querySelector("input"); const p = document.querySelector("p"); input.value = data.msg; p.innerHTML = data.msg; //视图变数据跟着变input.addEventListener("input", function () { data.msg = input.value; }); //数据变视图变let temp = data.msg; Object.defineProperty(data, "msg", { get() { return temp; }, set(value) { temp = value; //视图修改input.value = temp; p.innerHTML = temp; }, }); data.msg = "小李"; </script></body>
</html>八股文我不想写了自己百度去详细说明 Event loop
众所周知 JS 是门非阻塞单线程语言，因为在最初 JS 就是为了和浏览器交互而诞生的。如果 JS 是门多线程的语言话，我们在多个线程中处理 DOM 就可能会发生问题（一个线程中新加节点，另一个线程中删除节点），当然可以引入读写锁解决这个问题。
JS 在执行的过程中会产生执行环境，这些执行环境会被顺序的加入到执行栈中。如果遇到异步的代码，会被挂起并加入到 Task（有多种 task） 队列中。一旦执行栈为空，Event Loop 就会从 Task 队列中拿出需要执行的代码并放入执行栈中执行，所以本质上来说 JS 中的异步还是同步行为。
console.log('script start');setTimeout(function() {console.log('setTimeout');
}, 0);console.log('script end');以上代码虽然 setTimeout 延时为 0，其实还是异步。这是因为 HTML5 标准规定这个函数第二个参数不得小于 4 毫秒，不足会自动增加。所以 setTimeout 还是会在 script end 之后打印。
不同的任务源会被分配到不同的 Task 队列中，任务源可以分为 微任务（microtask） 和 宏任务（macrotask）。在 ES6 规范中，microtask 称为 jobs，macrotask 称为 task。
console.log('script start');setTimeout(function() {console.log('setTimeout');
}, 0);new Promise((resolve) => {console.log('Promise')resolve()
}).then(function() {console.log('promise1');
}).then(function() {console.log('promise2');
});console.log('script end');
// script start => Promise => script end => promise1 => promise2 => setTimeout以上代码虽然 setTimeout 写在 Promise 之前，但是因为 Promise 属于微任务而 setTimeout 属于宏任务，所以会有以上的打印。
微任务包括 process.nextTick ，promise ，Object.observe ，MutationObserver
宏任务包括 script ， setTimeout ，setInterval ，setImmediate ，I/O ，UI rendering
很多人有个误区，认为微任务快于宏任务，其实是错误的。因为宏任务中包括了 script ，浏览器会先执行一个宏任务，接下来有异步代码的话就先执行微任务。
所以正确的一次 Event loop 顺序是这样的
- 执行同步代码，这属于宏任务
- 执行栈为空，查询是否有微任务需要执行
- 执行所有微任务
- 必要的话渲染 UI
- 然后开始下一轮 Event loop，执行宏任务中的异步代码
通过上述的 Event loop 顺序可知，如果宏任务中的异步代码有大量的计算并且需要操作 DOM 的话，为了更快的 界面响应，我们可以把操作 DOM 放入微任务中。
Node 中的 Event loop
Node 中的 Event loop 和浏览器中的不相同。
Node 的 Event loop 分为6个阶段，它们会按照顺序反复运行
┌───────────────────────┐
┌─>│ timers │
│ └──────────┬────────────┘
│ ┌──────────┴────────────┐
│ │ I/O callbacks │
│ └──────────┬────────────┘
│ ┌──────────┴────────────┐
│ │ idle, prepare │
│ └──────────┬────────────┘ ┌───────────────┐
│ ┌──────────┴────────────┐ │ incoming: │
│ │ poll │<──connections─── │
│ └──────────┬────────────┘ │ data, etc. │
│ ┌──────────┴────────────┐ └───────────────┘
│ │ check │
│ └──────────┬────────────┘
│ ┌──────────┴────────────┐
└──┤ close callbacks │└───────────────────────┘timer
timers 阶段会执行 setTimeout 和 setInterval
一个 timer 指定的时间并不是准确时间，而是在达到这个时间后尽快执行回调，可能会因为系统正在执行别的事务而延迟。
下限的时间有一个范围：[1, 2147483647] ，如果设定的时间不在这个范围，将被设置为1。
I/O
I/O 阶段会执行除了 close 事件，定时器和 setImmediate 的回调
idle, prepare
idle, prepare 阶段内部实现
poll
poll 阶段很重要，这一阶段中，系统会做两件事情
- 执行到点的定时器
- 执行 poll 队列中的事件
并且当 poll 中没有定时器的情况下，会发现以下两件事情
- 如果 poll 队列不为空，会遍历回调队列并同步执行，直到队列为空或者系统限制
- 如果 poll 队列为空，会有两件事发生
- 如果有
setImmediate需要执行，poll 阶段会停止并且进入到 check 阶段执行setImmediate - 如果没有
setImmediate需要执行，会等待回调被加入到队列中并立即执行回调
- 如果有
如果有别的定时器需要被执行，会回到 timer 阶段执行回调。
check
check 阶段执行 setImmediate
close callbacks
close callbacks 阶段执行 close 事件
并且在 Node 中，有些情况下的定时器执行顺序是随机的
setTimeout(() => {console.log('setTimeout');
}, 0);
setImmediate(() => {console.log('setImmediate');
})
// 这里可能会输出 setTimeout，setImmediate
// 可能也会相反的输出，这取决于性能
// 因为可能进入 event loop 用了不到 1 毫秒，这时候会执行 setImmediate
// 否则会执行 setTimeout当然在这种情况下，执行顺序是相同的
var fs = require('fs')fs.readFile(__filename, () => {setTimeout(() => {console.log('timeout');}, 0);setImmediate(() => {console.log('immediate');});
});
// 因为 readFile 的回调在 poll 中执行
// 发现有 setImmediate ，所以会立即跳到 check 阶段执行回调
// 再去 timer 阶段执行 setTimeout
// 所以以上输出一定是 setImmediate，setTimeout上面介绍的都是 macrotask 的执行情况，microtask 会在以上每个阶段完成后立即执行。
setTimeout(()=>{console.log('timer1')Promise.resolve().then(function() {console.log('promise1')})
}, 0)setTimeout(()=>{console.log('timer2')Promise.resolve().then(function() {console.log('promise2')})
}, 0)// 以上代码在浏览器和 node 中打印情况是不同的
// 浏览器中打印 timer1, promise1, timer2, promise2
// node 中打印 timer1, timer2, promise1, promise2Node 中的 process.nextTick 会先于其他 microtask 执行。
setTimeout(() => {console.log("timer1");Promise.resolve().then(function() {console.log("promise1");});
}, 0);process.nextTick(() => {console.log("nextTick");
});
// nextTick, timer1, promise1
New操作符做了什么事情?
1、首先创建了一个新对象
2、设置原型，将对象的原型设置为函数的prototype对象
3、让函数的this指向这个对象，执行构造函数的代码（为这个新对象添加属性）
4、判断函数的返回值类型，如果是值类型，返回创建的对象。如果是引用类型，就返回这个引用类型的对象代码输出结果
async function async1 () {console.log('async1 start');await new Promise(resolve => {console.log('promise1')})console.log('async1 success');return 'async1 end'
}
console.log('srcipt start')
async1().then(res => console.log(res))
console.log('srcipt end')输出结果如下：
script start
async1 start
promise1
script end这里需要注意的是在async1中await后面的Promise是没有返回值的，也就是它的状态始终是pending状态，所以在await之后的内容是不会执行的，包括async1后面的 .then。
对闭包的理解
闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，创建的函数可以访问到当前函数的局部变量。
闭包有两个常用的用途；
- 闭包的第一个用途是使我们在函数外部能够访问到函数内部的变量。通过使用闭包，可以通过在外部调用闭包函数，从而在外部访问到函数内部的变量，可以使用这种方法来创建私有变量。
- 闭包的另一个用途是使已经运行结束的函数上下文中的变量对象继续留在内存中，因为闭包函数保留了这个变量对象的引用，所以这个变量对象不会被回收。
比如，函数 A 内部有一个函数 B，函数 B 可以访问到函数 A 中的变量，那么函数 B 就是闭包。
function A() {let a = 1window.B = function () {console.log(a)}
}
A()
B() // 1在 JS 中，闭包存在的意义就是让我们可以间接访问函数内部的变量。经典面试题：循环中使用闭包解决 var 定义函数的问题
for (var i = 1; i <= 5; i++) {setTimeout(function timer() {console.log(i)}, i * 1000)
}首先因为 setTimeout 是个异步函数，所以会先把循环全部执行完毕，这时候 i 就是 6 了，所以会输出一堆 6。解决办法有三种：
- 第一种是使用闭包的方式
for (var i = 1; i <= 5; i++) { ;(function(j) { setTimeout(function timer() { console.log(j) }, j * 1000) })(i)}在上述代码中，首先使用了立即执行函数将 i 传入函数内部，这个时候值就被固定在了参数 j 上面不会改变，当下次执行 timer 这个闭包的时候，就可以使用外部函数的变量 j，从而达到目的。
- 第二种就是使用
setTimeout的第三个参数，这个参数会被当成timer函数的参数传入。
for (var i = 1; i <= 5; i++) {setTimeout(function timer(j) {console.log(j)},i * 1000,i)
}- 第三种就是使用
let定义i了来解决问题了，这个也是最为推荐的方式
for (let i = 1; i <= 5; i++) {setTimeout(function timer() {console.log(i)}, i * 1000)
}Unicode、UTF-8、UTF-16、UTF-32的区别？
（1）Unicode
在说Unicode之前需要先了解一下ASCII码：ASCII 码（American Standard Code for Information Interchange）称为美国标准信息交换码。
- 它是基于拉丁字母的一套电脑编码系统。
- 它定义了一个用于代表常见字符的字典。
- 它包含了"A-Z"(包含大小写)，数据"0-9" 以及一些常见的符号。
- 它是专门为英语而设计的，有128个编码，对其他语言无能为力
ASCII码可以表示的编码有限，要想表示其他语言的编码，还是要使用Unicode来表示，可以说Unicode是ASCII 的超集。
Unicode全称 Unicode Translation Format，又叫做统一码、万国码、单一码。Unicode 是为了解决传统的字符编码方案的局限而产生的，它为每种语言中的每个字符设定了统一并且唯一的二进制编码，以满足跨语言、跨平台进行文本转换、处理的要求。
Unicode的实现方式（也就是编码方式）有很多种，常见的是UTF-8、UTF-16、UTF-32和USC-2。
（2）UTF-8
UTF-8是使用最广泛的Unicode编码方式，它是一种可变长的编码方式，可以是1—4个字节不等，它可以完全兼容ASCII码的128个字符。
注意： UTF-8 是一种编码方式，Unicode是一个字符集合。
UTF-8的编码规则：
- 对于单字节的符号，字节的第一位为0，后面的7位为这个字符的
Unicode编码，因此对于英文字母，它的Unicode编码和ACSII编码一样。 - 对于n字节的符号，第一个字节的前n位都是1，第n+1位设为0，后面字节的前两位一律设为10，剩下的没有提及的二进制位，全部为这个符号的
Unicode码 。
来看一下具体的Unicode编号范围与对应的UTF-8二进制格式 ：
| 编码范围（编号对应的十进制数） | 二进制格式 |
|---|---|
| 0x00—0x7F （0-127） | 0xxxxxxx |
| 0x80—0x7FF （128-2047） | 110xxxxx 10xxxxxx |
| 0x800—0xFFFF （2048-65535） | 1110xxxx 10xxxxxx 10xxxxxx |
| 0x10000—0x10FFFF （65536以上） | 11110xxx 10xxxxxx 10xxxxxx 10xxxxxx |
那该如何通过具体的Unicode编码，进行具体的UTF-8编码呢？步骤如下：
- 找到该
Unicode编码的所在的编号范围，进而找到与之对应的二进制格式 - 将
Unicode编码转换为二进制数（去掉最高位的0） - 将二进制数从右往左一次填入二进制格式的
X中，如果有X未填，就设为0
来看一个实际的例子：
“马” 字的Unicode编码是：0x9A6C，整数编号是39532 （1）首选确定了该字符在第三个范围内，它的格式是 1110xxxx 10xxxxxx 10xxxxxx （2）39532对应的二进制数为1001 1010 0110 1100 （3）将二进制数填入X中，结果是：11101001 10101001 10101100
（3）UTF-16
1. 平面的概念
在了解UTF-16之前，先看一下平面的概念： Unicode编码中有很多很多的字符，它并不是一次性定义的，而是分区进行定义的，每个区存放65536（216）个字符，这称为一个平面，目前总共有17 个平面。
最前面的一个平面称为基本平面，它的码点从0 — 216-1，写成16进制就是U+0000 — U+FFFF，那剩下的16个平面就是辅助平面，码点范围是 U+10000—U+10FFFF。
2. UTF-16 概念：
UTF-16也是Unicode编码集的一种编码形式，把Unicode字符集的抽象码位映射为16位长的整数（即码元）的序列，用于数据存储或传递。Unicode字符的码位需要1个或者2个16位长的码元来表示，因此UTF-16也是用变长字节表示的。
3. UTF-16 编码规则：
- 编号在
U+0000—U+FFFF的字符（常用字符集），直接用两个字节表示。 - 编号在
U+10000—U+10FFFF之间的字符，需要用四个字节表示。
4. 编码识别
那么问题来了，当遇到两个字节时，怎么知道是把它当做一个字符还是和后面的两个字节一起当做一个字符呢？
UTF-16 编码肯定也考虑到了这个问题，在基本平面内，从 U+D800 — U+DFFF 是一个空段，也就是说这个区间的码点不对应任何的字符，因此这些空段就可以用来映射辅助平面的字符。
辅助平面共有 220 个字符位，因此表示这些字符至少需要 20 个二进制位。UTF-16 将这 20 个二进制位分成两半，前 10 位映射在 U+D800 — U+DBFF，称为高位（H），后 10 位映射在 U+DC00 — U+DFFF，称为低位（L）。这就相当于，将一个辅助平面的字符拆成了两个基本平面的字符来表示。
因此，当遇到两个字节时，发现它的码点在 U+D800 —U+DBFF之间，就可以知道，它后面的两个字节的码点应该在 U+DC00 — U+DFFF 之间，这四个字节必须放在一起进行解读。
5. 举例说明
以 “
1.值类型和引用类型的区别 //值类型 let a = 100 let b = a a = 200 console.log(b) //100 //引用类型 let a = { age: 20 } le ... 写在前面 本文面向中高级Python开发,太基本的题目不收录. 本文只涉及Python相关的面试题,关于网络.MySQL.算法等其他面试必考题会另外开专题整理. 不是单纯的提供答案,抵制八股文!! 更 ... 由浅入深逐个击破 JS常考面试题(上篇) 1. 介绍一下JS的基本数据类型,值是如何存储的? JavaScript一共有8种数据类型,其中有7种基本数据类型:Undefined.Null.Boolea ... 最近假期的原因,决定在chat开了这门课,希望对你有帮助. 主要总结汇总了 PHP 面试过程中最爱问的几道面试题.这些面试题可以很好的帮助面试者准备,并让你在面试过程中很好的回答这些面试题,轻松拿下 ... 前端面试-CSS面试题汇总 博客说明文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 1.flex常见面试题 Flex 是 Flexible ... 计算机网络基础常考面试题总结 1.OSI,TCP/IP,五层协议的体系结构,以及各层协议 答:OSI分层 (7层):物理层.数据链路层.网络层.传输层.会话层.表示层.应用层. TCP/IP分层(4层 ... 操作系统之常考面试题 目录: 操作系统概述 进程的描述与控制 存储器管理 处理调度与死锁 注:在牛客上复习java摘录的,便于自己复习. 地址连接:https://www.nowcoder.com/t ... 目录: 目录: HTML&CSS篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 2.每个 HTML 文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗? 3 ... JS 异步编程及常考面试题 并发(concurrency)和并行(parallelism)区别 涉及面试题:并发与并行的区别? 异步和这小节的知识点其实并不是一个概念,但是这两个名词确实是很多人都常会 ...腾讯前端常考面试题汇总相关推荐
最新文章
热门文章