我相信學(xué)習新事物并評估我們所知的東西對自己的進(jìn)步非常有用，可以避免了我們覺(jué)得自己的知識過(guò)時(shí)的情況。在本文中，我將介紹一些常見(jiàn)的 JavaScript 知識。請享用!

1.聲明

查看以下代碼，并回答輸出的內容(以及原因)。

 

// situation 1 

console.log(person); 

var person = 'John'; 

 

// situation 2 

console.log(person); 

let person = 'Phill'; 

 

// situation 3 

console.log(person); 

const person = 'Frank'; 

 

// situation 4 

const person = 'Vanessa'; 

console.log(person); 

person = 'Mike'; 

console.log(person); 

 

// situation 5 

var person = 'John'; 

let person = 'Mike'; 

console.log(person); 

 

// situation 6 

var person = 'John'; 

if (person) { 

  let person = 'Mike'; 

  console.log(person); 

} 

console.log(person); 

說(shuō)明

 

Situation 1: 預期結果是在控制臺中看到文本 John，但是令人驚訝的是，我們看到記錄了undefined。想知道為什么嗎?

 

好吧，這是經(jīng)典的 JavaScript 在起作用。這種行為被稱(chēng)為提升。在后臺，該語(yǔ)言將變量聲明和值分配分為兩部分。不管變量最初由開(kāi)發(fā)人員在哪里聲明，變量都將移動(dòng)到頂部，聲明時(shí)將其值設置為 undefined?？雌饋?lái)像這樣：

 

var person; 

console.log(person); 

person = 'John'; 

Situation 2: 在這里，結果將是引用錯誤。

 

Uncaught ReferenceError: Cannot access 'person' before initialization 

錯誤文本說(shuō)明了一切。因為我們使用了關(guān)鍵字 let，所以我們的變量被提升，但沒(méi)有初始化，并且拋出該錯誤，通知我們正在嘗試訪(fǎng)問(wèn)未初始化的變量。在 ES6 中引入了關(guān)鍵字 let，使我們能夠使用塊作用域中的變量，從而幫助我們防止意外行為。

 

在這里，我們會(huì )得到與 Situation 2 中相同的錯誤。

 

不同之處在于我們使用了關(guān)鍵字 const，從而防止在初始化后重新分配變量。 ES6 中也引入了此關(guān)鍵字。

 

Situation 4: 在這種情況下，我們可以看到關(guān)鍵字 const 是如何工作的，以及它如何避免無(wú)意中重新分配變量。在我們的示例中，首先會(huì )在控制臺中看到 Vanessa，然后是一個(gè)類(lèi)型錯誤。

 

Uncaught TypeError: Assignment to constant variable 

const 變量的使用隨著(zhù)我們的代碼庫呈指數增長(cháng)。

 

Situation 5: 如果已經(jīng)在某個(gè)作用域內使用關(guān)鍵字 var 定義了變量，則在同一作用域中用關(guān)鍵字 let 再次聲明該變量將會(huì )引發(fā)錯誤。

 

因此，在我們的示例中，將不會(huì )輸出任何內容，并且會(huì )看到語(yǔ)法錯誤提示。

 

Uncaught SyntaxError: Identifier 'person' has already been declared 

Situation 6: 我們分別有一個(gè)函數作用域的變量，和塊作用域的變量。在這種情況下，它們是否有相同的名字或標識符并不重要。

 

在控制臺中，我們應該看到 Mike 和 John 被依次輸出。為什么?

 

因為關(guān)鍵字 let 為我們提供了塊作用域內的變量，這意味著(zhù)它們僅存在于自己創(chuàng )建的作用域內，在這種情況下，位于if...else 語(yǔ)句中。內部變量?jì)?yōu)先于外部變量，這就是為什么我們可以使用相同標識符的原因。

 

2.繼承

考慮以下類(lèi)，并嘗試回答輸出了什么以及為什么。

 

class Person { 

  constructor() { 

    this.sayHello = () => { 

      return 'Hello'; 

    } 

  } 

 

  sayBye() { 

    return 'Bye'; 

  } 

} 

 

class Student extends Person { 

  sayHello() { 

    return 'Hello from Student'; 

  } 

} 

 

const student = new Student(); 

console.log(student.sayHello()); 

說(shuō)明

 

如果你的答案是 Hello，那是對的!

 

為什么：每次我們創(chuàng )建一個(gè)新的 Student 實(shí)例時(shí)，都會(huì )將 sayHello 屬性設置為是一個(gè)函數，并返回字符串 Hello。這是在父類(lèi)(Person)類(lèi)的構造函數中發(fā)生的。

 

在 JavaScript 中，類(lèi)是語(yǔ)法糖，在我們的例子中，在原型鏈上定義了 Student 類(lèi)中的 sayHello 方法?？紤]到每次我們創(chuàng )建 Student 類(lèi)的實(shí)例時(shí)，都會(huì )將 sayHello 屬性設置為該實(shí)例，使其成為返回字符串 Hello 的 function，因此我們永遠不會(huì )使用原型鏈上定義的函數，也就永遠不會(huì )看到消息 Hello from Student 。

 

3.對象可變性

思考以下情況中每個(gè)部分的輸出：

 

// situation 1 

const user = { 

  name: 'John', 

  surname: 'Doe' 

} 

 

user = { 

  name: 'Mike' 

} 

 

console.log(user); 

 

// situation 2 

const user = { 

  name: 'John', 

  surname: 'Doe' 

} 

 

user.name = 'Mike'; 

console.log(user.name); 

 

// situation 3 

const user = { 

  name: 'John', 

  surname: 'Doe' 

} 

 

const anotherUser = user; 

anotherUser.name = 'Mike'; 

console.log(user.name); 

 

// situation 4 

const user = { 

  name: 'John', 

  surname: 'Doe', 

  address: { 

    street: 'My Street' 

  } 

} 

 

Object.freeze(user); 

 

user.name = 'Mike'; 

user.address.street = 'My Different Street'; 

console.log(user.name); 

console.log(user.address.street); 

說(shuō)明

 

Situation 1: 正如我們在上一節中所了解的，我們試圖重新分配不允許使用的 const 變量，所以將會(huì )得到類(lèi)型錯誤。

 

控制臺中的結果將顯示以下文本：

 

Uncaught TypeError: Assignment to constant variable 

Situation 2: 在這種情況下，即使我們改用關(guān)鍵字 const 聲明的變量，也會(huì )有不同的行為。不同之處在于我們正在修改對象屬性而不是其引用，這在 const 對象變量中是允許的。

 

控制臺中的結果應為單詞 Mike。

 

Situation 3: 通過(guò)將 user 分配給 anotherUser 變量，可以在它們之間共享引用或存儲位置(如果你愿意)。換句話(huà)說(shuō)，它們兩個(gè)都會(huì )指向內存中的同一個(gè)對象，因所以更改一個(gè)對象的屬性將反映另一個(gè)對象的更改。

 

控制臺中的結果應為 Mike。

 

Situation 4: 在這里，我們使用 Object.freeze 方法來(lái)提供先前場(chǎng)景(Situation 3)所缺乏的功能。通過(guò)這個(gè)方法，我們可以“凍結”對象，從而不允許修改它的屬性值。但是有一個(gè)問(wèn)題!它只會(huì )進(jìn)行淺凍結，這意味著(zhù)它不會(huì )保護深層屬性的更新。這就是為什么我們能夠對 street 屬性進(jìn)行更改，而 name 屬性保持不變的原因。

 

控制臺中的輸出依次為 John 和 My Different Street 。

 

4.箭頭函數

運行以下代碼段后，將會(huì )輸出什么以及原因：

 

const student = { 

  school: 'My School', 

  fullName: 'John Doe', 

  printName: () => { 

    console.log(this.fullName); 

  }, 

  printSchool: function () { 

    console.log(this.school); 

  } 

}; 

 

student.printName(); 

student.printSchool(); 

說(shuō)明

 

控制臺中的輸出將依次為 undefined 和 My School。

 

你可能會(huì )熟悉以下語(yǔ)法：

 

var me = this; 

// or 

var self = this; 

 

// ... 

// ... 

// somewhere deep... 

// me.doSomething(); 

你可以把 me 或 self 變量視為父作用域，該作用域可用于在其中創(chuàng )建的每個(gè)嵌套函數。

 

當使用箭頭函數時(shí)，這會(huì )自動(dòng)完成，我們不再需要存儲 this 引用來(lái)訪(fǎng)問(wèn)代碼中更深的地方。箭頭函數不綁定自己，而是從父作用域繼承一個(gè)箭頭函數，這就是為什么在調用 printName 函數后輸出了 undefined 的原因。

 

5.解構

請查看下面的銷(xiāo)毀信息，并回答將要輸出的內容。給定的語(yǔ)法是否允許，否則會(huì )引發(fā)錯誤?

 

const rawUser = { 

   name: 'John', 

   surname: 'Doe', 

   email: 'john@doe.com', 

   displayName: 'SuperCoolJohn', 

   joined: '2016-05-05', 

   image: 'path-to-the-image', 

   followers: 45 

} 

 

let user = {}, userDetails = {}; 

({ name: user.name, surname: user.surname, ...userDetails } = rawUser); 

 

console.log(user); 

console.log(userDetails);  

說(shuō)明

 

盡管有點(diǎn)開(kāi)箱即用，但是上面的語(yǔ)法是允許的，并且不會(huì )引發(fā)錯誤! 很整潔吧?

 

上面的語(yǔ)法功能強大，使我們能夠輕松地將任何對象分成兩個(gè)更具體的對象，上面的示例在控制臺的輸出為：

 

// {name: "John", surname: "Doe"} 

// {email: "john@doe.com", displayName: "SuperCoolJohn", joined: "2016-05-05", image: "path-to-the-image", followers: 45} 

6.異步/等待

調用以下函數后將輸出什么?

 

(async () => { 

  let result = 'Some Data'; 

 

  let promise = new Promise((resolve, reject) => { 

    setTimeout(() => resolve('Some data retrieved from the server'), 2000); 

  }); 

 

  result = await promise; 

  console.log(result); 

})(); 

說(shuō)明

 

如果你認為是兩秒鐘后輸出 Some data retrieved from the server ，那么你是對的!

 

代碼將會(huì )暫停，直到 promise 得到解決。兩秒鐘后，它將繼續執行并輸出給定的文本。這意味著(zhù) JavaScript 引擎實(shí)際上會(huì )等到異步操作完成?？梢哉f(shuō) async/await 是用來(lái)獲得 promise 結果的語(yǔ)法糖。也有人認為它是比 promise.then 更具可讀性的方式。

 

7. Return 語(yǔ)句

const multiplyByTwo = (x) => { 

    return 

    { 

        result: x * 2 

    }; 

} 

console.log(multiplyByTwo(2));   

說(shuō)明

 

如果你的答案是 {result: 4}，那你就錯了。輸出是 undefined。但是不要對自己太苛刻，考慮到我也寫(xiě) C# 代碼，這也曾經(jīng)困擾著(zhù)我，這在 C# 那兒不是個(gè)問(wèn)題。

 

由于自動(dòng)分號插入的原因，上面的代碼將返回 undefined。 return 關(guān)鍵字和表達式之間不允許使用行結束符

 

解決方案是用以下列方式之一去修復這個(gè)函數：

 

const multiplyByTwo = (x) => { 

    return { 

        result: x * 2 

    }; 

} 

要么

 

const multiplyByTwo = (x) => { 

  return ( 

    { 

      result: x * 2 

    } 

  ); 

}