超好運的大廠實習（帶轉正）面試，直接拿下！猛猛的！
Hello，大家好，我是 Sunday。
運氣也是實力的一部分，此話誠不欺我！
最近有位同學，校招面試攜程，一面、二面，都是純八股文的面試。這可是 帶轉正的 HC 呀！ 直接輕松拿下。
實習一天 220，額外加 1000/月 的房補。在大廠中算是中等水平。
那么下面咱們就來看看這次面試，都聊了什么問題吧！
一、improt和require的區別
import 和 require 是 JavaScript 中用來導入模塊的兩種不同的語法，主要用于 ES6 和 CommonJS 模塊系統。以下是它們的主要區別：
1. 模塊系統
- require: 屬于 CommonJS 模塊系統，主要用于 Node.js 中。它是同步加載模塊的，適合在服務器端使用。
- import: 屬于 ES6 模塊系統（也稱為 ECMAScript 模塊）。它支持異步加載，適合在瀏覽器端和現代 JavaScript 環境中使用。
2. 語法
- require：
const module = require('module-name');- import：
import module from 'module-name'; // 導入默認導出
import { namedExport } from 'module-name'; // 導入命名導出
import * as allExports from 'module-name'; // 導入所有導出3. 加載時機
- require: 在代碼運行時被調用，模塊在被調用時才會被加載，因此是同步的。
- import: 在編譯階段被處理，模塊會在模塊代碼執行前被加載，因此是異步的。
4. Hoisting（提升）
- require: 不會提升，必須在代碼中顯式調用。
- import: 會提升，可以在文件的任何位置使用，但在模塊的頂部進行導入是最佳實踐。
5. 導出方式
CommonJS 導出：
// 導出模塊
module.exports = {
functionA: function() {},
functionB: function() {},
};ES6 導出：
// 導出默認
export default functionA;
// 導出命名
export function functionB() {}6. 循環依賴處理
- require: 處理循環依賴時，返回的是已經加載的模塊部分。
- import: 在循環依賴的情況下，會引發錯誤，因為它在模塊解析階段就會出錯。
7. 總結
- require: 適合 Node.js 和后端開發，采用同步加載的方式。
- import: 更加現代，適合前端開發，支持異步加載和靜態分析。
在現代前端開發中，建議使用 ES6 的 import 語法，因為它提供了更好的模塊化和可維護性。
二、require 有辦法實現異步嗎?
在 Node.js 中，require 本身是同步的，但可以通過一些其他方式實現異步模塊加載。以下是幾種方法：
1. 使用 import()
從 ES6 開始，可以使用動態 import() 函數來實現異步加載模塊。雖然它與 require 不同，但在現代 JavaScript 環境中是推薦的方式。
async function loadModule() {
const module = await import('./module.js');
module.someFunction();
}2. 使用 require 結合回調
可以在回調中使用 require，盡管這并不是真正的異步加載，但可以通過事件循環達到異步效果。
function loadModule(callback) {
setTimeout(() => {
const module = require('./module.js');
callback(module);
}, 0);
}
loadModule((module) => {
module.someFunction();
});3. 使用 require 結合 Promise
通過 Promise 的方式包裹 require，達到異步的效果：
function loadModule() {
return new Promise((resolve) => {
setTimeout(() => {
const module = require('./module.js');
resolve(module);
}, 0);
});
}
loadModule().then((module) => {
module.someFunction();
});4. 使用 async_hooks
在更復雜的場景中，可以使用 Node.js 的 async_hooks 模塊來處理異步上下文，但這通常不適用于簡單的模塊加載需求。
5. 總結
雖然 require 本身是同步的，不能直接實現異步模塊加載，但可以使用動態 import() 或通過回調和 Promise 來模擬異步行為。在現代開發中，推薦使用 ES6 的動態 import()，因為它更具可讀性和一致性。
三、export 和 export default的區別
export 和 export default 是 ES6 中用于導出模塊的兩種方式，它們的主要區別如下：
1. 導出方式
(1) export
// module.js
export const a = 1;
export const b = 2;
export function add(x, y) {
return x + y;
}
// main.js
import { a, add } from './module.js';
console.log(a); // 1
console.log(add(1, 2)); // 3允許在一個模塊中導出多個變量、函數或類。
導出時不需要指定名稱，可以在導入時使用 {} 指定要導入的變量名稱。
(2) export default
// module.js
const multiply = (x, y) => x * y;
export default multiply;
// main.js
import multiply from './module.js';
console.log(multiply(2, 3)); // 6每個模塊只能有一個默認導出。
在導入時可以使用任何名稱，不需要使用 {}。
2. 導入方式
使用export的導入：
import { a, b } from './module.js';導入時需要使用相同的名稱，且需要使用 {} 包裹。
使用export default的導入：
import myFunction from './module.js';導入時可以自定義名稱，且不需要 {}。
3. 使用場景
- export: 當你需要導出多個功能或變量時，適合使用 export。
- export default: 當一個模塊有一個主要功能或對象時，適合使用 export default。
4. 組合使用
可以同時使用兩者：
// module.js
export const a = 1;
export const b = 2;
const multiply = (x, y) => x * y;
export default multiply;
// main.js
import multiply, { a } from './module.js';
console.log(a); // 1
console.log(multiply(2, 3)); // 65. 總結
export 允許多個命名導出，而 export default 只允許一個默認導出。
導入時，命名導出需要使用 {}，而默認導入可以使用任意名稱。
四、閉包
能夠調用其他函數中變量的函數，就是 閉包函數。
function outerFunction() {
let outerVariable = 'I am outside!';
// innerFunction 函數使用了 outerFunction 里面的變量，所以它就是【閉包函數】
function innerFunction() {
console.log(outerVariable);
}
return innerFunction;
}
const closureFunction = outerFunction(); // outerFunction 被執行
closureFunction(); // 輸出: I am outside!五、在什么情況下閉包會出現內存泄漏的問題
閉包在某些情況下會導致內存泄漏，主要是由于閉包持有外部變量的引用，進而阻止了這些變量的垃圾回收。以下是幾種可能導致內存泄漏的情況：
1. 循環引用
當閉包持有外部對象的引用，而該對象又持有對閉包的引用時，就會產生循環引用。這種情況會導致垃圾回收器無法正確回收內存。
function createClosure() {
let obj = {};
obj.closure = function() {
console.log(obj);
};
return obj.closure;
}
const closure = createClosure(); // obj 和 closure 形成循環引用在上面的例子中，obj 對象持有對閉包的引用，而閉包又引用了 obj，這導致內存無法被回收。
2. 不當使用事件監聽器
如果使用閉包作為事件監聽器并沒有在適當的時候移除它們，可能會導致內存泄漏。特別是在動態創建和銷毀 DOM 元素時。
function createElement() {
const button = document.createElement('button');
button.innerText = 'Click me';
button.addEventListener('click', function() {
// 使用了外部變量
console.log('Button clicked');
});
document.body.appendChild(button);
}
// 每次調用 createElement 都會添加一個新的按鈕，但事件監聽器不會被移除
createElement();在這個例子中，每次調用 createElement 函數都會創建一個新的按鈕并添加事件監聽器，但如果不手動移除這些監聽器，它們將一直保留在內存中。
3. 大型數據結構
當閉包持有大型數據結構（如大數組或對象）的引用時，如果這些數據結構沒有在不需要時被清理，也可能導致內存泄漏。
let largeArray = new Array(1000000).fill('data');
function createLargeDataClosure() {
return function() {
console.log(largeArray.length); // 持有對 largeArray 的引用
};
}
const closure = createLargeDataClosure();在這個例子中，closure 持有對 largeArray 的引用，如果沒有在適當的時候釋放這個引用，將會導致內存占用持續增加。
4. 使用全局作用域
如果閉包中的變量是全局變量，那么閉包會一直持有對這些全局變量的引用，直到整個程序結束。這在長時間運行的應用中，可能導致內存的不斷增長。
let globalVar = 'Hello';
function createClosure() {
return function() {
console.log(globalVar);
};
}
const closure = createClosure();在這個例子中，閉包始終引用了 globalVar，從而保持了對它的引用。
5. 預防內存泄漏的措施
- 合理使用閉包：盡量避免不必要的閉包，尤其是在循環和事件處理器中。
- 及時清理引用：在不再需要的時候，主動清理閉包中的引用，例如通過將事件監聽器設置為 null。
- 使用 WeakMap 和 WeakSet：對于需要被垃圾回收的對象引用，可以使用 WeakMap 和 WeakSet，它們不會阻止垃圾回收。
- 手動移除事件監聽器：在元素被移除時，記得手動移除事件監聽器。
通過以上方式，可以有效減少使用閉包時可能出現的內存泄漏問題。
六、說一下 JS 中原型鏈的概念
原型鏈是 JavaScript 中實現繼承的一種機制，每個對象都有一個內部屬性指向其原型對象。原型鏈是通過對象的 __proto__ 屬性或 Object.getPrototypeOf() 方法連接起來的。下面是原型鏈的基本概念以及圖示說明。
1. 原型鏈的概念
- 原型：每個 JavaScript 對象都有一個原型，原型也是一個對象，可以有自己的原型，這樣就形成了一個鏈式結構，稱為原型鏈。
- 構造函數：通過構造函數創建的對象會有一個 prototype 屬性，指向構造函數的原型對象。
查找順序：
- 當訪問一個對象的屬性時，JavaScript 引擎首先在該對象自身查找。如果找不到，它會查找該對象的原型（即 __proto__ 屬性指向的對象）。
- 如果在原型中也沒有找到，它會繼續向上查找，直到找到屬性或到達原型鏈的末端（通常是 Object.prototype），如果仍未找到，則返回 undefined。
2. 示例代碼
function Animal(name) {
this.name = name;
}
Animal.prototype.speak = function() {
console.log(this.name + ' makes a noise.');
};
function Dog(name) {
Animal.call(this, name); // Call the parent constructor
}
// 設置 Dog.prototype 為 Animal 的實例
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog; // 糾正 constructor
Dog.prototype.speak = function() {
console.log(this.name + ' barks.');
};
const dog = new Dog('Rex');
dog.speak(); // 輸出: Rex barks.
console.log(dog instanceof Dog); // true
console.log(dog instanceof Animal); // true3. 解析示例
Animal 是一個構造函數，創建的實例具有 name 屬性和 speak 方法。
Dog 是另一個構造函數，它通過 Object.create(Animal.prototype) 使得 Dog.prototype 成為 Animal.prototype 的實例，從而繼承了 Animal 的方法。
dog 是 Dog 的一個實例，它可以訪問 speak 方法，雖然該方法在 Dog 的原型上被覆蓋，但它也可以訪問 Animal 的 speak 方法（如果需要的話）。
4. 小結
原型鏈是 JavaScript 繼承的基礎，允許對象共享屬性和方法。
理解原型鏈對于掌握 JavaScript 的面向對象編程、構造函數、以及如何實現繼承非常重要。
七、null有原型鏈嗎？
null 在 JavaScript 中被認為是一個特殊的原始值。它表示“無”或“空值”。在原型鏈的上下文中，null 是原型鏈的終點。
八、Array的原型是什么
在 JavaScript 中，Array 是一種內置的對象，用于處理數組。Array 的原型是 Array.prototype。這使得所有數組實例都能夠訪問 Array.prototype 上定義的方法和屬性。
1. 原型鏈結構
(1) Array.prototype：
- Array.prototype 是所有數組對象的原型，定義了數組的方法和屬性，如 push(), pop(), map(), filter() 等。
- 你可以在 Array.prototype 上添加自定義的方法，這樣所有數組實例都可以使用。
(2) Object.prototype：
- 所有對象（包括數組）的原型最終都會鏈接到 Object.prototype。這意味著數組實例也繼承了 Object 的方法和屬性，如 toString(), hasOwnProperty() 等。
(3) null：
- Object.prototype 的原型是 null，這是原型鏈的終點。
2. 示例
下面是一個示例，展示了如何通過 Array.prototype 訪問數組方法：
// 定義一個數組
const arr = [1, 2, 3];
// 訪問 Array.prototype 上的方法
console.log(arr.map(x => x * 2)); // 輸出: [2, 4, 6]
// 檢查原型
console.log(Object.getPrototypeOf(arr) === Array.prototype); // 輸出: true
console.log(Object.getPrototypeOf(Array.prototype) === Object.prototype); // 輸出: true3. 總結
Array 的原型是 Array.prototype。
所有數組實例都可以訪問 Array.prototype 上定義的方法和屬性。
Array.prototype 又可以通過其原型鏈訪問到 Object.prototype，最終終止于 null。
九、Object的原型是什么
在 JavaScript 中，Object 是所有對象的基類。Object 的原型是 Object.prototype。這是一個包含許多通用方法和屬性的對象，所有普通對象都可以繼承這些方法和屬性。
1. 原型鏈結構
(1) Object.prototype：
- Object.prototype 是所有對象的原型，它定義了一些通用的方法和屬性，例如 toString(), hasOwnProperty(), isPrototypeOf(), 和 valueOf() 等。
- 所有普通對象（即通過對象字面量、構造函數或 Object.create() 創建的對象）都能夠訪問 Object.prototype 上的方法和屬性。
(2) null：
Object.prototype 的原型是 null，這是原型鏈的終點。
2. 示例
下面是一個示例，展示了如何通過 Object.prototype 訪問對象方法：
// 創建一個普通對象
const obj = {
name: 'Alice',
age: 30
};
// 訪問 Object.prototype 上的方法
console.log(obj.toString()); // 輸出: [object Object]
console.log(obj.hasOwnProperty('name')); // 輸出: true
// 檢查原型
console.log(Object.getPrototypeOf(obj) === Object.prototype); // 輸出: true
console.log(Object.getPrototypeOf(Object.prototype)); // 輸出: null3. 總結
Object 的原型是 Object.prototype。
所有普通對象都可以訪問 Object.prototype 上定義的方法和屬性。
Object.prototype 的原型是 null，這是原型鏈的終點。
十、let const var的區別
let、const 和 var 是 JavaScript 中用于聲明變量的關鍵字。它們之間有一些重要的區別：
1. 聲明的作用域
(1) var:
聲明的變量具有 函數作用域。如果在函數內部使用 var 聲明變量，該變量只在該函數內可用。如果在函數外部使用 var 聲明，變量會變成全局變量。
例子：
function example() {
var a = 10;
}
console.log(a); // ReferenceError: a is not defined(2) let和const:
聲明的變量具有 塊級作用域。也就是說，它們只在其聲明的代碼塊內有效（例如，if 語句、for 循環等）。
例子：
{
let b = 20;
const c = 30;
}
console.log(b); // ReferenceError: b is not defined
console.log(c); // ReferenceError: c is not defined2. 變量提升
(1) var:
變量會被提升到函數的頂部，初始化為 undefined。在變量聲明之前使用該變量不會報錯，但值為 undefined。
例子：
console.log(d); // undefined
var d = 5;
console.log(d); // 5(2) let和const:
變量也會被提升，但在聲明之前是 “暫時性死區”（Temporal Dead Zone, TDZ），使用它們會導致 ReferenceError。
例子：
console.log(e); // ReferenceError: Cannot access 'e' before initialization
let e = 15;3. 重新賦值
(1) var和let:
這兩個關鍵字聲明的變量都可以被重新賦值。
例子：
var f = 1;
f = 2; // 可以重新賦值
console.log(f); // 2
let g = 3;
g = 4; // 可以重新賦值
console.log(g); // 4(2) const:
聲明的變量不能被重新賦值，必須在聲明時初始化。
例子：
const h = 5;
h = 6; // TypeError: Assignment to constant variable.4. 常量和可變性
const：
用于聲明常量，但這只意味著變量的引用不可以被改變。如果 const 聲明的是一個對象或數組，可以修改其屬性或元素。
例子：
const obj = { name: 'Alice' };
obj.name = 'Bob'; // 允許，修改對象的屬性
console.log(obj.name); // Bob5. 總結
- var: 函數作用域、提升、可以重復聲明和賦值。
- let: 塊級作用域、提升、可以賦值，但不能重復聲明。
- const: 塊級作用域、提升、不能重新賦值，聲明時必須初始化。
十一、const的原理是什么？為什么不能改變
const 是 JavaScript 中用于聲明常量的關鍵字，其原理和行為主要與塊級作用域和引用類型有關。以下是對 const 的詳細解釋：
1. 塊級作用域
const 聲明的變量具有塊級作用域。這意味著它們只在定義它們的代碼塊內有效。例如，在一個 if 語句或循環內聲明的 const 變量不能在其外部訪問。
{
const x = 10;
}
console.log(x); // ReferenceError: x is not defined2. 不可重新賦值
const 聲明的變量不能被重新賦值。這并不是說變量本身是不可變的，而是說變量的引用（地址）是不可變的。也就是說，您不能將一個 const 變量重新指向一個新的值。
const y = 20;
y = 30; // TypeError: Assignment to constant variable.3. 引用類型的可變性
如果 const 聲明的是一個對象或數組，您可以修改其屬性或元素，但不能改變其引用。這意味著您可以對對象的內容進行修改，但不能將該對象指向另一個對象。
const obj = { name: 'Alice' };
obj.name = 'Bob'; // 允許，修改對象的屬性
console.log(obj.name); // Bob
obj = { name: 'Charlie' }; // TypeError: Assignment to constant variable.4. 原理解析
const 的原理在于 ECMAScript 的變量綁定機制。聲明一個 const 變量時，它會創建一個綁定到該值的不可更改的引用。以下是這一機制的詳細解讀：
- 綁定：當您使用 const 聲明一個變量時，實際上是將該變量與一個值綁定在一起。這個綁定是固定的，您不能改變它。
- 作用域：const 聲明的變量僅在聲明時的塊內有效，并在退出該塊后被銷毀。
- 不可重新賦值：一旦綁定建立，就不能再將該變量指向另一個值（即不可重新賦值）。
5. 總結
const 聲明的是一個不可重新賦值的變量，但它的值（如果是對象或數組）可以是可變的。
這種設計使得 const 適用于需要保護不被重新分配的變量，同時仍允許對其內部狀態進行修改的場景。
