如何在JavaScript中擴展類 JavaScript中的繼承是通過類進行的。 假設你有一個類Animal： class Animal { breathe() { //... } } 所有的動物都會呼吸。我想這可以作為一個通則。 但不是所有的動物都會走路。有些動物可以飛行等。 所以我們可以通過擴展這個類來形成不同的種類，並從基類中繼承breathe()方法，同時提供特定的方法和屬性： class Fish extends Animal { swim() { //... } } class Bird extends Animal { fly() { //... } } 你可以使用new關鍵字實例化一個類的實例，最終得到一個對象： const randomAnimal = new Animal() const hummingbird = new Bird()
對於JavaScript編程語言中的提升機制做一個簡要解釋。 在執行JavaScript代碼之前，它會解析代碼並將所有的函數和變量聲明添加到它自己的內存中，並將它們保存在內存中。這就是所謂的提升機制。 對於函數聲明和函數表達式，我們有不同的行為。 對於函數聲明，我們可以在函數定義之前調用函數，並且我們的代碼將正常運行。但對於其他情況，我們將會得到錯誤。 一個通用的法則是在使用之前，總是先定義函數、變量、對象和類，以避免出現意外情況。 假設我們有一個函數： function bark() { alert('wof!') } 由於提升機制，我們可以在它被聲明之前調用bark()： bark() function bark() { alert('wof!') } 這種情況只適用於函數聲明，就像上面的例子一樣。 而對於函數表達式則不同。 這是一個函數表達式： bark() var bark = function() { alert('wof!') } 在這種情況下，var聲明會被提升並初始化為undefined，類似於下面的代碼： var bark = undefined bark() bark = function() { alert('wof!') } 運行此代碼將引發TypeError: bark is not a function錯誤。 const和let聲明也會被提升，但它們不像var一樣被初始化為undefined。 const bark = function() { alert('wof!') } 或者 let bark = function bark() { alert('wof!') } 在這種情況下，如果在聲明之前調用bark()，將引發ReferenceError: Cannot access 'bark' before initialization錯誤。...
我在使用Svelte時遇到了一個需求，需要在元素上動態應用一些CSS屬性，當其中一個變量具有特定的值時。 我找到的最簡單的解決方案是在selected變量值為true時添加一個HTML類，然後我寫了一些針對具有該類的元素的CSS： <style> /\* ...其他CSS... \*/ span.cell.selected { outline-color: lightblue; outline-style: dotted; } </style> <span class="cell {selected === true ? 'selected' : ''}"> {value} </span> 這種需求是如此常見，以至於Svelte添加了將類名綁定到變量值的功能： <span class="cell" class:selected="{selected}"> {value} </span> 更簡潔的方式是使用簡寫符號： <span class="cell" class:selected> {value} </span>