回答一下這 10 個最多見的 Javascript 問題

時間 2020-08-01

原文原文鏈接

做者：Duomly
譯者：前端小智
來源：dev

點贊再看，微信搜索 【大遷世界】 關注這個沒有大廠背景，但有着一股向上積極心態人。本文 GitHub https://github.com/qq44924588... 上已經收錄，文章的已分類，也整理了不少個人文檔，和教程資料。

爲初學者介紹一下這 10 個最常被問到的 JavaScript 問題

在本文中，我收集了關於Javascript 最常被問到的 10 個問題及其答案。javascript

這10 個問題大多涉及 Javascript 的基礎知識，因此若是你剛剛開始學習 JS，最好理解並掌握它們並。前端

這個 10 問題涉及 JS 中閉包、promise，變量提高、類等等。儘管這些知識不是很難，可是知道答案是一件好事，由於其中一些常常在面試中會被問到。java

Javascript 中的閉包是什麼？

閉包是封閉在一塊兒的函數的組合，其中內部函數能夠訪問其變量和外部函數的變量。git

最簡單的解釋方法就是上例子：github

function outer() {
  var name = 'Maria';
  function inner() {
    console.log(name);
  }
  inner();
}
outer();
// 'Maria'

在上面的代碼中，你能夠看到inner()函數能夠訪問其父函數變量name。所以，若是調用outer()函數，那麼inner()函數的console.log()將返回name的值Maria。面試

內部函數能夠訪問外部函數參數對象，可是內部函數參數與外部同樣，則內部的參數對象會覆蓋外部的參數對象。以下所示：編程

function outer(a, b) {
  const inner = (a, b) => console.log(a, b);
  inner(1, 2);
}
outer('Alice', 'Mark');
// returns 1, 2

咱們使用閉包的主要緣由是返回能夠返回其餘函數的函數。數組

Javascript中的 DOM 是什麼

DOM 是文檔對象模型，它是網站的面向對象的表示形，可使用 Javascript 進行修改。promise

使用 JS 能夠操縱 DOM 元素，例如顏色，位置，大小。爲了選擇頁面的特定元素，Javascript 提供了一些方法：微信

getElementById() - 經過id屬性選擇一個元素
getElementsByName() - 經過name屬性選擇一個元素
getElementsByTagName() - 選擇所選標籤的全部元素，
getElementsbyClassName() - 選擇特定類名的全部元素

*　querySelector()　-　經過CSS選擇器選擇元素。

Javascript　還提供了其餘操做元素的方法，而不只僅是獲取元素，好比appendChild()或innerHTML()。

Javascript 的 Promise 是什麼

Promise 是異步編程的一種解決方案，能夠替代傳統的解決方案--回調函數和事件。ES6統一了用法，並原生提供了Promise對象。做爲對象，Promise 有一下兩個特色： （1）對象的狀態不受外界影響。 （2）一旦狀態改變了就不會在變，也就是說任什麼時候候 Promise 都只有一種狀態。

Promise 有三種狀態，分別是：Pending （進行中）， Resolved (已完成)， Rejected (已失敗)。Promise 從 Pending 狀態開始，若是成功就轉到成功態，並執行resolve回調函數；若是失敗就轉到失敗狀態並執行reject回調函數。

若是 Promise 被解析(resolved)，咱們能夠調用then()方法並使用返回值執行操做。若是被拒絕(rejected)，咱們可使用catch()方法來處理錯誤。

處理異步編程的其餘方法還有async/await和callbacks。

Javascript 中的原型是什麼?

原型一般指的是prototype和__proto__這兩個原型對象，其中前者叫作顯式原型對象,後者叫作隱式原型對象。

Javascript對象從原型繼承方法和屬性，而Object.prototype在繼承鏈的頂部。Javascript prototype關鍵字還能夠用於向構造函數添加新值和方法。

來看看事例：

function Animal(name, kind, age) {
  this.name = name;
  this.kind = kind;
  this.age = age;
}

Animal.prototype.ownerName('Mark');

能夠看到，經過使用原型，咱們可以將ownerName屬性添加到Animal()構造函數中。

Javascript 的變量提高是什麼

提高是一種機制，它將全部聲明的變量和函數提高到它們局部做用域的頂部，若是變量和函數被放置在全局做用域，則會被提高到全局做用域的頂部。

Javascript中，能夠在變量被使用後在聲明它。

提高用於避免在變量或函數有在沒有定義以前就執行致使的 undefined 錯誤。

name = 'Ted';
console.log(name);
var name;
// 'Ted'


var name;
name = 'Ted';
console.log(name);
// 'Ted';

使用 var 聲明的變量，若是沒有賦值，則默認會被初始化爲 undefined, let 和 const 則不會。另外，須要注意的是，在聲明const時，必須同時初始化它，由於後面不可在更改它。

Javascript中的對象是什麼

對象只是一種特殊的數據。對象擁有屬性和方法。JavaScript 中的全部事物都是對象，如:字符串、數值、數組、函數等。

對象的屬性：反映該對象某些特定的性質的，如：字符串的長度、圖像的長寬等；

對象的方法：可以在對象上執行的動做。例如，表單的「提交」(Submit)，時間的「獲取」(getYear)等；

屬性只是簡單的值，而方法是能夠在對象上執行的操做。

var student = {
  firstName: 'Alice',
  lastName: 'Jones',
  age: 21,
  sayHi: () => {
    return 'Hi, I am ' + this.firstName;
  }
}

在上面的代碼中，你能夠看到Student對象，其中包含三個屬性和一個方法。

Javascript 中的函數是什麼

在javascript中函數是一段能夠被執行或調用任意次數的JavasScript代碼,在數據類型中屬於"function"。函數也擁有屬性和方法，所以函數也是對象。

在Javascript中函數定義函數聲明或函數表達式由關鍵字function開始。在定義函數時，能夠在函數名後面的括號中添加一些參數。當咱們調用函數時，括號中傳遞的值稱爲參數。

function calculate(x, y) {
  return x * y;
}

calculate(2, 5);

Javascript中的純函數是什麼

若是函數的調用參數相同，則永遠返回相同的結果。它不依賴於程序執行期間函數外部任何狀態或數據的變化，必須只依賴於其輸入參數。

顧名思義，純函數跟咱們初中數學的基本函數同樣，遵循必定的映射關係，輸入決定輸出，一個輸入只能對應一個輸出。不一樣的輸入能夠有相同的輸出，可是相同的輸入不能有不一樣的輸出

一個函數，若是符合如下兩個特色，那麼它就能夠稱之爲純函數：

對於相同的輸入，永遠獲得相同的輸出
沒有任何可觀察到的反作用

Javascript中的構造函數是什麼

構造函數是一種特殊的方法，用於初始化和建立 Javascript 類中的對象。

JavaScript 中的構造函數和其它語言中的構造函數是不一樣的。經過 new 關鍵字方式調用的函數都被認爲是構造函數。

在構造函數內部，this 指向新建立的對象 Object。這個新建立的對象的 prototype 被指向到構造函數的 prototype。

若是被調用的函數沒有顯式的 return 表達式，則隱式的會返回 this 對象，也就是新建立的對象。

const Person = (name, age) => {
  this.name = name;
  this.age = age;
}

var man = new Person('Mark', 23);
console.log(man);
// { name: 'Mark', age: 23 }

在上面的代碼中，我建立了一個Person構造函數，在下面的代碼中，建立了一個名爲man的新變量，並基於Person構造函數建立了一個新對象。