本篇文章為初學(xué)者介紹一下10 個最常被問到的 JavaScript 面試題。有一定的參考價值,有需要的朋友可以參考一下,希望對初學(xué)者有所幫助。
在本文中,我收集了關(guān)于Javascript 最常被問到的 10 個問題及其答案。
這10 個問題大多涉及 Javascript 的基礎(chǔ)知識,所以如果你剛剛開始學(xué)習(xí) JS,最好理解并掌握它們并。
這個 10 問題涉及 JS 中閉包、promise,變量提升、類等等。盡管這些知識不是很難,但是知道答案是一件好事,因為其中一些經(jīng)常在面試中會被問到?!就扑]學(xué)習(xí):javascript高級教程】
Javascript 中的閉包是什么?
閉包是封閉在一起的函數(shù)的組合,其中內(nèi)部函數(shù)可以訪問其變量和外部函數(shù)的變量。
最簡單的解釋方法就是上例子:
function outer() { var name = 'Maria'; function inner() { console.log(name); } inner(); } outer(); // 'Maria'
在上面的代碼中,你可以看到inner()
函數(shù)可以訪問其父函數(shù)變量name
。 因此,如果調(diào)用outer()
函數(shù),那么inner()
函數(shù)的console.log()
將返回name
的值Maria
。
內(nèi)部函數(shù)可以訪問外部函數(shù)參數(shù)對象,但是內(nèi)部函數(shù)參數(shù)與外部一樣,則內(nèi)部的參數(shù)對象會覆蓋外部的參數(shù)對象。如下所示:
function outer(a, b) { const inner = (a, b) => console.log(a, b); inner(1, 2); } outer('Alice', 'Mark'); // returns 1, 2
我們使用閉包的主要原因是返回可以返回其他函數(shù)的函數(shù)。
Javascript中的 DOM 是什么
DOM 是文檔對象模型,它是網(wǎng)站的面向?qū)ο蟮谋硎拘危梢允褂?Javascript 進行修改。
使用 JS 可以操縱 DOM 元素,例如顏色,位置,大小。 為了選擇頁面的特定元素,Javascript 提供了一些方法:
- getElementById() – 通過
id
屬性選擇一個元素 - getElementsByName() – 通過
name
屬性選擇一個元素 - getElementsByTagName() – 選擇所選標簽的所有元素,
- getElementsbyClassName() – 選擇特定類名的所有元素
* querySelector() - 通過CSS選擇器選擇元素。
Javascript 還提供了其他操作元素的方法,而不僅僅是獲取元素,比如appendChild()
或innerHTML()
。
Javascript 的 Promise 是什么
Promise 是異步編程的一種解決方案,可以替代傳統(tǒng)的解決方案–回調(diào)函數(shù)和事件。ES6統(tǒng)一了用法,并原生提供了Promise
對象。作為對象,Promise 有一下兩個特點: (1)對象的狀態(tài)不受外界影響。 (2)一旦狀態(tài)改變了就不會在變,也就是說任何時候 Promise
都只有一種狀態(tài)。
Promise 有三種狀態(tài),分別是:Pending (進行中), Resolved (已完成), Rejected (已失敗)。Promise 從 Pending
狀態(tài)開始,如果成功就轉(zhuǎn)到成功態(tài),并執(zhí)行resolve
回調(diào)函數(shù);如果失敗就轉(zhuǎn)到失敗狀態(tài)并執(zhí)行reject
回調(diào)函數(shù)。
如果 Promise 被解析(resolved),我們可以調(diào)用then()
方法并使用返回值執(zhí)行操作。如果被拒絕(rejected),我們可以使用catch()
方法來處理錯誤。
處理異步編程的其他方法還有async/await
和callbacks
。
Javascript 中的原型是什么?
原型通常指的是prototype
和__proto__
這兩個原型對象,其中前者叫做顯式原型對象,后者叫做隱式原型對象。
Javascript對象從原型繼承方法和屬性,而Object.prototype
在繼承鏈的頂部。Javascript prototype關(guān)鍵字還可以用于向構(gòu)造函數(shù)添加新值和方法。
來看看事例:
function Animal(name, kind, age) { this.name = name; this.kind = kind; this.age = age; } Animal.prototype.ownerName('Mark');
可以看到,通過使用原型,我們能夠?qū)?code>ownerName屬性添加到Animal()
構(gòu)造函數(shù)中。
Javascript 的 變量提升 是什么
提升是一種機制,它將所有聲明的變量和函數(shù)提升到它們局部作用域的頂部,如果變量和函數(shù)被放置在全局作用域,則會被提升到全局作用域的頂部。
Javascript中,可以在變量被使用后在聲明它。
提升用于避免在變量或函數(shù)有在沒有定義之前就執(zhí)行導(dǎo)致的 undefined
錯誤。
name = 'Ted'; console.log(name); var name; // 'Ted' var name; name = 'Ted'; console.log(name); // 'Ted';
使用 var
聲明的變量,如果沒有賦值,則默認會被初始化為 undefined
, let
和 const
則不會。另外,需要注意的是,在聲明const
時,必須同時初始化它,因為后面不可在更改它。
Javascript中的對象是什么
對象只是一種特殊的數(shù)據(jù)。對象擁有屬性和方法。JavaScript 中的所有事物都是對象,如:字符串、數(shù)值、數(shù)組、函數(shù)等。
對象的屬性:反映該對象某些特定的性質(zhì)的,如:字符串的長度、圖像的長寬等;
對象的方法:能夠在對象上執(zhí)行的動作。例如,表單的“提交”(Submit),時間的“獲取”(getYear)等;
屬性只是簡單的值,而方法是可以在對象上執(zhí)行的操作。
var student = { firstName: 'Alice', lastName: 'Jones', age: 21, sayHi: () => { return 'Hi, I am ' + this.firstName; } }
在上面的代碼中,你可以看到Student
對象,其中包含三個屬性和一個方法。
Javascript 中的函數(shù)是什么
在javascript中函數(shù)是一段可以被執(zhí)行或調(diào)用任意次數(shù)的JavasScript代碼,在數(shù)據(jù)類型中屬于"function"
。函數(shù)也擁有屬性和方法,因此函數(shù)也是對象。
在Javascript中函數(shù)定義函數(shù)聲明或函數(shù)表達式由關(guān)鍵字function
開始。在定義函數(shù)時,可以在函數(shù)名后面的括號中添加一些參數(shù)。當(dāng)我們調(diào)用函數(shù)時,括號中傳遞的值稱為參數(shù)。
function calculate(x, y) { return x * y; } calculate(2, 5);
Javascript中的純函數(shù)是什么
如果函數(shù)的調(diào)用參數(shù)相同,則永遠返回相同的結(jié)果。它不依賴于程序執(zhí)行期間函數(shù)外部任何狀態(tài)或數(shù)據(jù)的變化,必須只依賴于其輸入?yún)?shù)。
顧名思義,純函數(shù)跟我們初中數(shù)學(xué)的基本函數(shù)一樣,遵循一定的映射關(guān)系,輸入決定輸出,一個輸入只能對應(yīng)一個輸出。不同的輸入可以有相同的輸出,但是相同的輸入不能有不同的輸出
一個函數(shù),如果符合以下兩個特點,那么它就可以稱之為 純函數(shù):
- 對于相同的輸入,永遠得到相同的輸出
- 沒有任何可觀察到的副作用
Javascript中的構(gòu)造函數(shù)是什么
構(gòu)造函數(shù)是一種特殊的方法,用于初始化和創(chuàng)建 Javascript 類中的對象。
JavaScript 中的構(gòu)造函數(shù)和其它語言中的構(gòu)造函數(shù)是不同的。 通過 new
關(guān)鍵字方式調(diào)用的函數(shù)都被認為是構(gòu)造函數(shù)。
在構(gòu)造函數(shù)內(nèi)部,this
指向新創(chuàng)建的對象 Object。 這個新創(chuàng)建的對象的 prototype
被指向到構(gòu)造函數(shù)的 prototype
。
如果被調(diào)用的函數(shù)沒有顯式的 return
表達式,則隱式的會返回 this
對象,也就是新創(chuàng)建的對象。
const Person = (name, age) => { this.name = name; this.age = age; } var man = new Person('Mark', 23); console.log(man); // { name: 'Mark', age: 23 }
在上面的代碼中,我創(chuàng)建了一個Person
構(gòu)造函數(shù),在下面的代碼中,創(chuàng)建了一個名為man
的新變量,并基于Person
構(gòu)造函數(shù)創(chuàng)建了一個新對象。
Javascript類是什么?
自從 ES6 引入以來,我們可以在Javascript中使用類。 類是一種函數(shù),我們使用關(guān)鍵字class
代替function
關(guān)鍵字來初始化它。
除此之外,我們還必須在類內(nèi)部添加constructor()
方法,該方法在每次初始化類時都會調(diào)用。
在constructor()
方法內(nèi)部,我們添加了類的屬性。 要基于現(xiàn)有的類創(chuàng)建另一個類,我們可以使用extends
關(guān)鍵字。
在JavaScript中使用類的一個很好的例子是 React 框架,它是類的組件。
總結(jié)
在本文中,我收集了開發(fā)者經(jīng)常問的 10 個Javascript問題,并給出答案,答案不是唯一,這里只是自己的一些見解,希望本文能給初學(xué)者帶來一些幫助。
原文地址:https://dev.to/duomly/10-most-common-javascript-questions-answered-1083
作者:Duomly