這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

前端“三清”

在前端開發中，我們經常聽到關於“三清”的說法，即 window、document、Object。這三者分別代表了 BOM（瀏覽器對象模型）、DOM（文檔對象模型）以及 JS 的頂層對象。在這個體系中，我們通過 JavaScript 與瀏覽器進行深度交互，構建出豐富多彩的網頁應用。同時，JS 類也是前端開發中常用的構建模塊，通過構造函數和原型，我們能夠創建出更為複雜的對象和功能。

BOM

首先讓我們來瞭解BOM：

BOM（瀏覽器對象模型）是一組用於與瀏覽器交互的對象，提供了 JavaScript 訪問瀏覽器功能的介面。對於JavaScript：為了能夠讓JavaScript能控制瀏覽器的行為，JavaScript就有了一套自己的BOM介面。

以下是 BOM 中一些常見的對象和功能：

1. window 對象：

window 對象是 BOM 的頂層對象，代表瀏覽器的一個視窗或一個標簽頁。window 對象包含了很多屬性和方法，例如：

• window.innerWidth 和 window.innerHeight：獲取瀏覽器視窗的內部寬度和高度。
• window.location：提供了與當前視窗中載入的文檔有關的信息，比如當前 URL。
• window.document：表示當前視窗中載入的文檔，即 DOM。

2. 彈窗和對話框：

• window.alert()：彈出警告框。
• window.confirm()：彈出確認框，用戶可以點擊“確定”或“取消”。
• window.prompt()：彈出提示框，通常用於從用戶獲取輸入。

3. 定時器：

• window.setTimeout()：在一定時間後執行一次指定的函數。
• window.setInterval()：以指定的時間間隔重覆執行指定的函數。
• window.clearTimeout() 和 window.clearInterval()：用於取消之前通過 setTimeout 和 setInterval 設置的定時器。

4. 導航和歷史：

• window.history：提供對瀏覽器歷史記錄的操作，比如前進、後退。
• window.location：提供對當前 URL 的操作，可以用於導航到新的頁面。

5. 屏幕信息：

• window.screen：提供有關用戶屏幕的信息，如屏幕寬度、高度。

6. 存儲：

• window.localStorage 和 window.sessionStorage：用於在客戶端存儲數據，分別在本地存儲和會話存儲中。

7. 其他：

• window.navigator：提供關於瀏覽器的信息，如瀏覽器名稱、版本、操作系統等。
• window.console：用於在控制台輸出信息，方便調試。

BOM 提供了豐富的介面，使開發者能夠與瀏覽器進行交互，控制頁面的導航、執行定時任務、獲取用戶屏幕信息等。在編寫代碼時，建議謹慎使用不同瀏覽器獨有的 BOM 特性，以確保跨瀏覽器的相容性。

DOM

DOM（文檔對象模型）是一種用於表示和操作文檔的樹狀結構的編程介面。它將文檔表示為一個由節點組成的樹，每個節點代表文檔中的一個元素、屬性、文本等。DOM 提供了一種以編程方式訪問、更新和操作 HTML 或 XML 文檔的方法，使開發者能夠通過 JavaScript 動態地操縱頁面的內容和結構。

對於JavaScript：為了能夠使JavaScript操作Html，JavaScript就有了一套自己的DOM編程介面。

DOM 的基本概念：

1. 節點（Node）： DOM 中的基本單位，文檔中的所有內容都是節點。節點可以是元素、屬性、文本等。
2. 元素節點（Element Node）： 表示文檔中的元素，如 <div>、<p>、<span> 等。
3. 屬性節點（Attribute Node）： 表示元素的屬性，如 <div id="example"> 中的 id 屬性。
4. 文本節點（Text Node）： 表示元素中的文本內容。
5. 父節點、子節點、兄弟節點： 節點之間的關係。一個節點的直接包含者稱為父節點，被它直接包含的節點稱為子節點，具有相同父節點的節點稱為兄弟節點。

以下是 DOM 的一些常見屬性和方法：

1. document 對象： 表示整個文檔，是 DOM 樹的入口。通過 document 對象，可以訪問和操作文檔的各個部分。
2. getElementById() 方法： 通過元素的 id 獲取元素節點。

var element = document.getElementById('example');

3. getElementsByClassName() 和 getElementsByTagName() 方法： 分別通過類名和標簽名獲取元素節點。

var elementsByClass = document.getElementsByClassName('example');
var elementsByTag = document.getElementsByTagName('p');

4. querySelector() 和 querySelectorAll() 方法： 使用 CSS 選擇器語法獲取元素節點。

var element = document.querySelector('#example');
var elements = document.querySelectorAll('.example');

5. createElement() 和 createTextNode() 方法： 創建新的元素和文本節點。

var newElement = document.createElement('div');
var newText = document.createTextNode('Hello, DOM!');

6. 節點的屬性和方法： 節點對象有各種屬性和方法，用於訪問和操作節點的內容、樣式、事件等

// 獲取節點的文本內容
var textContent = element.textContent;

// 設置節點的樣式
element.style.color = 'red';

// 添加事件監聽器
element.addEventListener('click', function() {
  // 處理點擊事件
});

// 向element內部的最後面添加一個節點，傳入的參數是節點類型
element.appendChild(Node)
 
// 向element內部某個已存在的節點的前面插入一個節點，仍然傳入一個節點類型的參數
element.insertBefore(new_Node,existed_Node)

// 刪除element內的某個節點，傳參是節點類型參數
element.removeChild(Node) 

DOM 操作的基本流程：

1. 選擇目標節點： 使用上述方法選擇要操作的元素節點。
2. 操作節點： 使用節點的屬性和方法進行相關操作，如修改文本內容、樣式、添加或移除節點等。
3. 更新頁面： 對節點進行操作後，通過 appendChild()、insertBefore() 等方法將更新後的節點插入到文檔中，或者通過修改節點的屬性直接更新頁面。

DOM 的靈活性和強大性使得它成為前端開發中不可或缺的一部分。通過合理地使用 DOM，開發者能夠實現動態更新頁面、響應用戶操作、處理表單數據等豐富的功能，提升用戶體驗。然而，需要註意的是，頻繁的 DOM 操作可能導致性能問題，因此在實際開發中應該註意優化操作，並儘量減少不必要的重繪和迴流。

JS的頂層對象

JavaScript 的頂層對象是 Object，它是所有對象的父對象。Object 對象在 JavaScript 中扮演著非常重要的角色，提供了一些常用的方法和屬性，同時也是原型鏈的起點。

創建對象的方式

1. 使用字面量：

javascriptCopy code
var obj = { key: 'value' };

         2.使用構造函數：

javascriptCopy code
var obj = new Object();
obj.key = 'value';

Object 對象的屬性和方法

1. 屬性

• Object.prototype： Object 對象的原型，所有對象都繼承自這個原型。這是原型鏈的起點。
• Object.length： 通常用於獲取 Object 構造函數的長度屬性，值為 1。

2. 方法

• Object.assign(target, ...sources)： 用於將一個或多個源對象的屬性複製到目標對象。它會返回目標對象。

javascriptCopy code
var target = { a: 1, b: 2 };
var source = { b: 3, c: 4 };
var result = Object.assign(target, source);
console.log(result); // { a: 1, b: 3, c: 4 }

• Object.create(proto, [propertiesObject])： 創建一個新對象，使用現有的對象作為新對象的原型。

javascriptCopy code
var protoObj = { x: 10 };
var newObj = Object.create(protoObj);
console.log(newObj.x); // 10

• Object.keys(obj) 和 Object.values(obj)： 返回一個包含對象自身所有屬性名或屬性值的數組

javascriptCopy code
var obj = { a: 1, b: 2, c: 3 };
console.log(Object.keys(obj)); // ['a', 'b', 'c']
console.log(Object.values(obj)); // [1, 2, 3]

•  Object.entries(obj)： 返回一個包含對象自身所有 [key, value] 對的數組。

javascriptCopy code
var obj = { a: 1, b: 2, c: 3 };
console.log(Object.entries(obj)); // [['a', 1], ['b', 2], ['c', 3]]

• Object.freeze(obj) 和 Object.seal(obj)： 分別用於凍結對象（使對象不可更改）和封閉對象（使對象不可添加、刪除屬性）。

javascriptCopy code
var obj = { x: 1, y: 2 };
Object.freeze(obj);
obj.x = 10; // 不會生效，obj.x 仍然為 1


javascriptCopy code
var obj = { x: 1, y: 2 };
Object.seal(obj);
obj.z = 3; // 不會生效，obj 中不會添加 z 屬性

原型鏈

Object 對象是 JavaScript 中原型鏈的起點。每個對象都有一個 __proto__ 屬性，指向它的原型對象。在原型鏈中，Object.prototype 是所有對象的祖先。

javascriptCopy code
var myObject = {};
console.log(myObject.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__); // null，原型鏈的終點

通過原型鏈，對象可以繼承 Object.prototype 的屬性和方法，這包括一些基本的對象操作，例如 toString()、hasOwnProperty() 等。

javascriptCopy code
var myObject = {};
console.log(myObject.toString()); // [object Object]
console.log(myObject.hasOwnProperty('toString')); // false，來自原型鏈

本文轉載於:

https://juejin.cn/post/7300100800906788873

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。