JavaScript this關鍵字：為何如此關鍵？

JavaScript this關鍵字：為何如此關鍵？如何正確綁定？

JavaScript中，this關鍵字的指向是動態變化的，它依賴于函數的調用方式。理解this的指向是JavaScript編程中的一項重要技能，因為它直接影響到函數內部訪問到的對象。下面詳細解釋幾種常見的this指向情況：

1. 全局環境中的this

在全局作用域（瀏覽器中的全局對象是window，Node.js中的全局對象是global）中，this指向全局對象。

console.log(this===window); // 在瀏覽器中輸出 true  
console.log(this.document !==undefined); // 驗證this指向全局對象

2. 函數調用中的this

在普通函數調用時（非嚴格模式下），this指向全局對象（瀏覽器中是window，Node.js中是global）。在嚴格模式（'use strict';）下，this是undefined。

function test() {  
    console.log(this===window); // 非嚴格模式下為 true  
}  
  
test();  
  
function strictTest() {  
    'use strict';  
    console.log(this===undefined); // 嚴格模式下為 true  
}  
  
strictTest();

3. 方法調用中的this

當一個函數被保存為某個對象的屬性時，我們稱之為方法。在方法調用中，this指向調用該方法的對象。

const obj={  
    method: function() {  
        console.log(this===obj); // 輸出 true  
    }  
};  
  
obj.method();

4. 構造函數中的this

在構造函數中，this指向新創建的對象實例。

function Car(make, model) {  
    this.make=make;  
    this.model=model;  
}  
  
const myCar=new Car('Ford', 'Mustang');  
console.log(myCar.make); // 輸出 Ford

5. 箭頭函數中的this

箭頭函數不綁定自己的this，它會捕獲其所在上下文的this值，作為自己的this值。

const obj={  
    method: function() {  
        return ()=> {  
            console.log(this===obj); // 輸出 true  
        };  
    }  
};  
  
const func=obj.method();  
func();

6. 顯式設置this

使用call()、apply()和bind()方法可以顯式設置函數執行時this的指向。

call(thisArg, arg1, arg2, ...)
apply(thisArg, [argsArray])
bind(thisArg, arg1, arg2, ...)

這些方法都允許你調用一個函數，并顯式地設置函數體內this的值，call和apply會立即執行函數，而bind會返回一個新的函數，這個新函數在被調用時，this會被設置為bind的第一個參數，而其余參數將作為新函數的參數，供調用時使用。

使用call()

call()方法調用一個函數，其具有一個指定的this值和分別提供的參數（參數的列表）。

function greet(greeting, punctuation) {  
    console.log(this.name + ' says, ' + greeting + punctuation);  
}  
  
const person={  
    name: 'Alice'  
};  
  
// 使用call()顯式設置this指向person對象  
greet.call(person, 'Hello', '!');  
// 輸出: Alice says, Hello!

使用apply()

apply()方法調用一個函數，其具有一個指定的this值，以及作為一個數組（或類數組對象）提供的參數。

function greet(greeting, punctuation) {  
    console.log(this.name + ' says, ' + greeting + punctuation);  
}  
  
const person={  
    name: 'Bob'  
};  
  
// 使用apply()顯式設置this指向person對象，參數作為數組傳遞  
greet.apply(person, ['Hi', '.']);  
// 輸出: Bob says, Hi.

使用bind()

bind()方法創建一個新的函數，在bind()被調用時，這個新函數的this被指定為bind()的第一個參數，而其余參數將作為新函數的參數，供調用時使用。

function greet(greeting, punctuation) {  
    console.log(this.name + ' says, ' + greeting + punctuation);  
}  
  
const person={  
    name: 'Charlie'  
};  
  
// 使用bind()創建一個新函數，其this指向person對象  
const greetCharlie=greet.bind(person, 'Hey', '!');  
  
// 調用新函數  
greetCharlie();  
// 輸出: Charlie says, Hey!  
  
// 注意：bind()不會立即執行函數，而是返回一個新函數

理解這些this的指向規則，對于編寫清晰、可維護的JavaScript代碼至關重要。

HTML中，列表、引用和代碼是常用的結構，它們有助于組織內容，突出顯示特定信息，并提高網頁的可讀性和功能性。本文將詳細介紹這些元素的使用方法和實例。

列表（Lists）

列表是組織項目或信息點的一種方式。在HTML中，有兩種主要類型的列表：有序列表和無序列表。

有序列表（Ordered Lists）

有序列表使用<ol>標簽創建，列表中的每個項目使用<li>（列表項）標簽標記。有序列表通常用于表示有特定順序的步驟或排名。

使用實例：

<ol>
  <li>開啟電腦。</li>
  <li>打開瀏覽器。</li>
  <li>訪問網站。</li>
</ol>

在這個例子中，步驟按照順序排列，用戶應該按照列表的順序執行。

無序列表（Unordered Lists）

無序列表使用<ul>標簽創建，同樣使用<li>標簽來定義列表項。無序列表適用于沒有特定順序要求的項目列表。

使用實例：

<ul>
  <li>蘋果</li>
  <li>香蕉</li>
  <li>橘子</li>
</ul>

這個例子中的水果列表沒有特定的順序要求。

引用（Blockquotes）

引用用于表示頁面上的文本是從其他來源引用的。在HTML中，<blockquote>標簽用于定義長引用，而<q>標簽用于定義短引用。

長引用

長引用通常用于引用段落長度的文本。它通常會縮進，并且可以包含引用的來源信息。

使用實例：

<blockquote cite="http://example.com/quote-source">
  <p>這是一個長引用的實例，通常用于引用段落文本。引用的文本應該保持原作的語境和意義。</p>
  <footer>— 引用自 <cite>《引用來源的書名》</cite></footer>
</blockquote>

短引用

短引用用于行內文本，它通常不會改變文本的布局。

使用實例：

<p>正如某人所說：<q>知識就是力量。</q></p>

代碼（Code）

在網頁中展示代碼片段時，HTML提供了<code>標簽用于標記代碼。對于多行代碼或需要保持格式的代碼，可以使用<pre>標簽。

單行代碼

單行代碼用于展示簡短的代碼或命令。

使用實例：

<p>要添加一個段落，你可以使用<code><p>...</p></code>標簽。</p>

多行代碼

多行代碼或需要保持原始格式的代碼使用<pre>和<code>標簽組合使用。

使用實例：

<pre><code>function greet(name) {
  return 'Hello, ' + name + '!';
}</code></pre>

在這個例子中，<pre>標簽保持了代碼的格式，而<code>標簽表示文本是代碼。

結論

HTML中的列表、引用和代碼是構建清晰、有組織的網頁內容的重要工具。列表幫助用戶理解信息的結構，引用增加了內容的可信度，而代碼的正確展示對于教學和技術文章來說至關重要。通過熟練運用這些元素，你可以提高網頁的專業性，使內容對用戶更加友好和易于理解。

.標簽語義化

提到標簽，很多剛入門前端開發的人，肯定都會很納悶，這么多HTML標簽我如何記住呢？我又應該根據什么依據去正確使用它呢？其實這樣的問題，我剛開始和大家一樣苦悶，但是在我學習Web頁面開發的過程中，然后不斷的積累，不斷的總結，發現要想記住HTML標簽以及怎樣更好的去使用這些標簽，需要做到以下三點：

第一點：不要死記硬背，沒意義，只需要記住常用的哪幾個足矣。

第二點：根據內容選擇使用HTML標簽，什么意思呢？見下文分解。

第三點：遵循W3C的規范。

首先，第一點咱們就不用說，不讓死記硬背，就是要多寫頁面，多敲代碼，久而久之孰能生巧，巧能生花，慢慢的你就能記住這些標簽了，而且在開發頁面的過程中，你們會發現，咱們最常用的也就是那么幾個而已。

其次，第二點根據內容選擇使用HTML標簽，這一點非常關鍵，因為你掌握了這一點，你能很好地去使用HTML標簽，并且能讓頁面變得很優質，這也會提高你網頁被搜索引擎收錄。

最后，也就是第三點，這一點自然不用懷疑，如果要想讓頁面更好的在不同的瀏覽器中呈現出一致的效果，那么必須遵循W3C的規范。

說了這么多，只是一些學習需要注意的問題，下面才是真正解開怎樣去使用和記住標簽這個謎團的方法。

我們在使用標簽的過程中，大家會發現類似的標簽，比如標題標簽（h1-h6）、p（段落標簽）、a（超鏈接標簽）以及圖片標簽（img）等，通過這些標簽的名稱，咱們是不是不難理解吧，很直觀的就知道這些標簽該怎么，用于何處。而這些名稱的含義就是我們所說的標簽語義化。隨著智能手機的出來，移動Web都是通過H5去開發頁面，而H5中的HTML標簽就比之前版本的HTML標簽更加具有語義化。

那么什么是標簽語義化呢？所謂的標簽語義化，指的就是標簽所代表的含義。咱們可以通過標簽的含義，正確地去使用它。

標簽語義化的作用：

通過使用語義化標簽，更能精準地將其把內容呈現出來。
通過使用語義化標簽，讓頁面結構更加的清晰，方便代碼的閱讀和維護。
能讓瀏覽器或網絡爬蟲更好地解析，從而更好地分析和抓取網頁中的內容。
使用語義化標簽還能讓搜索引擎得到更好的優化。

如下圖所示，通過使用語義化標簽和沒使用任何標簽，就能直觀感受到語義化標簽的好處。

普通的文本和使用語義化標簽后的效果對比圖

那么如何去判斷一個頁面中，語義化是否良好呢？很簡單，直接扒掉CSS這層漂亮的衣服，當我們把CSS去掉后，如果頁面中的結構依然組織有序，并且有良好的可讀性，那么它就是非常良好的。

如何去使用這些標簽呢？首先根據內容確定語義化的標簽，其次再根據呈現需求，使用CSS樣式。因此HTML標簽并非通過死記硬背，而是通過在使用的過程中，利用HTML標簽的語義化去記憶。如下圖所示，通過使用語義化標簽，瞬間就能把普通的文本，以更清晰的結構呈現出來。

使用語義化的普通文本，變得更為結構清晰

2.常用標簽分類匯總

通常我們常見的標簽有標題標簽、段落標簽、水平線標簽、換行標簽以及div和span標簽，這些標簽又被統稱為排版標簽。

在開發中，排版標簽主要是和CSS搭配使用，主要是用于顯示網頁的整體結構，也是網頁布局中常用的標簽。下面我一一了解一下。

排版標簽：

【1】標題標簽（h1-h6）

縮寫來源：標題標簽的英文單詞是head，因此它使用它的縮寫h來表示。
語義：標題標簽主要是用于突顯標題內容，它是h1-h6（分為1級標題、2級標題、3級標題......6級標題），級別依次遞減。級別越小，標題就會越小。
語法格式如下：

標題標簽的使用

呈現的效果如下：

呈現的效果

一句話總結：使用了標題標簽的文字會加粗，會根據級別顯示文字的大小，并且一行只能放一個標題。

【2】段落標簽（p）

縮寫來源：p標簽的英文單詞是paragraph，表示段落的意思。
語義：p標簽可以把html文檔分割為若干段落。在網頁中要想把文字以段落的形式呈現，并且有條不紊的，那么段落就是必備的標簽。
語法格式如下：

p標簽語法格式

【3】水平線標簽（hr）

縮寫來源：hr的英文單詞是horizontal，表示橫線的意思。
語義：它表示分隔線，用于將文字內容分隔開，讓文檔結構看起來更加清晰，層次分明。當然在網頁中除了使用分隔線（hr）標簽來實現，還可以通過圖片插入以及CSS樣式來實現，只不過使用hr標簽是最簡單的方式。提示：CSS樣式是頁面中的重點，此處主要是介紹HTML，因此暫不做詳細說明。
語法格式：<hr />。
標簽特點：它是一個單標簽，hr標簽默認是以水平線的樣式進行顯示。

【4】換行標簽（br）

縮寫來源：br的英文單詞是break，打斷、換行的意思。
語義：表示換行的意思。在html中，一個段落的文字會從左到右依次排列顯示，直到瀏覽器窗口的最右端，才會自動換行。如果我們在實際開發中碰到需要將文本內容強制換行顯示的，此時就可以使用換行標簽實現。
語法格式：<br />。
標簽特點：它也是一個單標簽。
示例：將以下內容通過br標簽強制換行

文本

呈現效果：

使用br標簽后的效果

【5】div和span標簽

縮寫來源：div的英文是division，表示分割、分區的意思。span沒有縮寫，表示跨度、跨距和范圍的意思。
語義：div和span標簽，沒有任何語言，主要是用于網頁布局使用。
語法格式：<div>這是一個div盒子</div> <span>這是一個span盒子</span>
div和span的區別：div標簽，主要是用于布局，在沒有使用其它干預的情況下，一行只能放一個div。而span標簽，也是用來布局，在沒有任何其它的干預的情況下，一行上可以放很多span標簽。此處的效果，大家可以根據語法，自行在實現查看一下對比效果。

最后給大家來一個完美的總結：

排版標簽的匯總

難道這就完了嗎？咱們的標簽就只有這些常用的嗎？那當然不是，咱們接下來再看我們的文本格式化標簽。

文本格式化標簽

文本格式化標簽的作用：通常文本格式化標簽主要用于網頁中文字樣式的設置，比如字體加粗、斜體或下劃線等效果，當然后期也會通過CSS樣式來實現，會更加完美。

常見的文本格式化標簽如下：

文本格式化標簽

它們分別的區別：

b和strong：b標簽只是加粗，strong除了加粗，還具有強調的意思，更具語義化。
i和em：i只是讓文本顯示斜體的效果，而em在斜體的效果上加強了語義。
s和del：s只是讓文本顯示刪除線，而得了不僅顯示刪除線，還加強了語義。
u和ins：u只是添加了下劃線，而ins不僅顯示了下劃線，還加強了語義。

我么網頁中除了排版標簽、文本格式化標簽，當然還少不了圖片標簽（img），通過圖片的展示，會讓整個頁面更加的生動形象。那么下面再來看一下這個標簽吧。

圖片標簽（img）

縮寫來源：img的英文單詞是image，表示圖像、影像的意思。
語義：用于顯示圖片內容。
語法格式：<img src='圖像url' />，在這個的語法中，我們發現img標簽使用了src屬性，這個屬性主要是用于指定圖像的文件路徑，也是img的必須屬性。
img標簽常見屬性如下所示：

img標簽屬性

標簽特點：img標簽主要是用于在網頁中插入圖像，它是一個單標簽。
知識點擴展：通過img標簽，我們會發現，html標簽除了自身外，它們還具有一些屬性，這些屬性，我們稱為標簽屬性，通過標簽屬性可以設置標簽的一些外在特性。標簽屬性的基本語法格式：<標簽名屬性1="值1" 屬性2="值2" ...>內容 </標簽名>。

標簽屬性的特點：

一個標簽可以擁有多個屬性，必須寫在開始標簽中，位于標簽名后面。
屬性之間不分先后順序，標簽名與屬性、屬性與屬性之間均以空格分開。
任何標簽的屬性都有默認值，省略該屬性則使用默認值。
標簽的屬性采用的是鍵值對的格式key="value"的形式。

圖片標簽屬性使用

鏈接標簽

縮寫來源：a標簽的英文單詞是anchor，表示錨、鐵錨的意思。
語義：表示超文本鏈接。
語法格式：<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>。
常見的屬性：

a標簽的常見屬性

提示：

比如添加作為外部鏈接，需要添加外部地址。
內部鏈接，就是頁面直接內部相互鏈接，因此只需要使用名稱即可，比如

內部鏈接地址

如果沒有確定鏈接目標，通常使用"#"表示暫時空鏈接。
除了可以創建文本鏈接，還可以給網頁中的元素，如圖像、表格、音頻、視頻都可以添加超鏈接。

注釋標簽

注釋標簽：用于在HTML文檔中添加一些便于閱讀和理解，但又不需要顯示在頁面中的文字說明，此時就需要使用注釋標簽。它是HTML中的一種特殊標簽，它不會在瀏覽器中顯示，但是會在源代碼中查看到。
語法格式：

注釋標簽

提示：注釋通常是給咱們開發者看的，程序是不會執行這個代碼的。

好了，各位小伙伴，今天我就給大家分享到這兒了，希望我給大家總結的內容，能幫到正在瀏覽我這篇內容的前端開發者，也希望你們有所收獲。如果喜歡的，可以點擊關注，會繼續給大家分享更多的內容。

在線咨詢

上一篇：鄂小豚e路護企 - 第1期：@企業，遇到“冒牌”，這
下一篇：e企守“滬”！浦東互聯網企業為宅家市民提供貼心服務

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JavaScript this關鍵字：為何如此關鍵？

1. 全局環境中的this

2. 函數調用中的this

3. 方法調用中的this

4. 構造函數中的this

5. 箭頭函數中的this

6. 顯式設置this

使用call()

使用apply()

使用bind()

列表（Lists）

有序列表（Ordered Lists）

使用實例：

無序列表（Unordered Lists）

使用實例：

引用（Blockquotes）

長引用

使用實例：

短引用

使用實例：

代碼（Code）

單行代碼

使用實例：

多行代碼

使用實例：

結論

您的項目需求