什么是提升？什么是暫時(shí)性死區(qū)？var、let 及 const 區(qū)別？

• 當(dāng)我們?cè)谝粋€(gè)作用域使用var聲明一個(gè)變量的時(shí)候，會(huì)首先聲明這個(gè)變量在當(dāng)前作用域（undefined）的最上面，然后在進(jìn)行賦值。

console.log(a) // undefinedvar a = 1; 復(fù)制代碼

• var 聲明的變量會(huì)發(fā)生提升的情況，其實(shí)不僅變量會(huì)提升函數(shù)也會(huì)被提升。并且函數(shù)提升（聲明加定義同時(shí)完成）優(yōu)先于變量提升。

console.log(a) // ? a() {}function a() {}var a = 1 復(fù)制代碼

• let 和 const 聲明變量，變量并不會(huì)被掛載到 window 上。

var a = 1let b = 1const c = 1console.log(window.b) // undefinedconsole.log(window. c) // undefinedfunction test(){console.log(a) // 報(bào)錯(cuò) a is not definedlet a}test() 復(fù)制代碼

• 使用let、const聲明變量的時(shí)候，會(huì)存在暫時(shí)性死區(qū) 也就是說(shuō)聲明之前是無(wú)法使用變量的 會(huì)報(bào)錯(cuò)。

原型如何實(shí)現(xiàn)繼承？Class 如何實(shí)現(xiàn)繼承？Class 本質(zhì)是什么？

組合繼承(call+原型繼承)

子類會(huì)存在父類的公有屬性和私有屬性。

function Parent(value) {this.val = value}Parent.prototype.getValue = function() {console.log(this.val)}function Child(value) {Parent.call(this, value)}Child.prototype = new Parent()const child = new Child(1)child.getValue() // 1child instanceof Parent // true 復(fù)制代碼

寄生組合式繼承

父類的原型賦值給了子類，并且將構(gòu)造函數(shù)設(shè)置為子類，這樣既解決了無(wú)用的父類屬性問(wèn)題，還能正確的找到子類的構(gòu)造函數(shù)

function Parent(value) {this.val = value}Parent.prototype.getValue = function() {console.log(this.val)}function Child(value) {Parent.call(this, value)}Child.prototype = Object.create(Parent.prototype, {constructor: {value: Child,enumerable: false,writable: true,configurable: true}})const child = new Child(1)child.getValue() // 1child instanceof Parent // true 復(fù)制代碼

class 繼承（class的本質(zhì)就是函數(shù)）

class 實(shí)現(xiàn)繼承的核心在于使用 extends 表明繼承自哪個(gè)父類，并且在子類構(gòu)造函數(shù)中必須調(diào)用 super(super相當(dāng)于調(diào)用父類的構(gòu)造函數(shù))

class Parent {constructor(value) {this.val = value}getValue() {console.log(this.val)}}class Child extends Parent {constructor(value) {super(value)this.val = value}}let child = new Child(1)child.getValue() // 1child instanceof Parent // true 復(fù)制代碼

為什么要使用模塊化？都有哪幾種方式可以實(shí)現(xiàn)模塊化，各有什么特點(diǎn)？

模塊化的好處

• 解決命名沖突
• 提供復(fù)用性
• 提高代碼可維護(hù)性

立即執(zhí)行函數(shù)

(function(globalVariable){globalVariable.test = function() {}// ... 聲明各種變量、函數(shù)都不會(huì)污染全局作用域})(globalVariable) 復(fù)制代碼

AMD(requireJs)和CMD(seaJs)

// AMD 依賴前置define(['./a', './b'], function(a, b) {// 加載模塊完畢可以使用a.do()b.do()})// CMD 依賴就近define(function(require, exports, module) {// 加載模塊// 可以把 require 寫(xiě)在函數(shù)體的任意地方實(shí)現(xiàn)延遲加載var a = require('./a')a.doSomething()}) 復(fù)制代碼

CommonJs(modele.exports require)

exports = module.exports ,并且require默認(rèn)導(dǎo)出的是module.exports,所以對(duì)兩者賦值要特別小心。

// a.jsmodule.exports = {a:1}// b.jslet module = require('./a.js')module.a // 1 復(fù)制代碼

ES Module

• CommonJS 支持動(dòng)態(tài)導(dǎo)入，也就是 require(${path}/xx.js)，后者目前不支持，但是已有提案
• CommonJS 是同步導(dǎo)入，因?yàn)橛糜诜?wù)端，文件都在本地，同步導(dǎo)入即使卡住主線程影響也不大。而后者是異步導(dǎo)入，因?yàn)橛糜跒g覽器，需要下載文件，如果也采用同步導(dǎo)入會(huì)對(duì)渲染有很大影響
• CommonJS 在導(dǎo)出時(shí)都是值拷貝，就算導(dǎo)出的值變了，導(dǎo)入的值也不會(huì)改變，所以如果想更新值，必須重新導(dǎo)入一次。但是 ES Module 采用實(shí)時(shí)綁定的方式，導(dǎo)入導(dǎo)出的值都指向同一個(gè)內(nèi)存地址，所以導(dǎo)入值會(huì)跟隨導(dǎo)出值變化
• ES Module 會(huì)編譯成 require/exports 來(lái)執(zhí)行的

// 引入模塊 APIimport XXX from './a.js'import { XXX } from './a.js'// 導(dǎo)出模塊 APIexport function a() {}export default function() {} 復(fù)制代碼

Proxy 可以實(shí)現(xiàn)什么功能？（vue3.0實(shí)現(xiàn)響應(yīng)式完全是采用了proxy，而不是原來(lái)的Object.defineProperty）

// target 代表需要添加代理的對(duì)象，handler 用來(lái)自定義對(duì)象中的操作let p = new Proxy(target, handler) 復(fù)制代碼 // Proxy 來(lái)實(shí)現(xiàn)一個(gè)數(shù)據(jù)響應(yīng)式let onWatch = (obj, setBind, getLogger) => {let handler = {get(target, property, receiver) {getLogger(target, property)return Reflect.get(target, property, receiver)},set(target, property, value, receiver) {setBind(value, property)return Reflect.set(target, property, value)}}return new Proxy(obj, handler)}let obj = { a: 1 }let p = onWatch(obj,(v, property) => {console.log(`監(jiān)聽(tīng)到屬性${property}改變?yōu)?span id="ze8trgl8bvbq" class="hljs-variable">${v}`)},(target, property) => {console.log(`'${property}' = ${target[property]}`)})p.a = 2 // 監(jiān)聽(tīng)到屬性a改變p.a // 'a' = 2 復(fù)制代碼

轉(zhuǎn)載于:https://juejin.im/post/5c74006d6fb9a049e232a69a

總結(jié)

以上是生活随笔為你收集整理的前端面试系列-ES6的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。