JavaScript this關(guān)鍵字：為何如此關(guān)鍵？

JavaScript this關(guān)鍵字：為何如此關(guān)鍵？如何正確綁定？

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

1. 全局環(huán)境中的this

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

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

2. 函數(shù)調(diào)用中的this

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

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

3. 方法調(diào)用中的this

當(dāng)一個函數(shù)被保存為某個對象的屬性時，我們稱之為方法。在方法調(diào)用中，this指向調(diào)用該方法的對象。

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

4. 構(gòu)造函數(shù)中的this

在構(gòu)造函數(shù)中，this指向新創(chuàng)建的對象實例。

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

5. 箭頭函數(shù)中的this

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

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

6. 顯式設(shè)置this

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

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

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

使用call()

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

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

使用apply()

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

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

使用bind()

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

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

理解這些this的指向規(guī)則，對于編寫清晰、可維護(hù)的JavaScript代碼至關(guān)重要。

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

列表（Lists）

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

有序列表（Ordered Lists）

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

使用實例：

<ol>
  <li>開啟電腦。</li>
  <li>打開瀏覽器。</li>
  <li>訪問網(wǎng)站。</li>
</ol>

在這個例子中，步驟按照順序排列，用戶應(yīng)該按照列表的順序執(zhí)行。

無序列表（Unordered Lists）

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

使用實例：

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

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

引用（Blockquotes）

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

長引用

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

使用實例：

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

短引用

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

使用實例：

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

代碼（Code）

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

單行代碼

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

使用實例：

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

多行代碼

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

使用實例：

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

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

結(jié)論

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

.標(biāo)簽語義化

提到標(biāo)簽，很多剛?cè)腴T前端開發(fā)的人，肯定都會很納悶，這么多HTML標(biāo)簽我如何記住呢？我又應(yīng)該根據(jù)什么依據(jù)去正確使用它呢？其實這樣的問題，我剛開始和大家一樣苦悶，但是在我學(xué)習(xí)Web頁面開發(fā)的過程中，然后不斷的積累，不斷的總結(jié)，發(fā)現(xiàn)要想記住HTML標(biāo)簽以及怎樣更好的去使用這些標(biāo)簽，需要做到以下三點：

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

第二點：根據(jù)內(nèi)容選擇使用HTML標(biāo)簽，什么意思呢？見下文分解。

第三點：遵循W3C的規(guī)范。

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

其次，第二點根據(jù)內(nèi)容選擇使用HTML標(biāo)簽，這一點非常關(guān)鍵，因為你掌握了這一點，你能很好地去使用HTML標(biāo)簽，并且能讓頁面變得很優(yōu)質(zhì)，這也會提高你網(wǎng)頁被搜索引擎收錄。

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

說了這么多，只是一些學(xué)習(xí)需要注意的問題，下面才是真正解開怎樣去使用和記住標(biāo)簽這個謎團(tuán)的方法。

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

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

標(biāo)簽語義化的作用：

通過使用語義化標(biāo)簽，更能精準(zhǔn)地將其把內(nèi)容呈現(xiàn)出來。
通過使用語義化標(biāo)簽，讓頁面結(jié)構(gòu)更加的清晰，方便代碼的閱讀和維護(hù)。
能讓瀏覽器或網(wǎng)絡(luò)爬蟲更好地解析，從而更好地分析和抓取網(wǎng)頁中的內(nèi)容。
使用語義化標(biāo)簽還能讓搜索引擎得到更好的優(yōu)化。

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

普通的文本和使用語義化標(biāo)簽后的效果對比圖

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

如何去使用這些標(biāo)簽?zāi)?？首先根?jù)內(nèi)容確定語義化的標(biāo)簽，其次再根據(jù)呈現(xiàn)需求，使用CSS樣式。因此HTML標(biāo)簽并非通過死記硬背，而是通過在使用的過程中，利用HTML標(biāo)簽的語義化去記憶。如下圖所示，通過使用語義化標(biāo)簽，瞬間就能把普通的文本，以更清晰的結(jié)構(gòu)呈現(xiàn)出來。

使用語義化的普通文本，變得更為結(jié)構(gòu)清晰

2.常用標(biāo)簽分類匯總

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

在開發(fā)中，排版標(biāo)簽主要是和CSS搭配使用，主要是用于顯示網(wǎng)頁的整體結(jié)構(gòu)，也是網(wǎng)頁布局中常用的標(biāo)簽。下面我一一了解一下。

排版標(biāo)簽：

【1】標(biāo)題標(biāo)簽（h1-h6）

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

標(biāo)題標(biāo)簽的使用

呈現(xiàn)的效果如下：

呈現(xiàn)的效果

一句話總結(jié)：使用了標(biāo)題標(biāo)簽的文字會加粗，會根據(jù)級別顯示文字的大小，并且一行只能放一個標(biāo)題。

【2】段落標(biāo)簽（p）

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

p標(biāo)簽語法格式

【3】水平線標(biāo)簽（hr）

縮寫來源：hr的英文單詞是horizontal，表示橫線的意思。
語義：它表示分隔線，用于將文字內(nèi)容分隔開，讓文檔結(jié)構(gòu)看起來更加清晰，層次分明。當(dāng)然在網(wǎng)頁中除了使用分隔線（hr）標(biāo)簽來實現(xiàn)，還可以通過圖片插入以及CSS樣式來實現(xiàn)，只不過使用hr標(biāo)簽是最簡單的方式。提示：CSS樣式是頁面中的重點，此處主要是介紹HTML，因此暫不做詳細(xì)說明。
語法格式：<hr />。
標(biāo)簽特點：它是一個單標(biāo)簽，hr標(biāo)簽?zāi)J(rèn)是以水平線的樣式進(jìn)行顯示。

【4】換行標(biāo)簽（br）

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

文本

呈現(xiàn)效果：

使用br標(biāo)簽后的效果

【5】div和span標(biāo)簽

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

最后給大家來一個完美的總結(jié)：

排版標(biāo)簽的匯總

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

文本格式化標(biāo)簽

文本格式化標(biāo)簽的作用：通常文本格式化標(biāo)簽主要用于網(wǎng)頁中文字樣式的設(shè)置，比如字體加粗、斜體或下劃線等效果，當(dāng)然后期也會通過CSS樣式來實現(xiàn)，會更加完美。

常見的文本格式化標(biāo)簽如下：

文本格式化標(biāo)簽

它們分別的區(qū)別：

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

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

圖片標(biāo)簽（img）

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

img標(biāo)簽屬性

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

標(biāo)簽屬性的特點：

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

圖片標(biāo)簽屬性使用

鏈接標(biāo)簽

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

a標(biāo)簽的常見屬性

提示：

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

內(nèi)部鏈接地址

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

注釋標(biāo)簽

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

注釋標(biāo)簽

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

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

在線咨詢

上一篇：鄂小豚e路護(hù)企 - 第1期：@企業(yè)，遇到“冒牌”，這
下一篇：e企守“滬”！浦東互聯(lián)網(wǎng)企業(yè)為宅家市民提供貼心服務(wù)

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

JavaScript this關(guān)鍵字：為何如此關(guān)鍵？

1. 全局環(huán)境中的this

2. 函數(shù)調(diào)用中的this

3. 方法調(diào)用中的this

4. 構(gòu)造函數(shù)中的this

5. 箭頭函數(shù)中的this

6. 顯式設(shè)置this

使用call()

使用apply()

使用bind()

列表（Lists）

有序列表（Ordered Lists）

使用實例：

無序列表（Unordered Lists）

使用實例：

引用（Blockquotes）

長引用

使用實例：

短引用

使用實例：

代碼（Code）

單行代碼

使用實例：

多行代碼

使用實例：

結(jié)論

您的項目需求

JavaScript this關(guān)鍵字：為何如此關(guān)鍵？