对 this 对象的理解
this 是执行上下文中的一个属性，它指向最后一次调用这个方法的对象。在实际开发中，this 的指向可以通过四种调用模式来判断。
第一种是函数调用模式，当一个函数不是一个对象的属性时，直接作为函数来调用时，this 指向全局对象。
第二种是方法调用模式，如果一个函数作为一个对象的方法来调用时，this 指向这个对象。
第三种是构造器调用模式，如果一个函数用 new 调用时，函数执行前会新创建一个对象，this 指向这个新创建的对象。
第四种是 apply 、 call 和 bind 调用模式，这三个方法都可以显示的指定调用函数的 this 指向。其中 apply 方法接收两个参数：一个是 this 绑定的对象，一个是参数数组。call 方法接收的参数，第一个是 this 绑定的对象，后面的其余参数是传入函数执行的参数。也就是说，在使用 call() 方法时，传递给函数的参数必须逐个列举出来。bind 方法通过传入一个对象，返回一个 this 绑定了传入对象的新函数。这个函数的 this 指向除了使用 new 时会被改变，其他情况下都不会改变。
这四种方式，使用构造器调用模式的优先级最高，然后是 apply、call 和 bind 调用模式，然后是方法调用模式，然后是函数调用模式。
为什么需要浏览器缓存？
对于浏览器的缓存，主要针对的是前端的静态资源，最好的效果就是，在发起请求之后，拉取相应的静态资源，并保存在本地。如果服务器的静态资源没有更新，那么在下次请求的时候，就直接从本地读取即可，如果服务器的静态资源已经更新，那么我们再次请求的时候，就到服务器拉取新的资源，并保存在本地。这样就大大的减少了请求的次数，提高了网站的性能。这就要用到浏览器的缓存策略了。
所谓的浏览器缓存指的是浏览器将用户请求过的静态资源，存储到电脑本地磁盘中，当浏览器再次访问时，就可以直接从本地加载，不需要再去服务端请求了。
使用浏览器缓存，有以下优点：
减少了服务器的负担，提高了网站的性能
加快了客户端网页的加载速度
减少了多余网络数据传输
代码输出结果
var x = 3;var y = 4;var obj = { x: 1, y: 6, getX: function() { var x = 5; return function() { return this.x; }(); }, getY: function() { var y = 7; return this.y; }}console.log(obj.getX()) // 3console.log(obj.getY()) // 6
复制代码
输出结果：3 6
解析：
我们知道，匿名函数的 this 是指向全局对象的，所以 this 指向 window，会打印出 3；
getY 是由 obj 调用的，所以其 this 指向的是 obj 对象，会打印出 6。
什么是作用域链？
首先要了解作用域链，当访问一个变量时，编译器在执行这段代码时，会首先从当前的作用域中查找是否有这个标识符，如果没有找到，就会去父作用域查找，如果父作用域还没找到继续向上查找，直到全局作用域为止,，而作用域链，就是有当前作用域与上层作用域的一系列变量对象组成，它保证了当前执行的作用域对符合访问权限的变量和函数的有序访问。
call/apply/bind 的实现
call
描述：使用 一个指定的 this 值(默认为 window) 和 一个或多个参数 来调用一个函数。
语法：function.call(thisArg, arg1, arg2, ...)
核心思想：
调用 call 的可能不是函数
this 可能传入 null
传入不固定个数的参数
给对象绑定函数并调用
删除绑定的函数
函数可能有返回值
实现：
Function.prototype.call1 = function(context, ...args) { if(typeof this !== "function") { throw new TypeError("this is not a function"); } context = context || window; // 如果传入的是null, 则指向window let fn = Symbol('fn'); // 创造唯一的key值,作为构造的context内部方法名 context[fn] = this; // 为 context 绑定原函数(this) let res = context[fn](...args); // 调用原函数并传参, 保存返回值用于call返回 delete context[fn]; // 删除对象中的函数, 不能修改对象 return res;}
复制代码
apply
描述：与 call 类似，唯一的区别就是 call 是传入不固定个数的参数，而 apply 是传入一个参数数组或类数组。
实现：
Function.prototype.apply1 = function(context, arr) { if(typeof this !== "function") { throw new TypeError("this is not a function"); } context = context || window; // 如果传入的是null, 则指向window let fn = Symbol('fn'); // 创造唯一的key值，作为构造的context内部方法名 context[fn] = this; // 为 context 绑定原函数(this) let res; // 判断是否传入的数组是否为空 if(!arr) { res = context[fn](); } else { res = context[fn](...arr); // 调用原函数并传参, 保存返回值用于call返回 } delete context[fn]; // 删除对象中的函数, 不能修改对象 return res;}
复制代码
bind
描述：bind 方法会创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。
核心思想:
实现：
Function.prototype.bind1 = function(context, ...args) { if (typeof that !== "function") { throw new TypeError("this is not function"); } let that = this; // 保存原函数（this） return function F(...innerArgs) { // 判断是否是 new 构造函数 // 由于这里是调用的 call 方法，因此不需要判断 context 是否为空 return that.call(this instanceof F ? this : context, ...args, ...innerArgs); }}
复制代码
new 实现
描述：new 运算符用来创建用户自定义的对象类型的实例或者具有构造函数的内置对象的实例。
核心思想:
步骤：使用new命令时，它后面的函数依次执行下面的步骤:
创建一个空对象，作为将要返回的对象实例。
将这个空对象的隐式原型(__proto__)，指向构造函数的prototype属性。
让函数内部的this关键字指向这个对象。开始执行构造函数内部的代码（为这个新对象添加属性）。
判断函数的返回值类型，如果是值类型，返回创建的对象。如果是引用类型，就返回这个引用类型的对象。
实现：
// 写法一：function myNew() { // 将 arguments 对象转为数组 let args = [].slice.call(arguments); // 取出构造函数 let constructor = args.shift();
// 创建一个空对象，继承构造函数的 prototype 属性 let obj = {}; obj.__proto__ = constructor.prototype;
// 执行构造函数并将 this 绑定到新创建的对象上 let res = constructor.call(obj, ...args); // let res = constructor.apply(obj, args);
// 判断构造函数执行返回的结果。如果返回结果是引用类型，就直接返回，否则返回 obj 对象 return (typeof res === "object" && res !== null) ? res : obj;}
// 写法二：constructor：构造函数， ...args：构造函数参数function myNew(constructor, ...args) { // 生成一个空对象,继承构造函数的 prototype 属性 let obj = Object.create(constructor.prototype);
// 执行构造函数并将 this 绑定到新创建的对象上 let res = constructor.call(obj, ...args); // let res = constructor.apply(obj, args);
// 判断构造函数执行返回的结果。如果返回结果是引用类型，就直接返回，否则返回 obj 对象 return (typeof res === "object" && res !== null) ? res : obj;}
复制代码
对事件循环的理解
因为 js 是单线程运行的，在代码执行时，通过将不同函数的执行上下文压入执行栈中来保证代码的有序执行。在执行同步代码时，如果遇到异步事件，js 引擎并不会一直等待其返回结果，而是会将这个事件挂起，继续执行执行栈中的其他任务。当异步事件执行完毕后，再将异步事件对应的回调加入到一个任务队列中等待执行。任务队列可以分为宏任务队列和微任务队列，当当前执行栈中的事件执行完毕后，js 引擎首先会判断微任务队列中是否有任务可以执行，如果有就将微任务队首的事件压入栈中执行。当微任务队列中的任务都执行完成后再去执行宏任务队列中的任务。
Event Loop 执行顺序如下所示：
参考 前端进阶面试题详细解答
JS 隐式转换，显示转换
一般非基础类型进行转换时会先调用 valueOf，如果 valueOf 无法返回基本类型值，就会调用 toString
字符串和数字
布尔值到数字
1 + true = 2
1 + false = 1
转换为布尔值
for 中第二个
while
if
三元表达式
|| （逻辑或） && （逻辑与）左边的操作数
符号
不能被转换为数字
能被转换为布尔值（都是 true）
可以被转换成字符串 "Symbol(cool)"
宽松相等和严格相等
宽松相等允许进行强制类型转换，而严格相等不允许
字符串与数字
转换为数字然后比较
其他类型与布尔类型
对象与非对象
假值列表
undefined
null
false
+0, -0, NaN
""
回流与重绘的概念及触发条件
（1）回流
当渲染树中部分或者全部元素的尺寸、结构或者属性发生变化时，浏览器会重新渲染部分或者全部文档的过程就称为回流。
下面这些操作会导致回流：
页面的首次渲染
浏览器的窗口大小发生变化
元素的内容发生变化
元素的尺寸或者位置发生变化
元素的字体大小发生变化
激活 CSS 伪类
查询某些属性或者调用某些方法
添加或者删除可见的 DOM 元素
在触发回流（重排）的时候，由于浏览器渲染页面是基于流式布局的，所以当触发回流时，会导致周围的 DOM 元素重新排列，它的影响范围有两种：
（2）重绘
当页面中某些元素的样式发生变化，但是不会影响其在文档流中的位置时，浏览器就会对元素进行重新绘制，这个过程就是重绘。
下面这些操作会导致回流：
color、background 相关属性：background-color、background-image 等
outline 相关属性：outline-color、outline-width 、text-decoration
border-radius、visibility、box-shadow
注意： 当触发回流时，一定会触发重绘，但是重绘不一定会引发回流。
数组去重
ES5 实现：
function unique(arr) { var res = arr.filter(function(item, index, array) { return array.indexOf(item) === index }) return res}
复制代码
ES6 实现：
var unique = arr => [...new Set(arr)]
复制代码
基于 Localstorage 设计一个 1M 的缓存系统，需要实现缓存淘汰机制
设计思路如下：
存储的每个对象需要添加两个属性：分别是过期时间和存储时间。
利用一个属性保存系统中目前所占空间大小，每次存储都增加该属性。当该属性值大于 1M 时，需要按照时间排序系统中的数据，删除一定量的数据保证能够存储下目前需要存储的数据。
每次取数据时，需要判断该缓存数据是否过期，如果过期就删除。
以下是代码实现，实现了思路，但是可能会存在 Bug，但是这种设计题一般是给出设计思路和部分代码，不会需要写出一个无问题的代码
class Store { constructor() { let store = localStorage.getItem('cache') if (!store) { store = { maxSize: 1024 * 1024, size: 0 } this.store = store } else { this.store = JSON.parse(store) } } set(key, value, expire) { this.store[key] = { date: Date.now(), expire, value } let size = this.sizeOf(JSON.stringify(this.store[key])) if (this.store.maxSize < size + this.store.size) { console.log('超了-----------'); var keys = Object.keys(this.store); // 时间排序 keys = keys.sort((a, b) => { let item1 = this.store[a], item2 = this.store[b]; return item2.date - item1.date; }); while (size + this.store.size > this.store.maxSize) { let index = keys[keys.length - 1] this.store.size -= this.sizeOf(JSON.stringify(this.store[index])) delete this.store[index] } } this.store.size += size
localStorage.setItem('cache', JSON.stringify(this.store)) } get(key) { let d = this.store[key] if (!d) { console.log('找不到该属性'); return } if (d.expire > Date.now) { console.log('过期删除'); delete this.store[key] localStorage.setItem('cache', JSON.stringify(this.store)) } else { return d.value } } sizeOf(str, charset) { var total = 0, charCode, i, len; charset = charset ? charset.toLowerCase() : ''; if (charset === 'utf-16' || charset === 'utf16') { for (i = 0, len = str.length; i < len; i++) { charCode = str.charCodeAt(i); if (charCode <= 0xffff) { total += 2; } else { total += 4; } } } else { for (i = 0, len = str.length; i < len; i++) { charCode = str.charCodeAt(i); if (charCode <= 0x007f) { total += 1; } else if (charCode <= 0x07ff) { total += 2; } else if (charCode <= 0xffff) { total += 3; } else { total += 4; } } } return total; }}
复制代码
什么是原型什么是原型链?
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body>
</body><script> function Person () { } var person = new Person(); person.name = 'Kevin'; console.log(person.name) // Kevin
// prototype function Person () { } Person.prototype.name = 'Kevin'; var person1 = new Person(); var person2 = new Person(); console.log(person1.name)// Kevin console.log(person2.name)// Kevin
// __proto__ function Person () { } var person = new Person(); console.log(person.__proto__ === Person.prototype) // true
//constructor function Person() { } console.log(Person === Person.prototype.constructor) // true
//综上所述 function Person () { } var person = new Person() console.log(person.__proto__ == Person.prototype) // true console.log(Person.prototype.constructor == Person) // true //顺便学习一下ES5得方法,可以获得对象得原型 console.log(Object.getPrototypeOf(person) === Person.prototype) // true
//实例与原型 function Person () { } Person.prototype.name = 'Kevin'; var person = new Person(); person.name = 'Daisy'; console.log(person.name) // Daisy delete person.name; console.log(person.name) // Kevin
//原型得原型 var obj = new Object(); obj.name = 'Kevin', console.log(obj.name) //Kevin
//原型链 console.log(Object.prototype.__proto__ === null) //true // null 表示"没用对象" 即该处不应该有值
// 补充 function Person() { } var person = new Person() console.log(person.constructor === Person) // true //当获取person.constructor时，其实person中并没有constructor属性,当不能读取到constructor属性时,会从person的原型 //也就是Person.prototype中读取时,正好原型中有该属性,所以 person.constructor === Person.prototype.constructor
//__proto__ //其次是__proto__，绝大部分浏览器都支持这个非标准的方法访问原型，然而它并不存在于Person.prototype中，实际上，它 // 是来自与Object.prototype,与其说是一个属性，不如说是一个getter/setter,当使用obj.__proto__时，可以理解成返回了 // Object.getPrototypeOf(obj) 总结： 1、当一个对象查找属性和方法时会从自身查找,如果查找不到则会通过__proto__指向被实例化的构造函数的prototype 2、隐式原型也是一个对象,是指向我们构造函数的原型 3、除了最顶层的Object对象没有__proto_，其他所有的对象都有__proto__,这是隐式原型 4、隐式原型__proto__的作用是让对象通过它来一直往上查找属性或方法，直到找到最顶层的Object的__proto__属性，它的值是null,这个查找的过程就是原型链
</script></html>
复制代码
说一下 for...in 和 for...of 的区别?
for...of遍历获取的是对象的键值, for...in获取的是对象的键名;for...in会遍历对象的整个原型链, 性能非常差不推荐使用,而for...of只遍历当前对象不会遍历原型链;对于数组的遍历,for...in会返回数组中所有可枚举的属性(包括原型链上可枚举的属性),for...of只返回数组的下标对应的属性值;总结：for...in循环主要是为了遍历对象而生,不适用遍历数组; for....of循环可以用来遍历数组、类数组对象、字符串、Set、Map以及Generator对象
复制代码
Set,Map 解构
ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。 Set 本身是一个构造函数，用来生成 Set 数据结构。
ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。
复制代码
浏览器渲染优化
（1）针对 JavaScript： JavaScript 既会阻塞 HTML 的解析，也会阻塞 CSS 的解析。因此我们可以对 JavaScript 的加载方式进行改变，来进行优化：
（1）尽量将 JavaScript 文件放在 body 的最后
（2） body 中间尽量不要写<script>标签
（3）<script>标签的引入资源方式有三种，有一种就是我们常用的直接引入，还有两种就是使用 async 属性和 defer 属性来异步引入，两者都是去异步加载外部的 JS 文件，不会阻塞 DOM 的解析（尽量使用异步加载）。三者的区别如下：
script 立即停止页面渲染去加载资源文件，当资源加载完毕后立即执行 js 代码，js 代码执行完毕后继续渲染页面；
async 是在下载完成之后，立即异步加载，加载好后立即执行，多个带 async 属性的标签，不能保证加载的顺序；
defer 是在下载完成之后，立即异步加载。加载好后，如果 DOM 树还没构建好，则先等 DOM 树解析好再执行；如果 DOM 树已经准备好，则立即执行。多个带 defer 属性的标签，按照顺序执行。
（2）针对 CSS：使用 CSS 有三种方式：使用 link、@import、内联样式，其中 link 和 @import 都是导入外部样式。它们之间的区别：
外部样式如果长时间没有加载完毕，浏览器为了用户体验，会使用浏览器会默认样式，确保首次渲染的速度。所以 CSS 一般写在 headr 中，让浏览器尽快发送请求去获取 css 样式。
所以，在开发过程中，导入外部样式使用 link，而不用 @import。如果 css 少，尽可能采用内嵌样式，直接写在 style 标签中。
（3）针对 DOM 树、CSSOM 树： 可以通过以下几种方式来减少渲染的时间：
（4）减少回流与重绘：
操作 DOM 时，尽量在低层级的 DOM 节点进行操作
不要使用table布局， 一个小的改动可能会使整个table进行重新布局
使用 CSS 的表达式
不要频繁操作元素的样式，对于静态页面，可以修改类名，而不是样式。
使用 absolute 或者 fixed，使元素脱离文档流，这样他们发生变化就不会影响其他元素
避免频繁操作 DOM，可以创建一个文档片段documentFragment，在它上面应用所有 DOM 操作，最后再把它添加到文档中
将元素先设置display: none，操作结束后再把它显示出来。因为在 display 属性为 none 的元素上进行的 DOM 操作不会引发回流和重绘。
将 DOM 的多个读操作（或者写操作）放在一起，而不是读写操作穿插着写。这得益于浏览器的渲染队列机制。
浏览器针对页面的回流与重绘，进行了自身的优化——渲染队列
浏览器会将所有的回流、重绘的操作放在一个队列中，当队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会对队列进行批处理。这样就会让多次的回流、重绘变成一次回流重绘。
将多个读操作（或者写操作）放在一起，就会等所有的读操作进入队列之后执行，这样，原本应该是触发多次回流，变成了只触发一次回流。
代码输出结果
Promise.reject('err!!!') .then((res) => { console.log('success', res) }, (err) => { console.log('error', err) }).catch(err => { console.log('catch', err) })
复制代码
输出结果如下：
我们知道，.then函数中的两个参数：
第一个参数是用来处理 Promise 成功的函数
第二个则是处理失败的函数
也就是说Promise.resolve('1')的值会进入成功的函数，Promise.reject('2')的值会进入失败的函数。
在这道题中，错误直接被then的第二个参数捕获了，所以就不会被catch捕获了，输出结果为：error err!!!'
但是，如果是像下面这样：
Promise.resolve() .then(function success (res) { throw new Error('error!!!') }, function fail1 (err) { console.log('fail1', err) }).catch(function fail2 (err) { console.log('fail2', err) })
复制代码
在then的第一参数中抛出了错误，那么他就不会被第二个参数不活了，而是被后面的catch捕获到。
如何⽤webpack 来优化前端性能？
⽤webpack 优化前端性能是指优化 webpack 的输出结果，让打包的最终结果在浏览器运⾏快速⾼效。
压缩代码：删除多余的代码、注释、简化代码的写法等等⽅式。可以利⽤webpack 的 UglifyJsPlugin 和 ParallelUglifyPlugin 来压缩 JS⽂件， 利⽤ cssnano （css-loader?minimize）来压缩 css
利⽤CDN 加速: 在构建过程中，将引⽤的静态资源路径修改为 CDN 上对应的路径。可以利⽤webpack 对于 output 参数和各 loader 的 publicPath 参数来修改资源路径
Tree Shaking: 将代码中永远不会⾛到的⽚段删除掉。可以通过在启动 webpack 时追加参数 --optimize-minimize 来实现
Code Splitting: 将代码按路由维度或者组件分块(chunk),这样做到按需加载,同时可以充分利⽤浏览器缓存
提取公共第三⽅库: SplitChunksPlugin 插件来进⾏公共模块抽取,利⽤浏览器缓存可以⻓期缓存这些⽆需频繁变动的公共代码
实现有并行限制的 Promise 调度器
题目描述:JS 实现一个带并发限制的异步调度器 Scheduler，保证同时运行的任务最多有两个
addTask(1000,"1"); addTask(500,"2"); addTask(300,"3"); addTask(400,"4"); 的输出顺序是：2 3 1 4
整个的完整执行流程：
一开始1、2两个任务开始执行500ms时，2任务执行完毕，输出2，任务3开始执行800ms时，3任务执行完毕，输出3，任务4开始执行1000ms时，1任务执行完毕，输出1，此时只剩下4任务在执行1200ms时，4任务执行完毕，输出4
复制代码
实现代码如下:
class Scheduler { constructor(limit) { this.queue = []; this.maxCount = limit; this.runCounts = 0; } add(time, order) { const promiseCreator = () => { return new Promise((resolve, reject) => { setTimeout(() => { console.log(order); resolve(); }, time); }); }; this.queue.push(promiseCreator); } taskStart() { for (let i = 0; i < this.maxCount; i++) { this.request(); } } request() { if (!this.queue || !this.queue.length || this.runCounts >= this.maxCount) { return; } this.runCounts++; this.queue .shift()() .then(() => { this.runCounts--; this.request(); }); }}const scheduler = new Scheduler(2);const addTask = (time, order) => { scheduler.add(time, order);};addTask(1000, "1");addTask(500, "2");addTask(300, "3");addTask(400, "4");scheduler.taskStart();
复制代码
数组去重
实现代码如下:
function uniqueArr(arr) { return [...new Set(arr)];}
复制代码
为什么 0.1 + 0.2 != 0.3，请详述理由
因为 JS 采用 IEEE 754 双精度版本（64 位），并且只要采用 IEEE 754 的语言都有该问题。
我们都知道计算机表示十进制是采用二进制表示的，所以 0.1 在二进制表示为
// (0011) 表示循环0.1 = 2^-4 * 1.10011(0011)
复制代码
那么如何得到这个二进制的呢，我们可以来演算下
小数算二进制和整数不同。乘法计算时，只计算小数位，整数位用作每一位的二进制，并且得到的第一位为最高位。所以我们得出 0.1 = 2^-4 * 1.10011(0011)，那么 0.2 的演算也基本如上所示，只需要去掉第一步乘法，所以得出 0.2 = 2^-3 * 1.10011(0011)。
回来继续说 IEEE 754 双精度。六十四位中符号位占一位，整数位占十一位，其余五十二位都为小数位。因为 0.1 和 0.2 都是无限循环的二进制了，所以在小数位末尾处需要判断是否进位（就和十进制的四舍五入一样）。
所以 2^-4 * 1.10011...001 进位后就变成了 2^-4 * 1.10011(0011 * 12次)010 。那么把这两个二进制加起来会得出 2^-2 * 1.0011(0011 * 11次)0100 , 这个值算成十进制就是 0.30000000000000004
下面说一下原生解决办法，如下代码所示
parseFloat((0.1 + 0.2).toFixed(10))
复制代码
如何阻止事件冒泡
评论