Ein Artikel, der diesen Punkt versteht und 70 % der Front-End-Leute erreicht
Sep 06, 2022 pm 05:03 PMEin Kollege blieb aufgrund des dadurch angezeigten Bug
-Problems, vue2 hat dieses Zeigeproblem
h?ngen und die Pfeilfunktion wurde verwendet, was dazu führte, dass der entsprechende props
>. Er wusste es nicht, als ich es ihm vorstellte, und dann habe ich mir bewusst die Front-End-Kommunikationsgruppe angesehen. Bisher k?nnen es mindestens 70 % der Front-End-Programmierer nicht verstehen dies code>Weisen Sie darauf hin, wenn Sie nichts gelernt haben, geben Sie mir bitte eine gro?e Klappe. <code>bug
,vue2的this指向問題
,使用了箭頭函數(shù),導(dǎo)致拿不到對應(yīng)的props
。當(dāng)我給他介紹的時候他竟然不知道,隨后也刻意的看了一下前端交流群,至今最起碼還有70%以上的前端程序員搞不明白,今天給大家分享一下this
指向,如果啥都沒學(xué)會,請給我一個大嘴巴子。
1. 調(diào)用位置
- 作用域跟在哪里定義有關(guān),與在哪里執(zhí)行無關(guān)
-
this
指向跟在哪里定義無關(guān),跟如何調(diào)用,通過什么樣的形式調(diào)用有關(guān) -
this
(這個) 這個函數(shù)如何被調(diào)用(方便記憶) - 為了方便理解,默認情況下不開啟嚴格模式
2. 綁定規(guī)則
??上面我們介紹了,this
的指向主要跟通過什么樣的形式調(diào)用有關(guān)。接下來我就給大家介紹一下調(diào)用規(guī)則,沒有規(guī)矩不成方圓,大家把這幾種調(diào)用規(guī)則牢記于心就行了,沒有什么難的地方。
- 你必須找到調(diào)用位置,然后判斷是下面四種的哪一種綁定規(guī)則
- 其次你要也要曉得,這四種綁定規(guī)則的優(yōu)先順序
- 這兩點你都知道了 知道this的指向?qū)τ谀銇碚f 易如反掌
2.1 默認綁定
?? 函數(shù)最常用的調(diào)用方式,調(diào)用函數(shù)的類型:獨立函數(shù)調(diào)用
function?bar()?{ ??console.log(this)?//?window }
- bar是不帶任何修飾符的直接調(diào)用 所以為默認綁定 為
window
- 在嚴格模式下 這里的
this
為undefined
2.2 隱式綁定
??用最通俗的話表示就是:對象擁有某個方法,通過這個對象訪問方法且直接調(diào)用(注:箭頭函數(shù)特殊,下面會講解)
const?info?=?{ ??fullName:?'ice', ??getName:?function()?{ ????console.log(this.fullName) ??} } info.getName()?//?'ice'
- 這個函數(shù)被
info
發(fā)起調(diào)用,進行了隱式綁定,所以當(dāng)前的this
為info
,通過this.fullName
毫無疑問的就訪問值為ice
隱式丟失 普通
??有些情況下會進行隱式丟失,被隱式綁定的函數(shù)會丟失綁定對象,也就是說它為變?yōu)槟J綁定,默認綁定的this
值,為window
還是undefined
取決于您當(dāng)前所處的環(huán)境,是否為嚴格模式。
const?info?=?{ ??fullName:?'ice', ??getName:?function()?{ ????console.log(this.fullName) ??} } const?fn?=?info.getName fn()?//undefined
??這種情況下就進行了隱式丟失,丟失了綁定的對象,為什么會產(chǎn)生這樣的問題呢?如果熟悉內(nèi)存的小伙伴,就會很容易理解。
- 這里并沒有直接調(diào)用,而是通過
info
找到了對應(yīng)getName
的內(nèi)存地址,賦值給變量fn
- 然后通過
fn
直接進行了調(diào)用 - 其實這里的本質(zhì) 就是獨立函數(shù)調(diào)用 也就是為
window
,從window
中取出fullName
屬性,必定為undefined
隱式丟失 進階
這里大家首先要理解什么是回調(diào)函數(shù)。其實可以這樣理解,就是我現(xiàn)在不調(diào)用它,把他通過參數(shù)的形式傳入到其他地方,在別的地方調(diào)用它。
//申明變量關(guān)鍵字必須為var var?fullName?=?'panpan' const?info?=?{ ??fullName:?'ice', ??getName:?function()?{ ????console.log(this.fullName) ??} } function?bar(fn)?{ ??//fn?=?info.getName ??fn()?//?panpan } bar(info.getName)
- 首先
bar
中的fn
為一個回調(diào)函數(shù) -
fn = info.getName
參數(shù)傳遞就是一種隱式賦值,其實跟上面的隱式丟失是一個意思,他們都是指向的fn = info.getName
引用,也就是它們的內(nèi)存地址 - 因為他們的
this
丟失,也就是函數(shù)獨立調(diào)用,默認綁定規(guī)則,this
為全局的window
對象 - 注意: 為什么申明必須為
var
呢?- 因為只有
var
申明的變量才會加入到全局window
對象上 - 如果采用
letconst
則不是,具體的后續(xù)介紹一下這兩個申明變量的關(guān)鍵字
- 因為只有
- 但是有些場景,我不想讓隱式丟失怎么辦,下面就來給大家介紹一下顯示綁定,也就是固定調(diào)用。
2.3 顯示綁定
??但是在某些場景下,this
的改變都是意想不到的,實際上我們無法控制回調(diào)函數(shù)的執(zhí)行方式,因此沒有辦法控制調(diào)用位置已得到期望的綁定即this指向。
接下來的顯示綁定就可以用來解決這一隱式丟失問題。
2.3.1 call/apply/bind
??js中的 ”所有“函數(shù)都有一些有用的特性,這個跟它的原型鏈有關(guān)系,后續(xù)我會在原型介紹,通過原型鏈js中變相實現(xiàn)繼承的方法,其中call/apply/bind
1. Aufrufort
- Der Bereich h?ngt davon ab, wo er definiert ist, nicht davon, wo er ausgeführt wird
-
this
zeigt auf eine Funktion, die nichts damit zu tun hat, wo sie definiert ist, sondern wie sie aufgerufen wird und in welcher Form this(this) So wird aufgerufen (leicht zu merken)
- Um das Verst?ndnis zu erleichtern, ist der strikte Modus standardm??ig nicht aktiviert
2. Bindungsregeln
? Wie wir oben eingeführt haben, h?ngt die Ausrichtung vonthis
haupts?chlich mit der Form des Aufrufs zusammen. Als n?chstes werde ich Ihnen die Anrufregeln vorstellen. Ohne Regeln ist nichts vollst?ndig. ??- Sie müssen den Anrufort finden und dann bestimmen, welche der folgenden vier verbindlichen Regeln
- Zweitens müssen Sie auch die Priorit?t dieser vier verbindlichen Regeln kennen
- Sie kennen diese beiden Punkte und es f?llt Ihnen leicht, die Richtung zu kennen
2.1 Standardbindung
?????Die gebr?uchlichste Art, eine Funktion aufzurufen, die Art des Funktionsaufrufs: unabh?ngiger Funktionsaufruf??var?fullName?=?'panpan' const?info?=?{ ??fullName:?'ice', ??getName:?function(age,?height)?{ ????console.log(this.fullName,?age,?height) ??} } function?bar(fn)?{ ??fn.call(info,?20,?1.88)?//ice?20?1.88 } bar(info.getName)
- bar ist ein direkter Aufruf ohne Modifikatoren, daher ist die Standardbindung
window
- Im strikten Modus ist
dies
hierundefiniert
2.2 Implizite Bindung
???? In den g?ngigsten Worten bedeutet dies: Das Objekt hat eine bestimmte Methode, und auf die Methode wird über dieses Objekt zugegriffen und direkt aufgerufen (Hinweis: Pfeilfunktionen sind etwas Besonderes, werde ich erkl?ren unten) ??var?fullName?=?'panpan' const?info?=?{ ??fullName:?'ice', ??getName:?function(age,?height)?{ ????console.log(this.fullName,?age,?height) ??} } function?bar(fn)?{ ??fn.apply(info,?[20,?1.88])?//ice?20?1.88 } bar(info.getName)
- Diese Funktion wird von
info
aufgerufen und implizit gebunden, sodass der aktuellethis
info ist, bis this.fullName
Es besteht kein Zweifel, dass der Zugriffswertice
this
-Wert der Standardbindung, unabh?ngig davon, ob es sich um window handelt. code> oder <code>undefiniert
h?ngt von der Umgebung ab, in der Sie sich gerade befinden, und davon, ob es sich um den strikten Modus handelt. ??var?fullName?=?'panpan' const?info?=?{ ??fullName:?'ice', ??getName:?function(age,?height)?{ ????console.log(this.fullName,?age,?height)?//ice?20?1.88 ??} } function?bar(fn)?{ ??let?newFn?=?fn.bind(info,?20) ??newFn(1.88) } bar(info.getName)????In diesem Fall wird ein impliziter Verlust durchgeführt und das gebundene Objekt geht verloren. Warum tritt ein solches Problem auf? Wenn Sie mit dem Ged?chtnis vertraut sind, wird es leicht zu verstehen sein. ??
- Hier gibt es keinen direkten Aufruf, aber die Speicheradresse, die
getName
entspricht, wird überinfo
gefunden und der Variablenfn zugewiesen code>
- Dann erfolgte der Aufruf direkt über
fn
- Tats?chlich handelt es sich hier im Wesentlichen um einen unabh?ngigen Funktionsaufruf, n?mlich
window, from fullName
aus code>window
undefiniert
??Implizit sein Loss Advanced Hier muss jeder zun?chst verstehen, was eine Callback-Funktion ist. Tats?chlich kann es so verstanden werden, das hei?t, ich rufe es jetzt nicht auf, sondern übergebe es in Form von Parametern an andere Stellen und rufe es woanders auf. ??
function?Person(name,?age)?{ ??this.name?=?name ??this.age?=?age } const?p1?=?new?Person('ice',?20) console.log(p1)?//?{name:'ice',?age:20}
- Zuallererst ist
fn
inbar
eine Callback-Funktion fn = info.getName code> Die Parameterübergabe ist eine Art implizite Zuweisung. Sie hat tats?chlich die gleiche Bedeutung wie der oben genannte implizite Verlust. Sie verweisen alle auf <code>fn = info.getName
-Referenzen, die ihre Speicheradressen sind. li>Da ihrthis
verloren geht, wird die Funktion unabh?ngig aufgerufen und die Standardbindungsregel lautet, dassthis
das globalewindow ist. code> Objekt
- Hinweis: Warum muss die Deklaration
var
sein?- Weil nur durch
var
deklarierte Variablen zum globalenwindow
-Objekt hinzugefügt werden - Wenn
letconst
wird verwendet > Nein, ich werde die beiden Schlüsselw?rter zum Deklarieren von Variablen sp?ter im Detail vorstellen.
- Weil nur durch
- Aber in einigen Szenarien m?chte ich keinen impliziten Verlust ?Ich werde Ihnen sagen, was als n?chstes zu tun ist. Lassen Sie uns die Anzeigebindung einführen, bei der es sich um einen festen Aufruf handelt.
2.3 Anzeigebindung
?? ? Aber in einigen Szenarien istdies
The ?nderungen sind unerwartet. Tats?chlich haben wir keine Kontrolle darüber, wie die Rückruffunktion ausgeführt wird, daher gibt es keine M?glichkeit zu kontrollieren, ob der aufrufende Ort die erwartete Bindung erhalten hat, das hei?t, dass dies darauf verweist. ????Die n?chste Anzeigebindung kann verwendet werden, um dieses implizite Verlustproblem zu l?sen. ??2.3.1 call/apply/bind
??? Alle Funktionen in js haben einige nützliche Funktionen, diese ist die gleiche wie die Prototypkette von Rufen Sie sie in Funktionen auf. ??2.3.2 call
-
call()
方法使用一個指定的this
值和單獨給出的一個或多個參數(shù)來調(diào)用一個函數(shù)。- 第一個參數(shù)為固定綁定的
this
對象 - 第二個參數(shù)以及二以后的參數(shù),都是作為參數(shù)進行傳遞給所調(diào)用的函數(shù)
- 第一個參數(shù)為固定綁定的
- 備注
- 該方法的語法和作用與?
apply()
?方法類似,只有一個區(qū)別,就是?call()
?方法接受的是一個參數(shù)列表,而?apply()
?方法接受的是一個包含多個參數(shù)的數(shù)組。
- 該方法的語法和作用與?
var?fullName?=?'panpan' const?info?=?{ ??fullName:?'ice', ??getName:?function(age,?height)?{ ????console.log(this.fullName,?age,?height) ??} } function?bar(fn)?{ ??fn.call(info,?20,?1.88)?//ice?20?1.88 } bar(info.getName)
2.3.3 apply
- 與
call
的方法類似,只是參數(shù)列表有所不同- 參數(shù)
-
call
?參數(shù)為單個傳遞 -
apply
參數(shù)為數(shù)組傳遞
-
- 參數(shù)
var?fullName?=?'panpan' const?info?=?{ ??fullName:?'ice', ??getName:?function(age,?height)?{ ????console.log(this.fullName,?age,?height) ??} } function?bar(fn)?{ ??fn.apply(info,?[20,?1.88])?//ice?20?1.88 } bar(info.getName)
2.3.4 bind
-
bind
與apply/call
之間有所不同,bind
傳入this
,則是返回一個this
綁定后的函數(shù),調(diào)用返回后的函數(shù),就可以拿到期望的this。 - 參數(shù)傳遞則是
- 調(diào)用
bind
時,可以傳入?yún)?shù) - 調(diào)用
bind
返回的參數(shù)也可以進行傳參
- 調(diào)用
var?fullName?=?'panpan' const?info?=?{ ??fullName:?'ice', ??getName:?function(age,?height)?{ ????console.log(this.fullName,?age,?height)?//ice?20?1.88 ??} } function?bar(fn)?{ ??let?newFn?=?fn.bind(info,?20) ??newFn(1.88) } bar(info.getName)
2.4 new綁定
??談到new
關(guān)鍵字,就不得不談構(gòu)造函數(shù),也就是JS中的 "類",后續(xù)原型篇章在跟大家繼續(xù)探討這個new關(guān)鍵字,首先要明白以下幾點,new Fn()
的時候發(fā)生了什么,有利于我們理解this
的指向。
創(chuàng)建了一個空對象
將this指向所創(chuàng)建出來的對象
把這個對象的[[prototype]] 指向了構(gòu)造函數(shù)的prototype屬性
執(zhí)行代碼塊代碼
如果沒有明確返回一個非空對象,那么返回的對象就是這個創(chuàng)建出來的對象
function?Person(name,?age)?{ ??this.name?=?name ??this.age?=?age } const?p1?=?new?Person('ice',?20) console.log(p1)?//?{name:'ice',?age:20}
- 當(dāng)我調(diào)用
new Person()
的時候,那個this所指向的其實就是p1
對象
3. 綁定優(yōu)先級
3.1 隱式綁定 > 默認綁定
function?bar()?{ ??console.log(this)?//info } const?info?=?{ ??bar:?bar } info.bar()
- 雖然這邊比較有些勉強,有些開發(fā)者會認為這是默認綁定的規(guī)則不能直接的顯示誰的優(yōu)先級高
- 但是從另外一個角度來看,隱式綁定,的this丟失以后this才會指向
widonw或者undefined
,變相的可以認為隱式綁定 > 默認綁定
3.2 顯示綁定 > 隱式綁定
var?fullName?=?'global?ice' const?info?=?{ ??fullName:?'ice', ??getName:?function()?{ ????console.log(this.fullName)? ??} } info.getName.call(this)?//global?ice info.getName.apply(this)?//global?ice info.getName.bind(this)()?//global?ice
- 通過隱式綁定和顯示綁定的一起使用很明顯 顯示綁定 > 隱式綁定
3.3 bind(硬綁定) > ?apply/call
function?bar()?{ ??console.log(this)?//123 } const?newFn?=?bar.bind(123) newFn.call(456)
3.4 new綁定 > bind綁定
首先我們來說一下,為什么是和bind
比較,而不能對call
和apply
比較,思考下面代碼
const?info?=?{ ??height:?1.88 } function?Person(name,?age)?{ ??this.name?=?name ??this.age?=?age } const?p1?=?new?Person.call('ice',?20) //報錯:?Uncaught?TypeError:?Person.call?is?not?a?constructor
new綁定和bind綁定比較
const?info?=?{ ??height:?1.88 } function?Person(name,?age)?{ ??this.name?=?name ??this.age?=?age } const?hasBindPerson?=?Person.bind(info) const?p1?=?new?hasBindPerson('ice',?20) console.log(info)?//{height:?1.88}
- 我們通過
bind
對Person
進行了一次劫持,硬綁定了this為info
對象 -
new
返回的固定this的函數(shù) - 但是我們發(fā)現(xiàn) 并不能干預(yù)this的指向
3.5 總結(jié)
new關(guān)鍵字
> bind
> apply/call
> 隱式綁定
> 默認綁定
4. 箭頭函數(shù) (arrow function)
首先箭頭函數(shù)是ES6
新增的語法
const?foo?=?()?=>?{}
4.1 箭頭函數(shù)this
var?fullName?=?'global?ice' const?info?=?{ ??fullName:?'ice', ??getName:?()?=>?{ ????console.log(this.fullName) ??} } info.getName()?//global?ice
- 你會神奇的發(fā)現(xiàn)? 為什么不是默認綁定,打印結(jié)果為
ice
- 其實這是
ES6
的新特性,箭頭函數(shù)不綁定this
,它的this
是上一層作用域,上一層作用域為window
- 所以打印的結(jié)果是
global ice
4.2 箭頭函數(shù)的應(yīng)用場景 進階
- 需求: 在
getObjName
通過this
拿到info
中的fullName
(值為ice
的fullName
)
const?info?=?{ ??fullName:?'ice', ??getName:?function()?{ ????let?_this?=?this ????return?{ ??????fullName:?'panpan', ??????getObjName:?function()?{ ????????console.log(this)?//?obj ????????console.log(_this.fullName) ??????} ????} ??} } const?obj?=?info.getName() obj.getObjName()
當(dāng)我調(diào)用
info.getName()
返回了一個新對象當(dāng)我調(diào)用返回對象的
getObjName
方法時,我想拿到最外層的fullName
,我通過,getObjName
的this訪問,拿到的this卻是obj
,不是我想要的結(jié)果我需要在調(diào)用
info.getName()
把this保存下來,info.getName()
是通過隱式調(diào)用,所以它內(nèi)部的this就是info對象getObjName
是obj對象,因為也是隱式綁定,this必定是obj對象,繞了一大圈我只是想拿到上層作用域的this而已,恰好箭頭函數(shù)解決了這一問題
const?info?=?{ ??fullName:?'ice', ??getName:?function()?{ ????return?{ ??????fullName:?'panpan', ??????getObjName:?()?=>?{ ????????console.log(this.fullName) ??????} ????} ??} } const?obj?=?info.getName() obj.getObjName()
5. 總結(jié)
5.1 this的四種綁定規(guī)則
默認綁定
隱式綁定
顯示綁定 apply/call/bind(也稱硬綁定)
new綁定
5.2 this的優(yōu)先級 從高到低
new綁定
bind
call/apply
隱式綁定
默認綁定
6. 結(jié)語
??當(dāng)一切都看起來不起作用的時候,我就會像個石匠一樣去敲打石頭,可能敲100次,石頭沒有任何反應(yīng),但是101次,石頭可能就會裂為兩半 我知道并不是第101次起了作用,而是前面積累所致。
??大家有疑惑可以在評論區(qū)留言 第一時間為大家解答。
(學(xué)習(xí)視頻分享:web前端開發(fā))

Hei?e KI -Werkzeuge

Undress AI Tool
Ausziehbilder kostenlos

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!

Hei?er Artikel

Hei?e Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

WebSocket und JavaScript: Schlüsseltechnologien zur Realisierung von Echtzeit-überwachungssystemen Einführung: Mit der rasanten Entwicklung der Internet-Technologie wurden Echtzeit-überwachungssysteme in verschiedenen Bereichen weit verbreitet eingesetzt. Eine der Schlüsseltechnologien zur Erzielung einer Echtzeitüberwachung ist die Kombination von WebSocket und JavaScript. In diesem Artikel wird die Anwendung von WebSocket und JavaScript in Echtzeitüberwachungssystemen vorgestellt, Codebeispiele gegeben und deren Implementierungsprinzipien ausführlich erl?utert. 1. WebSocket-Technologie

So implementieren Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem. Einführung: Mit der kontinuierlichen Weiterentwicklung der Technologie ist die Spracherkennungstechnologie zu einem wichtigen Bestandteil des Bereichs der künstlichen Intelligenz geworden. Das auf WebSocket und JavaScript basierende Online-Spracherkennungssystem zeichnet sich durch geringe Latenz, Echtzeit und plattformübergreifende Eigenschaften aus und hat sich zu einer weit verbreiteten L?sung entwickelt. In diesem Artikel wird erl?utert, wie Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem implementieren.

Einführung in die Verwendung von JavaScript und WebSocket zur Implementierung eines Online-Bestellsystems in Echtzeit: Mit der Popularit?t des Internets und dem Fortschritt der Technologie haben immer mehr Restaurants damit begonnen, Online-Bestelldienste anzubieten. Um ein Echtzeit-Online-Bestellsystem zu implementieren, k?nnen wir JavaScript und WebSocket-Technologie verwenden. WebSocket ist ein Vollduplex-Kommunikationsprotokoll, das auf dem TCP-Protokoll basiert und eine bidirektionale Kommunikation zwischen Client und Server in Echtzeit realisieren kann. Im Echtzeit-Online-Bestellsystem, wenn der Benutzer Gerichte ausw?hlt und eine Bestellung aufgibt

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Einführung: Heutzutage ist die Genauigkeit von Wettervorhersagen für das t?gliche Leben und die Entscheidungsfindung von gro?er Bedeutung. Mit der Weiterentwicklung der Technologie k?nnen wir genauere und zuverl?ssigere Wettervorhersagen liefern, indem wir Wetterdaten in Echtzeit erhalten. In diesem Artikel erfahren Sie, wie Sie mit JavaScript und WebSocket-Technologie ein effizientes Echtzeit-Wettervorhersagesystem aufbauen. In diesem Artikel wird der Implementierungsprozess anhand spezifischer Codebeispiele demonstriert. Wir

So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript. Im heutigen digitalen Zeitalter müssen immer mehr Unternehmen und Dienste Online-Reservierungsfunktionen bereitstellen. Es ist von entscheidender Bedeutung, ein effizientes Online-Reservierungssystem in Echtzeit zu implementieren. In diesem Artikel wird erl?utert, wie Sie mit WebSocket und JavaScript ein Online-Reservierungssystem implementieren, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist WebSocket? WebSocket ist eine Vollduplex-Methode für eine einzelne TCP-Verbindung.

JavaScript-Tutorial: So erhalten Sie HTTP-Statuscode. Es sind spezifische Codebeispiele erforderlich. Vorwort: Bei der Webentwicklung ist h?ufig die Dateninteraktion mit dem Server erforderlich. Bei der Kommunikation mit dem Server müssen wir h?ufig den zurückgegebenen HTTP-Statuscode abrufen, um festzustellen, ob der Vorgang erfolgreich ist, und die entsprechende Verarbeitung basierend auf verschiedenen Statuscodes durchführen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript HTTP-Statuscodes abrufen und einige praktische Codebeispiele bereitstellen. Verwenden von XMLHttpRequest

Verwendung: In JavaScript wird die Methode insertBefore() verwendet, um einen neuen Knoten in den DOM-Baum einzufügen. Diese Methode erfordert zwei Parameter: den neuen Knoten, der eingefügt werden soll, und den Referenzknoten (d. h. den Knoten, an dem der neue Knoten eingefügt wird).

Einführung in die Methode zum Abrufen des HTTP-Statuscodes in JavaScript: Bei der Front-End-Entwicklung müssen wir uns h?ufig mit der Interaktion mit der Back-End-Schnittstelle befassen, und der HTTP-Statuscode ist ein sehr wichtiger Teil davon. Das Verstehen und Abrufen von HTTP-Statuscodes hilft uns, die von der Schnittstelle zurückgegebenen Daten besser zu verarbeiten. In diesem Artikel wird erl?utert, wie Sie mithilfe von JavaScript HTTP-Statuscodes erhalten, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist ein HTTP-Statuscode? HTTP-Statuscode bedeutet, dass der Dienst den Dienst anfordert, wenn er eine Anfrage an den Server initiiert