溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

字節(jié)跳動(dòng)最愛考的JavaScript 基礎(chǔ)面試題有哪些

發(fā)布時(shí)間:2021-09-30 10:58:16 來源:億速云 閱讀:100 作者:柒染 欄目:web開發(fā)

字節(jié)跳動(dòng)最愛考的JavaScript 基礎(chǔ)面試題有哪些,針對這個(gè)問題,這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答,希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。

注意:每道題前面出現(xiàn)的 (xx) 數(shù)字代表這道題出現(xiàn)的頻次,此 JS 基礎(chǔ)是基于 30+ 篇前端面經(jīng)整理出的問題和對應(yīng)的回答、參考鏈接等。

(2)問:0.1 + 0.2 === 0.3 嘛?為什么?

JavaScirpt 使用 Number 類型來表示數(shù)字(整數(shù)或浮點(diǎn)數(shù)),遵循 IEEE 754  標(biāo)準(zhǔn),通過 64 位來表示一個(gè)數(shù)字(1 + 11 + 52)

  • 1 符號(hào)位,0 表示正數(shù),1 表示負(fù)數(shù) s

  • 11 指數(shù)位(e)

  • 52 尾數(shù),小數(shù)部分(即有效數(shù)字)

最大安全數(shù)字:Number.MAX_SAFE_INTEGER = Math.pow(2, 53) - 1,轉(zhuǎn)換成整數(shù)就是 16 位,所以 0.1 ===  0.1,是因?yàn)橥ㄟ^ toPrecision(16) 去有效位之后,兩者是相等的。

在兩數(shù)相加時(shí),會(huì)先轉(zhuǎn)換成二進(jìn)制,0.1 和 0.2 轉(zhuǎn)換成二進(jìn)制的時(shí)候尾數(shù)會(huì)發(fā)生無限循環(huán),然后進(jìn)行對階運(yùn)算,JS  引擎對二進(jìn)制進(jìn)行截?cái)?,所以造成精度丟失。

所以總結(jié):精度丟失可能出現(xiàn)在進(jìn)制轉(zhuǎn)換和對階運(yùn)算中

參考鏈接

https://juejin.im/post/5b90e00e6fb9a05cf9080dff

(4)問:JS 數(shù)據(jù)類型

基本類型:Number、Boolean、String、null、undefined、symbol(ES6  新增的),BigInt(ES2020) 引用類型:Object,對象子類型(Array,F(xiàn)unction)

參考鏈接

  • https://juejin.im/post/5b2b0a6051882574de4f3d96

  • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Data_structures

問:JS 整數(shù)是怎么表示的?

通過 Number 類型來表示,遵循 IEEE754 標(biāo)準(zhǔn),通過 64 位來表示一個(gè)數(shù)字,(1 + 11 +  52),最大安全數(shù)字是 Math.pow(2, 53) - 1,對于 16 位十進(jìn)制。(符號(hào)位 + 指數(shù)位 + 小數(shù)部分有效位)

問:Number() 的存儲(chǔ)空間是多大?如果后臺(tái)發(fā)送了一個(gè)超過最大自己的數(shù)字怎么辦

Math.pow(2, 53) ,53 為有效數(shù)字,會(huì)發(fā)生截?cái)?,等? JS 能支持的最大數(shù)字。

(4)寫代碼:實(shí)現(xiàn)函數(shù)能夠深度克隆基本類型

淺克?。?/p>

function shallowClone(obj) {   let cloneObj = {};      for (let i in obj) {     cloneObj[i] = obj[i];   }      return cloneObj; }

深克?。?/p>

  • 考慮基礎(chǔ)類型

  • 引用類型

RegExp、Date、函數(shù) 不是 JSON 安全的

會(huì)丟失 constructor,所有的構(gòu)造函數(shù)都指向 Object

破解循環(huán)引用

function deepCopy(obj) {   if (typeof obj === 'object') {     var result = obj.constructor === Array ? [] : {};          for (var i in obj) {       result[i] = typeof obj[i] === 'object' ? deepCopy(obj[i]) : obj[i];     }   } else {     var result = obj;   }      return result; }

問:事件流

事件流是網(wǎng)頁元素接收事件的順序,"DOM2級(jí)事件"規(guī)定的事件流包括三個(gè)階段:事件捕獲階段、處于目標(biāo)階段、事件冒泡階段。首先發(fā)生的事件捕獲,為截獲事件提供機(jī)會(huì)。然后是實(shí)際的目標(biāo)接受事件。最后一個(gè)階段是時(shí)間冒泡階段,可以在這個(gè)階段對事件做出響應(yīng)。雖然捕獲階段在規(guī)范中規(guī)定不允許響應(yīng)事件,但是實(shí)際上還是會(huì)執(zhí)行,所以有兩次機(jī)會(huì)獲取到目標(biāo)對象。

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>事件冒泡</title> </head> <body>     <div>         <p id="parEle">我是父元素    <span id="sonEle">我是子元素</span></p>     </div> </body> </html> <script type="text/javascript"> var sonEle = document.getElementById('sonEle'); var parEle = document.getElementById('parEle');  parEle.addEventListener('click', function () {     alert('父級(jí) 冒泡'); }, false); parEle.addEventListener('click', function () {     alert('父級(jí) 捕獲'); }, true);  sonEle.addEventListener('click', function () {     alert('子級(jí)冒泡'); }, false); sonEle.addEventListener('click', function () {     alert('子級(jí)捕獲'); }, true);  </script>

當(dāng)容器元素及嵌套元素,即在捕獲階段又在冒泡階段調(diào)用事件處理程序時(shí):事件按DOM事件流的順序執(zhí)行事件處理程序:

  • 父級(jí)捕獲

  • 子級(jí)冒泡

  • 子級(jí)捕獲

  • 父級(jí)冒泡

且當(dāng)事件處于目標(biāo)階段時(shí),事件調(diào)用順序決定于綁定事件的書寫順序,按上面的例子為,先調(diào)用冒泡階段的事件處理程序,再調(diào)用捕獲階段的事件處理程序。依次alert出“子集冒泡”,“子集捕獲”。

IE 兼容

  • attchEvent('on' + type, handler)

  • detachEvent('on' + type, handler)

參考鏈接

https://juejin.im/entry/5826ba9d0ce4630056f85e07

問:事件是如何實(shí)現(xiàn)的?

基于發(fā)布訂閱模式,就是在瀏覽器加載的時(shí)候會(huì)讀取事件相關(guān)的代碼,但是只有實(shí)際等到具體的事件觸發(fā)的時(shí)候才會(huì)執(zhí)行。

比如點(diǎn)擊按鈕,這是個(gè)事件(Event),而負(fù)責(zé)處理事件的代碼段通常被稱為事件處理程序(Event  Handler),也就是「啟動(dòng)對話框的顯示」這個(gè)動(dòng)作。

在 Web 端,我們常見的就是 DOM 事件:

  • DOM0 級(jí)事件,直接在 html 元素上綁定 on-event,比如 onclick,取消的話,dom.onclick =  null,同一個(gè)事件只能有一個(gè)處理程序,后面的會(huì)覆蓋前面的。

  • DOM2 級(jí)事件,通過 addEventListener 注冊事件,通過 removeEventListener  來刪除事件,一個(gè)事件可以有多個(gè)事件處理程序,按順序執(zhí)行,捕獲事件和冒泡事件

  • DOM3級(jí)事件,增加了事件類型,比如 UI 事件,焦點(diǎn)事件,鼠標(biāo)事件

參考鏈接

https://zhuanlan.zhihu.com/p/73091706

問:new 一個(gè)函數(shù)發(fā)生了什么

構(gòu)造調(diào)用:

  • 創(chuàng)造一個(gè)全新的對象

  • 這個(gè)對象會(huì)被執(zhí)行 [[Prototype]] 連接,將這個(gè)新對象的 [[Prototype]] 鏈接到這個(gè)構(gòu)造函數(shù).prototype  所指向的對象

  • 這個(gè)新對象會(huì)綁定到函數(shù)調(diào)用的 this

  • 如果函數(shù)沒有返回其他對象,那么 new 表達(dá)式中的函數(shù)調(diào)用會(huì)自動(dòng)返回這個(gè)新對象

問:new 一個(gè)構(gòu)造函數(shù),如果函數(shù)返回 return {} 、 return null , return 1 , return true  會(huì)發(fā)生什么情況?

如果函數(shù)返回一個(gè)對象,那么new 這個(gè)函數(shù)調(diào)用返回這個(gè)函數(shù)的返回對象,否則返回 new 創(chuàng)建的新對象

問:symbol 有什么用處

可以用來表示一個(gè)獨(dú)一無二的變量防止命名沖突。但是面試官問還有嗎?我沒想出其他的用處就直接答我不知道了,還可以利用 symbol  不會(huì)被常規(guī)的方法(除了 Object.getOwnPropertySymbols 外)遍歷到,所以可以用來模擬私有變量。

主要用來提供遍歷接口,布置了 symbol.iterator 的對象才可以使用 for&middot;&middot;&middot;of  循環(huán),可以統(tǒng)一處理數(shù)據(jù)結(jié)構(gòu)。調(diào)用之后回返回一個(gè)遍歷器對象,包含有一個(gè) next 方法,使用 next 方法后有兩個(gè)返回值 value 和 done  分別表示函數(shù)當(dāng)前執(zhí)行位置的值和是否遍歷完畢。

Symbol.for() 可以在全局訪問 symbol

(3)問:閉包是什么?

閉包是指有權(quán)訪問另外一個(gè)函數(shù)作用域中的變量的函數(shù)

JavaScript代碼的整個(gè)執(zhí)行過程,分為兩個(gè)階段,代碼編譯階段與代碼執(zhí)行階段。編譯階段由編譯器完成,將代碼翻譯成可執(zhí)行代碼,這個(gè)階段作用域規(guī)則會(huì)確定。執(zhí)行階段由引擎完成,主要任務(wù)是執(zhí)行可執(zhí)行代碼,執(zhí)行上下文在這個(gè)階段創(chuàng)建。

字節(jié)跳動(dòng)最愛考的JavaScript 基礎(chǔ)面試題有哪些

image.png

什么是作業(yè)域?

ES5 中只存在兩種作用域:全局作用域和函數(shù)作用域。在 JavaScript  中,我們將作用域定義為一套規(guī)則,這套規(guī)則用來管理引擎如何在當(dāng)前作用域以及嵌套子作用域中根據(jù)標(biāo)識(shí)符名稱進(jìn)行變量(變量名或者函數(shù)名)查找

什么是作用域鏈?

首先要了解作用域鏈,當(dāng)訪問一個(gè)變量時(shí),編譯器在執(zhí)行這段代碼時(shí),會(huì)首先從當(dāng)前的作用域中查找是否有這個(gè)標(biāo)識(shí)符,如果沒有找到,就會(huì)去父作用域查找,如果父作用域還沒找到繼續(xù)向上查找,直到全局作用域?yàn)橹?,而作用域鏈,就是有當(dāng)前作用域與上層作用域的一系列變量對象組成,它保證了當(dāng)前執(zhí)行的作用域?qū)Ψ显L問權(quán)限的變量和函數(shù)的有序訪問。

閉包產(chǎn)生的本質(zhì)

當(dāng)前環(huán)境中存在指向父級(jí)作用域的引用

什么是閉包

閉包是一種特殊的對象,它由兩部分組成:執(zhí)行上下文(代號(hào) A),以及在該執(zhí)行上下文中創(chuàng)建的函數(shù) (代號(hào) B),當(dāng) B 執(zhí)行時(shí),如果訪問了 A  中變量對象的值,那么閉包就會(huì)產(chǎn)生,且在 Chrome 中使用這個(gè)執(zhí)行上下文 A 的函數(shù)名代指閉包。

一般如何產(chǎn)生閉包

  • 返回函數(shù)

  • 函數(shù)當(dāng)做參數(shù)傳遞

閉包的應(yīng)用場景

  • 柯里化 bind

  • 模塊

參考文章

https://segmentfault.com/a/1190000012646221

問:NaN 是什么,用 typeof 會(huì)輸出什么?

Not a Number,表示非數(shù)字,typeof NaN === 'number'

(2)問:JS 隱式轉(zhuǎn)換,顯示轉(zhuǎn)換一般非基礎(chǔ)類型進(jìn)行轉(zhuǎn)換

時(shí)會(huì)先調(diào)用 valueOf,如果 valueOf 無法返回基本類型值,就會(huì)調(diào)用  toString

字符串和數(shù)字

  • "+" 操作符,如果有一個(gè)為字符串,那么都轉(zhuǎn)化到字符串然后執(zhí)行字符串拼接

  • "-" 操作符,轉(zhuǎn)換為數(shù)字,相減 (-a, a * 1 a/1) 都能進(jìn)行隱式強(qiáng)制類型轉(zhuǎn)換

[] + {} 和 {} + []

布爾值到數(shù)字

  • 1 + true = 2

  • 1 + false = 1

轉(zhuǎn)換為布爾值

  • for 中第二個(gè)

  • while

  • if

  • 三元表達(dá)式

  • || (邏輯或) && (邏輯與)左邊的操作數(shù)

符號(hào)

  • 不能被轉(zhuǎn)換為數(shù)字

  • 能被轉(zhuǎn)換為布爾值(都是 true)

  • 可以被轉(zhuǎn)換成字符串 "Symbol(cool)"

寬松相等和嚴(yán)格相等

寬松相等允許進(jìn)行強(qiáng)制類型轉(zhuǎn)換,而嚴(yán)格相等不允許

字符串與數(shù)字

轉(zhuǎn)換為數(shù)字然后比較

其他類型與布爾類型

  • 先把布爾類型轉(zhuǎn)換為數(shù)字,然后繼續(xù)進(jìn)行比較

對象與非對象

  • 執(zhí)行對象的 ToPrimitive(對象)然后繼續(xù)進(jìn)行比較

假值列表

  • undefined

  • null

  • false

  • +0, -0, NaN

  • ""

(2)問:了解 this 嘛,bind,call,apply 具體指什么

它們都是函數(shù)的方法

call: Array.prototype.call(this, args1, args2])apply:  Array.prototype.apply(this, [args1, args2]) :ES6 之前用來展開數(shù)組調(diào)用, foo.appy(null,  []),ES6 之后使用 ... 操作符

  • New 綁定 > 顯示綁定 > 隱式綁定 > 默認(rèn)綁定

  • 如果需要使用 bind 的柯里化和 apply 的數(shù)組解構(gòu),綁定到 null,盡可能使用 Object.create(null) 創(chuàng)建一個(gè) DMZ  對象

四條規(guī)則:

  • 默認(rèn)綁定,沒有其他修飾(bind、apply、call),在非嚴(yán)格模式下定義指向全局對象,在嚴(yán)格模式下定義指向 undefined

function foo() {   console.log(this.a);  }  var a = 2; foo();
  • 隱式綁定:調(diào)用位置是否有上下文對象,或者是否被某個(gè)對象擁有或者包含,那么隱式綁定規(guī)則會(huì)把函數(shù)調(diào)用中的 this  綁定到這個(gè)上下文對象。而且,對象屬性鏈只有上一層或者說最后一層在調(diào)用位置中起作用

function foo() {   console.log(this.a); }  var obj = {   a: 2,   foo: foo, }  obj.foo(); // 2
  • 顯示綁定:通過在函數(shù)上運(yùn)行 call 和 apply ,來顯示的綁定 this

function foo() {   console.log(this.a); }  var obj = {   a: 2 };  foo.call(obj);

顯示綁定之硬綁定

function foo(something) {   console.log(this.a, something);      return this.a + something; }  function bind(fn, obj) {   return function() {     return fn.apply(obj, arguments);   }; }  var obj = {   a: 2 }  var bar = bind(foo, obj);

New 綁定,new 調(diào)用函數(shù)會(huì)創(chuàng)建一個(gè)全新的對象,并將這個(gè)對象綁定到函數(shù)調(diào)用的 this。

  • New 綁定時(shí),如果是 new 一個(gè)硬綁定函數(shù),那么會(huì)用 new 新建的對象替換這個(gè)硬綁定 this,

function foo(a) {   this.a = a; }  var bar = new foo(2); console.log(bar.a)

(4)問:手寫 bind、apply、call

  1. // call 

  2.  

  3. Function.prototype.call = function (context, ...args) { 

  4.   context = context || window; 

  5.    

  6.   const fnSymbol = Symbol("fn"); 

  7.   context[fnSymbol] = this; 

  8.    

  9.   context[fnSymbol](...args); 

  10.   delete context[fnSymbol]; 


  1. // apply 

  2.  

  3. Function.prototype.apply = function (context, argsArr) { 

  4.   context = context || window; 

  5.    

  6.   const fnSymbol = Symbol("fn"); 

  7.   context[fnSymbol] = this; 

  8.    

  9.   context[fnSymbol](...argsArr); 

  10.   delete context[fnSymbol]; 


// bind  Function.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];      } }

(3)問:setTimeout(fn, 0)多久才執(zhí)行,Event Loop

setTimeout  按照順序放到隊(duì)列里面,然后等待函數(shù)調(diào)用棧清空之后才開始執(zhí)行,而這些操作進(jìn)入隊(duì)列的順序,則由設(shè)定的延遲時(shí)間來決定

手寫題:Promise 原理

class MyPromise {   constructor(fn) {     this.resolvedCallbacks = [];     this.rejectedCallbacks = [];          this.state = 'PENDING';     this.value = '';          fn(this.resolve.bind(this), this.reject.bind(this));        }      resolve(value) {     if (this.state === 'PENDING') {       this.state = 'RESOLVED';       this.value = value;              this.resolvedCallbacks.map(cb => cb(value));        }   }      reject(value) {     if (this.state === 'PENDING') {       this.state = 'REJECTED';       this.value = value;              this.rejectedCallbacks.map(cb => cb(value));     }   }      then(onFulfilled, onRejected) {     if (this.state === 'PENDING') {       this.resolvedCallbacks.push(onFulfilled);       this.rejectedCallbacks.push(onRejected);            }          if (this.state === 'RESOLVED') {       onFulfilled(this.value);     }          if (this.state === 'REJECTED') {       onRejected(this.value);     }   } }

問:js腳本加載問題,async、defer問題

  • 如果依賴其他腳本和 DOM 結(jié)果,使用 defer

  • 如果與 DOM 和其他腳本依賴不強(qiáng)時(shí),使用 async

參考資料

https://mp.weixin.qq.com/s/pw5lfFeNagmjFj45ygl2dQ

問:如何判斷一個(gè)對象是不是空對象?

Object.keys(obj).length === 0

問: <script src=&rsquo;xxx&rsquo; &rsquo;xxx&rsquo;/>外部js文件先加載還是onload先執(zhí)行,為什么?
onload 是所以加載完成之后執(zhí)行的

問:怎么加事件監(jiān)聽,兩種
onclick 和 addEventListener

問:事件傳播機(jī)制(事件流)
冒泡和捕獲

(4)問:說一下原型鏈和原型鏈的繼承吧

  • 所有普通的 [[Prototype]] 鏈最終都會(huì)指向內(nèi)置的 Object.prototype,其包含了 JavaScript 中許多通用的功能

  • 為什么能創(chuàng)建 “類”,借助一種特殊的屬性:所有的函數(shù)默認(rèn)都會(huì)擁有一個(gè)名為 prototype 的共有且不可枚舉的屬性,它會(huì)指向另外一個(gè)對象,這個(gè)對象通常被稱為函數(shù)的原型

function Person(name) {   this.name = name; }  Person.prototype.constructor = Person
  • 在發(fā)生 new 構(gòu)造函數(shù)調(diào)用時(shí),會(huì)將創(chuàng)建的新對象的 [[Prototype]] 鏈接到 Person.prototype 指向的對象,這個(gè)機(jī)制就被稱為原型鏈繼承

  • 方法定義在原型上,屬性定義在構(gòu)造函數(shù)上

  • 首先要說一下 JS 原型和實(shí)例的關(guān)系:每個(gè)構(gòu)造函數(shù) (constructor)都有一個(gè)原型對象(prototype),這個(gè)原型對象包含一個(gè)指向此構(gòu)造函數(shù)的指針屬性,通過 new 進(jìn)行構(gòu)造函數(shù)調(diào)用生成的實(shí)例,此實(shí)例包含一個(gè)指向原型對象的指針,也就是通過 [[Prototype]] 鏈接到了這個(gè)原型對象

  • 然后說一下 JS 中屬性的查找:當(dāng)我們試圖引用實(shí)例對象的某個(gè)屬性時(shí),是按照這樣的方式去查找的,首先查找實(shí)例對象上是否有這個(gè)屬性,如果沒有找到,就去構(gòu)造這個(gè)實(shí)例對象的構(gòu)造函數(shù)的 prototype 所指向的對象上去查找,如果還找不到,就從這個(gè) prototype 對象所指向的構(gòu)造函數(shù)的 prototype 原型對象上去查找

  • 什么是原型鏈:這樣逐級(jí)查找形似一個(gè)鏈條,且通過  [[Prototype]] 屬性鏈接,所以被稱為原型鏈

  • 什么是原型鏈繼承,類比類的繼承:當(dāng)有兩個(gè)構(gòu)造函數(shù) A 和 B,將一個(gè)構(gòu)造函數(shù) A 的原型對象的,通過其 [[Prototype]] 屬性鏈接到另外一個(gè) B 構(gòu)造函數(shù)的原型對象時(shí),這個(gè)過程被稱之為原型繼承。

標(biāo)準(zhǔn)答案更正確的解釋
什么是原型鏈?

當(dāng)對象查找一個(gè)屬性的時(shí)候,如果沒有在自身找到,那么就會(huì)查找自身的原型,如果原型還沒有找到,那么會(huì)繼續(xù)查找原型的原型,直到找到 Object.prototype 的原型時(shí),此時(shí)原型為 null,查找停止。這種通過 通過原型鏈接的逐級(jí)向上的查找鏈被稱為原型鏈

什么是原型繼承?

一個(gè)對象可以使用另外一個(gè)對象的屬性或者方法,就稱之為繼承。具體是通過將這個(gè)對象的原型設(shè)置為另外一個(gè)對象,這樣根據(jù)原型鏈的規(guī)則,如果查找一個(gè)對象屬性且在自身不存在時(shí),就會(huì)查找另外一個(gè)對象,相當(dāng)于一個(gè)對象可以使用另外一個(gè)對象的屬性和方法了。

參考鏈接
https://zhuanlan.zhihu.com/p/35790971
問:說下對 JS 的了解吧
是基于原型的動(dòng)態(tài)語言,主要獨(dú)特特性有 this、原型和原型鏈。

JS 嚴(yán)格意義上來說分為:語言標(biāo)準(zhǔn)部分(ECMAScript)+ 宿主環(huán)境部分

語言標(biāo)準(zhǔn)部分
2015 年發(fā)布 ES6,引入諸多新特性使得能夠編寫大型項(xiàng)目變成可能,標(biāo)準(zhǔn)自 2015 之后以年號(hào)代號(hào),每年一更

宿主環(huán)境部分
在瀏覽器宿主環(huán)境包括 DOM + BOM 等
在 Node,宿主環(huán)境包括一些文件、數(shù)據(jù)庫、網(wǎng)絡(luò)、與操作系統(tǒng)的交互等
問:數(shù)組能夠調(diào)用的函數(shù)有那些?

  • push

  • pop

  • splice

  • slice

  • shift

  • unshift

  • sort

  • find

  • findIndex

  • map/filter/reduce 等函數(shù)式編程方法

  • 還有一些原型鏈上的方法:toString/valudOf

問:如何判斷數(shù)組類型
Array.isArray

問: 函數(shù)中的arguments是數(shù)組嗎?類數(shù)組轉(zhuǎn)數(shù)組的方法了解一下?
是類數(shù)組,是屬于鴨子類型的范疇,長得像數(shù)組,

... 運(yùn)算符
Array.from
Array.prototype.slice.apply(arguments)
問:用過 TypeScript 嗎?它的作用是什么?
為 JS 添加類型支持,以及提供最新版的 ES 語法的支持,是的利于團(tuán)隊(duì)協(xié)作和排錯(cuò),開發(fā)大型項(xiàng)目

問:PWA使用過嗎?serviceWorker的使用原理是啥?
漸進(jìn)式網(wǎng)絡(luò)應(yīng)用(PWA)是谷歌在2015年底提出的概念?;旧纤闶莣eb應(yīng)用程序,但在外觀和感覺上與原生app類似。支持PWA的網(wǎng)站可以提供脫機(jī)工作、推送通知和設(shè)備硬件訪問等功能。

Service Worker是瀏覽器在后臺(tái)獨(dú)立于網(wǎng)頁運(yùn)行的腳本,它打開了通向不需要網(wǎng)頁或用戶交互的功能的大門?,F(xiàn)在,它們已包括如推送通知和后臺(tái)同步等功能。將來,Service Worker將會(huì)支持如定期同步或地理圍欄等其他功能。本教程討論的核心功能是攔截和處理網(wǎng)絡(luò)請求,包括通過程序來管理緩存中的響應(yīng)。

參考鏈接
https://juejin.im/post/5e26aa785188254c257c462d#heading-8
問:ES6 之前使用 prototype 實(shí)現(xiàn)繼承
Object.create() 會(huì)創(chuàng)建一個(gè) “新” 對象,然后將此對象內(nèi)部的 [[Prototype]] 關(guān)聯(lián)到你指定的對象(Foo.prototype)。Object.create(null) 創(chuàng)建一個(gè)空 [[Prototype]] 鏈接的對象,這個(gè)對象無法進(jìn)行委托。

function Foo(name) {   this.name = name; }  Foo.prototype.myName = function () {   return this.name; }  // 繼承屬性,通過借用構(gòu)造函數(shù)調(diào)用 function Bar(name, label) {   Foo.call(this, name);   this.label = label; }  // 繼承方法,創(chuàng)建備份 Bar.prototype = Object.create(Foo.prototype);  // 必須設(shè)置回正確的構(gòu)造函數(shù),要不然在會(huì)發(fā)生判斷類型出錯(cuò) Bar.prototype.constructor = Bar;   // 必須在上一步之后 Bar.prototype.myLabel = function () {   return this.label; }  var a = new Bar("a", "obj a");  a.myName(); // "a" a.myLabel(); // "obj a"

問:如果一個(gè)構(gòu)造函數(shù),bind了一個(gè)對象,用這個(gè)構(gòu)造函數(shù)創(chuàng)建出的實(shí)例會(huì)繼承這個(gè)對象的屬性嗎?為什么?
不會(huì)繼承,因?yàn)楦鶕?jù) this 綁定四大規(guī)則,new 綁定的優(yōu)先級(jí)高于 bind 顯示綁定,通過 new 進(jìn)行構(gòu)造函數(shù)調(diào)用時(shí),會(huì)創(chuàng)建一個(gè)新對象,這個(gè)新對象會(huì)代替 bind 的對象綁定,作為此函數(shù)的 this,并且在此函數(shù)沒有返回對象的情況下,返回這個(gè)新建的對象

(3)箭頭函數(shù)和普通函數(shù)有啥區(qū)別?箭頭函數(shù)能當(dāng)構(gòu)造函數(shù)嗎?

  1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

  2. 普通函數(shù)通過 function 關(guān)鍵字定義, this 無法結(jié)合詞法作用域使用,在運(yùn)行時(shí)綁定,只取決于函數(shù)的調(diào)用方式,在哪里被調(diào)用,調(diào)用位置。(取決于調(diào)用者,和是否獨(dú)立運(yùn)行)

  3. 箭頭函數(shù)使用被稱為 “胖箭頭” 的操作 => 定義,箭頭函數(shù)不應(yīng)用普通函數(shù) this 綁定的四種規(guī)則,而是根據(jù)外層(函數(shù)或全局)的作用域來決定 this,且箭頭函數(shù)的綁定無法被修改(new 也不行)。

  • 一個(gè)函數(shù)內(nèi)部有兩個(gè)方法:[[Call]] 和 [[Construct]],在通過 new 進(jìn)行函數(shù)調(diào)用時(shí),會(huì)執(zhí)行 [[construct]] 方法,創(chuàng)建一個(gè)實(shí)例對象,然后再執(zhí)行這個(gè)函數(shù)體,將函數(shù)的 this 綁定在這個(gè)實(shí)例對象上

  • 當(dāng)直接調(diào)用時(shí),執(zhí)行 [[Call]] 方法,直接執(zhí)行函數(shù)體

  • 箭頭函數(shù)沒有 [[Construct]] 方法,不能被用作構(gòu)造函數(shù)調(diào)用,當(dāng)使用 new 進(jìn)行函數(shù)調(diào)用時(shí)會(huì)報(bào)錯(cuò)。

  • 箭頭函數(shù)常用于回調(diào)函數(shù)中,包括事件處理器或定時(shí)器

  • 箭頭函數(shù)和 var self = this,都試圖取代傳統(tǒng)的 this 運(yùn)行機(jī)制,將 this 的綁定拉回到詞法作用域

  • 沒有原型、沒有 this、沒有 super,沒有 arguments,沒有 new.target

  • 不能通過 new 關(guān)鍵字調(diào)用

function foo() {   return (a) => {     console.log(this.a);   } }  var obj1 = {   a: 2 }  var obj2 = {   a: 3  }  var bar = foo.call(obj1); bar.call(obj2);

參考資料
https://segmentfault.com/a/1190000015162781
問:知道 ES6 的 Class 嘛?Static 關(guān)鍵字有了解嘛
為這個(gè)類的函數(shù)對象直接添加方法,而不是加在這個(gè)函數(shù)對象的原型對象上

(3)問:事件循環(huán)機(jī)制 (Event Loop)
事件循環(huán)機(jī)制從整體上告訴了我們 JavaScript 代碼的執(zhí)行順序Event Loop即事件循環(huán),是指瀏覽器或Node的一種解決javaScript單線程運(yùn)行時(shí)不會(huì)阻塞的一種機(jī)制,也就是我們經(jīng)常使用異步的原理。

先執(zhí)行宏任務(wù)隊(duì)列,然后執(zhí)行微任務(wù)隊(duì)列,然后開始下一輪事件循環(huán),繼續(xù)先執(zhí)行宏任務(wù)隊(duì)列,再執(zhí)行微任務(wù)隊(duì)列。

  • 宏任務(wù):script/setTimeout/setInterval/setImmediate/ I/O / UI Rendering

  • 微任務(wù):process.nextTick()/Promise

上訴的 setTimeout 和 setInterval 等都是任務(wù)源,真正進(jìn)入任務(wù)隊(duì)列的是他們分發(fā)的任務(wù)。

優(yōu)先級(jí)

  • setTimeout = setInterval 一個(gè)隊(duì)列

  • setTimeout > setImmediate

  • process.nextTick > Promise

for (const macroTask of macroTaskQueue) {     handleMacroTask();       for (const microTask of microTaskQueue) {        handleMicroTask(microTask);     } }

參考鏈接
https://juejin.im/post/59e85eebf265da430d571f89
(2)手寫題:數(shù)組扁平化

function flatten(arr) {   let result = [];    for (let i = 0; i < arr.length; i++) {     if (Array.isArray(arr[i])) {       result = result.concat(flatten(arr[i]));     } else {       result = result.concat(arr[i]);     }   }    return result; }  const a = [1, [2, [3, 4]]]; console.log(flatten(a));

手寫題:實(shí)現(xiàn)柯里化
預(yù)先設(shè)置一些參數(shù)

柯里化是什么:是指這樣一個(gè)函數(shù),它接收函數(shù) A,并且能返回一個(gè)新的函數(shù),這個(gè)新的函數(shù)能夠處理函數(shù) A 的剩余參數(shù)

function createCurry(func, args) {   var argity = func.length;   var args = args || [];      return function () {     var _args = [].slice.apply(arguments);     args.push(..._args);          if (args.length < argity) {       return createCurry.call(this, func, args);     }          return func.apply(this, args);   } }

手寫題:數(shù)組去重

Array.from(new Set([1, 1, 2, 2]))

問:let 閉包
let 會(huì)產(chǎn)生臨時(shí)性死區(qū),在當(dāng)前的執(zhí)行上下文中,會(huì)進(jìn)行變量提升,但是未被初始化,所以在執(zhí)行上下文執(zhí)行階段,執(zhí)行代碼如果還沒有執(zhí)行到變量賦值,就引用此變量就會(huì)報(bào)錯(cuò),此變量未初始化。

問:變量提升
函數(shù)在運(yùn)行的時(shí)候,會(huì)首先創(chuàng)建執(zhí)行上下文,然后將執(zhí)行上下文入棧,然后當(dāng)此執(zhí)行上下文處于棧頂時(shí),開始運(yùn)行執(zhí)行上下文。

在創(chuàng)建執(zhí)行上下文的過程中會(huì)做三件事:創(chuàng)建變量對象,創(chuàng)建作用域鏈,確定 this 指向,其中創(chuàng)建變量對象的過程中,首先會(huì)為 arguments 創(chuàng)建一個(gè)屬性,值為 arguments,然后會(huì)掃碼 function 函數(shù)聲明,創(chuàng)建一個(gè)同名屬性,值為函數(shù)的引用,接著會(huì)掃碼 var 變量聲明,創(chuàng)建一個(gè)同名屬性,值為 undefined,這就是變量提升。

instance 如何使用
左邊可以是任意值,右邊只能是函數(shù)

'hello tuture' instanceof String // false

關(guān)于字節(jié)跳動(dòng)最愛考的JavaScript 基礎(chǔ)面試題有哪些問題的解答就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI