整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
知道那個(gè)梗嗎？就是有人試圖在任何帶有屏幕和某種輸入界面的電子設(shè)備上運(yùn)行 Doom 游戲那個(gè)？
結(jié)果今天我們開(kāi)始在 JavaScript 這邊也看到這種現(xiàn)象了。由于這種語(yǔ)言的通用性以及它背后社區(qū)的規(guī)模和活躍程度，JavaScript 的使用場(chǎng)景變得越來(lái)越多，遠(yuǎn)遠(yuǎn)超出了它一開(kāi)始只用于瀏覽器的設(shè)計(jì)目標(biāo)。
那么我們就來(lái)看看我們最喜歡的編程語(yǔ)言到底能做多少事情，以至于我們可以開(kāi)始展望一個(gè)完全由 JavaScript 塑造的未來(lái)了。
很難向非開(kāi)發(fā)人員解釋為什么某件事情是用 JavaScript 來(lái)做的，因?yàn)樗麄兒茈y理解背后的必然性。但我們開(kāi)發(fā)人員是可以看到幕后的原因的，我們很了解自己最喜歡的產(chǎn)品背后使用的技術(shù)究竟有著怎樣的優(yōu)勢(shì)。
正如我們即將看到的那樣，JavaScript 可以成為我們技術(shù)生活和個(gè)人生活的一部分。因?yàn)槿缜八觯覀冊(cè)趲啄昵熬统搅藶g覽器的限制。這主要?dú)w功于 Node.js，它讓我們都意識(shí)到自己可以在任何后端中運(yùn)行 JS 了，而這一切都是從那時(shí)開(kāi)始的。
這可能是讓 JS 融入我們?nèi)粘Ｉ畹淖畲笥美?/span>
像Johnny-Five這樣的庫(kù)允許你將 JS 代碼嵌入到幾乎任何類(lèi)型的開(kāi)源硬件中運(yùn)行。雖然這里當(dāng)然會(huì)有很多限制，你也不能隨便拿起什么芯片就用 JS 對(duì)其編程，但只要你愿意改一下你的電子設(shè)備并在你的產(chǎn)品中放一個(gè) Arduino（舉個(gè)例子），你就可以創(chuàng)建任何運(yùn)行在 JavaScript 上的硬件。
不信我的話(huà)？甚至還有一個(gè)名為Espruino的項(xiàng)目，它提供了所有的硬件、手冊(cè)，甚至是開(kāi)發(fā)環(huán)境，供你學(xué)習(xí)和使用 JS 來(lái)做各種事情。
我覺(jué)得這只是一個(gè)開(kāi)始，考慮到這種語(yǔ)言是如此簡(jiǎn)單和靈活，它將推動(dòng)可編程硬件的崛起，這種趨勢(shì)會(huì)一年比一年火熱。甚至有一個(gè)開(kāi)源的 SmartWatch 可以用 JavaScript 來(lái)編程，名為Bangle.js。
開(kāi)放硬件，再加上開(kāi)源軟件和快速發(fā)展的 3D 打印機(jī)等創(chuàng)建工具，為新一代黑客提供了絕佳的成長(zhǎng)環(huán)境。他們能直接在家中構(gòu)建自己的電子產(chǎn)品和電器，并使用以 JS 編寫(xiě)的高級(jí) API 對(duì)其進(jìn)行編程。
雖然 Python 在進(jìn)行一些嚴(yán)肅的 AI 編程工作（我指的是開(kāi)發(fā)新的 ML 模型或進(jìn)行一些繁重的數(shù)據(jù)處理）時(shí)仍然是更受歡迎的選擇，但 JS 也不甘落后。
事實(shí)上，借助以下庫(kù)，你已經(jīng)可以使用 JavaScript 編寫(xiě)軟件，利用經(jīng)過(guò)訓(xùn)練的 ML 模型了：
其他社區(qū)為 AI 領(lǐng)域提供的生態(tài)系統(tǒng)與 JavaScript 所提供的生態(tài)系統(tǒng)之間仍然存在一定差距，而且考慮到 JavaScript 每年都在被移植到更多平臺(tái)上，這種差距只會(huì)繼續(xù)擴(kuò)大。借助 JS，AI 社區(qū)遲早會(huì)發(fā)現(xiàn)他們能將 AI 帶到世界的每一個(gè)角落。
雖然你還沒(méi)聽(tīng)說(shuō)過(guò)完全用 JavaScript 編寫(xiě)的 3A 游戲，但這種語(yǔ)言正在慢慢走近這個(gè)行業(yè)。
例如，雖然 Unity 確實(shí)放棄了對(duì)類(lèi) JS 語(yǔ)言的支持，但 JavaScript 本身就擁有制作游戲所需的一切特性，至少可以用來(lái)制作運(yùn)行在瀏覽器上的游戲。
不要誤會(huì)我的意思，這本身并不是一件壞事。瀏覽器圖形渲染能力比起早期已經(jīng)有了很大發(fā)展，你可以直接在瀏覽器上獲得一些有趣的結(jié)果，并且也能充分利用計(jì)算機(jī)的 GPU 性能。
誠(chéng)然，距離 3A 游戲行業(yè)接受 JS 作為他們的標(biāo)準(zhǔn)之一還有很長(zhǎng)的路要走，但這項(xiàng)技術(shù)已經(jīng)有了自己的位置。瀏覽器 API 可以給你提供從處理輸入到硬件加速所需的一切支持，因此我們遲早會(huì)看到第一個(gè)獨(dú)立游戲工作室為節(jié)省成本而用 JS 打造的 3A 級(jí)游戲。
其實(shí)我的目光放的更遠(yuǎn)一些，如果在 2012 年的時(shí)候這個(gè)家伙就可以在當(dāng)年的 XBOX 上運(yùn)行完整的 JS 運(yùn)行時(shí)，那么我們遲早會(huì)看到所有主要平臺(tái)上都會(huì)有 JS 運(yùn)行時(shí)。一旦一家公司開(kāi)發(fā)出來(lái)并獲得批準(zhǔn)，許多公司就會(huì)效仿。
如果你只對(duì) Web 游戲開(kāi)發(fā)感興趣，你可能需要查看用 JS 開(kāi)發(fā)游戲時(shí)用到的 top 9 庫(kù)列表：2020年9個(gè)頂級(jí)JS游戲引擎和庫(kù)。
所有人都在談?wù)撨@個(gè)話(huà)題，或者為它寫(xiě)文章，抑或?yàn)g覽這個(gè)話(huà)題的相關(guān)內(nèi)容。我說(shuō)的就是新一代 Web，基于分布式和區(qū)塊鏈技術(shù)：Web3。
他們說(shuō)這是 Web 的未來(lái)。它也完全依賴(lài) JS，至少目前是這樣。
雖然你不會(huì)很快使用 JavaScript 編寫(xiě)智能以太坊合約，但你將使用Web3.js等庫(kù)與區(qū)塊鏈交互來(lái)創(chuàng)建自己的 dApp（你的分布式應(yīng)用程序）。
如果需要，你甚至可以使用 JavaScript 創(chuàng)建自己的區(qū)塊鏈。這仍然是一個(gè)全新的領(lǐng)域，很難準(zhǔn)確預(yù)測(cè)它將如何演變，但我可以肯定的是，JS 將在這一演變中發(fā)揮重要作用。
考慮到我們多年來(lái)一直有能力使用 JS 為移動(dòng)設(shè)備編寫(xiě)混合應(yīng)用程序，這個(gè)主題大家都應(yīng)該很熟悉了。
但是感謝 React Native 之類(lèi)的項(xiàng)目，你還可以創(chuàng)建使用手機(jī)的原生 API 來(lái)渲染 UI 的應(yīng)用程序。這種路徑在性能上絕對(duì)優(yōu)于混合方法，并且由于它依舊兼容主流移動(dòng)操作系統(tǒng)，你仍然可以獲得在所有平臺(tái)上使用單一語(yǔ)言的好處。
Skype、Facebook、Uber、Discord 等應(yīng)用程序已經(jīng)在利用這種原生技術(shù)了，這很明顯地告訴了我們移動(dòng)行業(yè)的未來(lái)會(huì)是什么樣子：由 JavaScript 打造。
有人可能會(huì)說(shuō)，在接下來(lái)的幾年內(nèi)我們將不斷看到 JavaScript 的新用例出現(xiàn)在各種各樣的地方。這種觀(guān)點(diǎn)可能是正確的，因?yàn)檫@種語(yǔ)言自身的演變趨勢(shì)表明，它正在適應(yīng)其不知疲倦的社區(qū)不斷創(chuàng)造出來(lái)的新需求，這個(gè)社區(qū)希望讓 JS 無(wú)處不在。
我們接下來(lái)還會(huì)在哪里看到 JavaScript 呢？我的猜測(cè)是，一旦我們意識(shí)到它是多么強(qiáng)大的工具，以及將它嵌入到可穿戴等設(shè)備上是多么容易，我們就會(huì)在更多設(shè)備中看到它。一旦游戲工作室開(kāi)始意識(shí)到這種語(yǔ)言的力量及其游戲制作能力，我們也將在游戲主機(jī)上見(jiàn)到它的身影。
你呢？你認(rèn)為 JavaScript 在不久的將來(lái)會(huì)出現(xiàn)在哪里？
原文鏈接：https://blog.bitsrc.io/a-future-made-of-javascript-5ab417f34355
. this 適合你嗎？
我看到許多文章在介紹 JavaScript 的 this 時(shí)都會(huì)假設(shè)你學(xué)過(guò)某種面向?qū)ο蟮木幊陶Z(yǔ)言，比如 Java、C++ 或 Python 等。但這篇文章面向的讀者是那些不知道 this 是什么的人。我盡量不用任何術(shù)語(yǔ)來(lái)解釋 this 是什么，以及 this 的用法。
也許你一直不敢解開(kāi) this 的秘密，因?yàn)樗雌饋?lái)挺奇怪也挺嚇人的。或許你只在 StackOverflow 說(shuō)你需要用它的時(shí)候（比如在 React 里實(shí)現(xiàn)某個(gè)功能）才會(huì)使用。
在深入介紹 this 之前，我們首先需要理解函數(shù)式編程和面向?qū)ο缶幊讨g的區(qū)別。
2. 函數(shù)式編程 vs 面向?qū)ο缶幊?/strong>
你可能不知道，JavaScript 同時(shí)擁有面向?qū)ο蠛秃瘮?shù)式的結(jié)構(gòu)，所以你可以自己選擇用哪種風(fēng)格，或者兩者都用。
我在很早以前使用 JavaScript 時(shí)就喜歡函數(shù)式編程，而且會(huì)像躲避瘟疫一樣避開(kāi)面向?qū)ο缶幊蹋驗(yàn)槲也焕斫饷嫦驅(qū)ο笾械年P(guān)鍵字，比如 this。我不知道為什么要用 this。似乎沒(méi)有它我也可以做好所有的工作。
而且我是對(duì)的。
在某種意義上 。也許你可以只專(zhuān)注于一種結(jié)構(gòu)并且完全忽略另一種，但這樣你只能是一個(gè) JavaScript 開(kāi)發(fā)者。為了解釋函數(shù)式和面向?qū)ο笾g的區(qū)別，下面我們通過(guò)一個(gè)數(shù)組來(lái)舉例說(shuō)明，數(shù)組的內(nèi)容是 Facebook 的好友列表。
假設(shè)你要做一個(gè) Web 應(yīng)用，當(dāng)用戶(hù)使用 Facebook 登錄你的 Web 應(yīng)用時(shí)，需要顯示他們的 Facebook 的好友信息。你需要訪(fǎng)問(wèn) Facebook 并獲得用戶(hù)的好友數(shù)據(jù)。這些數(shù)據(jù)可能是 firstName、lastName、username、numFriends、friendData、birthday 和 lastTenPosts 等信息。
const data=[
{
firstName: 'Bob',
lastName: 'Ross',
username: 'bob.ross',
numFriends: 125,
birthday: '2/23/1985',
lastTenPosts: ['What a nice day', 'I love Kanye West', ...],
},
...
]
假設(shè)上述數(shù)據(jù)是你通過(guò) Facebook API 獲得的。現(xiàn)在需要將其轉(zhuǎn)換成方便你的項(xiàng)目使用的格式。我們假設(shè)你想顯示的好友信息如下：
3. 函數(shù)式方式
函數(shù)式的方式就是將整個(gè)數(shù)組或者數(shù)組中的某個(gè)元素傳遞給某個(gè)函數(shù)，然后返回你需要的信息：
const fullNames=getFullNames(data) // ['Ross, Bob', 'Smith, Joanna', ...]
首先我們有 Facebook API 返回的原始數(shù)據(jù)。為了將其轉(zhuǎn)換成需要的格式，首先要將數(shù)據(jù)傳遞給一個(gè)函數(shù)，函數(shù)的輸出是（或者包含）經(jīng)過(guò)修改的數(shù)據(jù)，這些數(shù)據(jù)可以在應(yīng)用中向用戶(hù)展示。
我們可以用類(lèi)似的方法獲得隨機(jī)三篇文章，并且計(jì)算距離好友生日的天數(shù)。
函數(shù)式的方式是：將原始數(shù)據(jù)傳遞給一個(gè)函數(shù)或者多個(gè)函數(shù)，獲得對(duì)你的項(xiàng)目有用的數(shù)據(jù)格式。
4. 面向?qū)ο蟮姆绞?/strong>
對(duì)于編程初學(xué)者和 JavaScript 初學(xué)者，面向?qū)ο蟮母拍羁赡苡悬c(diǎn)難以理解。其思想是，我們要將每個(gè)好友變成一個(gè)對(duì)象，這個(gè)對(duì)象能夠生成你一切開(kāi)發(fā)者需要的東西。
你可以創(chuàng)建一個(gè)對(duì)象，這個(gè)對(duì)象對(duì)應(yīng)于某個(gè)好友，它有 fullName 屬性，還有兩個(gè)函數(shù) getThreeRandomPosts 和 getDaysUntilBirthday。
function initializeFriend(data) {
return {
fullName: `${data.firstName} ${data.lastName}`,
getThreeRandomPosts: function() {
// get three random posts from data.lastTenPosts
},
getDaysUntilBirthday: function() {
// use data.birthday to get the num days until birthday
}
};
}
const objectFriends=data.map(initializeFriend)
objectFriends[0].getThreeRandomPosts()
// Gets three of Bob Ross's posts
面向?qū)ο蟮姆绞骄褪菫閿?shù)據(jù)創(chuàng)建對(duì)象，每個(gè)對(duì)象都有自己的狀態(tài)，并且包含必要的信息，能夠生成需要的數(shù)據(jù)。
5. 這跟 this 有什么關(guān)系？
你也許從來(lái)沒(méi)想過(guò)要寫(xiě)上面的 initializeFriend 代碼，而且你也許認(rèn)為，這種代碼可能會(huì)很有用。但你也注意到，這并不是真正的面向?qū)ο蟆?/p>
其原因就是，上面例子中的 getThreeRandomPosts 或 getdaysUntilBirtyday 能夠正常工作的原因其實(shí)是閉包。因?yàn)槭褂昧碎]包，它們?cè)?initializeFriend 返回之后依然能訪(fǎng)問(wèn) data。關(guān)于閉包的更多信息可以看看這篇文章：作用域和閉包（https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch5.md）。
還有一個(gè)方法該怎么處理？我們假設(shè)這個(gè)方法叫做 greeting。注意方法（與 JavaScript 的對(duì)象有關(guān)的方法）其實(shí)只是一個(gè)屬性，只不過(guò)屬性值是函數(shù)而已。我們想在 greeting 中實(shí)現(xiàn)以下功能：
function initializeFriend(data) {
return {
fullName: `${data.firstName} ${data.lastName}`,
getThreeRandomPosts: function() {
// get three random posts from data.lastTenPosts
},
getDaysUntilBirthday: function() {
// use data.birthday to get the num days until birthday
},
greeting: function() {
return `Hello, this is ${fullName}'s data!`
}
};
}
這樣能正常工作嗎？
不能！
我們新建的對(duì)象能夠訪(fǎng)問(wèn) initializeFriend 中的一切變量，但不能訪(fǎng)問(wèn)這個(gè)對(duì)象本身的屬性或方法。當(dāng)然你會(huì)問(wèn)，
難道不能在 greeting 中直接用 data.firstName 和 data.lastName 嗎？
當(dāng)然可以。但要是想在 greeting 中加入距離好友生日的天數(shù)怎么辦？我們最好還是有辦法在 greeting 中調(diào)用 getDaysUntilBirthday。
這時(shí)輪到 this 出場(chǎng)了！
6. 終于——this 是什么
this 在不同的環(huán)境中可以指代不同的東西。默認(rèn)的全局環(huán)境中 this 指代的是全局對(duì)象（在瀏覽器中 this 是 window 對(duì)象），這沒(méi)什么太大的用途。而在 this 的規(guī)則中具有實(shí)用性的是這一條：
如果在對(duì)象的方法中使用 this，而該方法在該對(duì)象的上下文中調(diào)用，那么 this 指代該對(duì)象本身。
你會(huì)說(shuō)“在該對(duì)象的上下文中調(diào)用”……是啥意思？
別著急，我們一會(huì)兒就說(shuō)。
所以，如果我們想從 greeting 中調(diào)用 getDaysUntilBirtyday 我們只需要寫(xiě) this.getDaysUntilBirthday，因?yàn)榇藭r(shí)的 this 就是對(duì)象本身。
附注：不要在全局作用域的普通函數(shù)或另一個(gè)函數(shù)的作用域中使用 this！this 是個(gè)面向?qū)ο蟮臇|西，它只在對(duì)象的上下文（或類(lèi)的上下文）中有意義。
我們利用 this 來(lái)重寫(xiě) initializeFriend：
function initializeFriend(data) {
return {
lastTenPosts: data.lastTenPosts,
birthday: data.birthday,
fullName: `${data.firstName} ${data.lastName}`,
getThreeRandomPosts: function() {
// get three random posts from this.lastTenPosts
},
getDaysUntilBirthday: function() {
// use this.birthday to get the num days until birthday
},
greeting: function() {
const numDays=this.getDaysUntilBirthday()
return `Hello, this is ${this.fullName}'s data! It is ${numDays} until ${this.fullName}'s birthday!`
}
};
}
現(xiàn)在，在 initializeFriend 執(zhí)行結(jié)束后，該對(duì)象需要的一切都位于對(duì)象本身的作用域之內(nèi)了。我們的方法不需要再依賴(lài)于閉包，它們只會(huì)用到對(duì)象本身包含的信息。
好吧，這是 this 的用法之一，但你說(shuō)過(guò) this 在不同的上下文中有不同的含義。那是什么意思？為什么不一定會(huì)指向?qū)ο笞约海?/p>
有時(shí)候，你需要將 this 指向某個(gè)特定的東西。一種情況就是事件處理函數(shù)。比如我們希望在用戶(hù)點(diǎn)擊好友時(shí)打開(kāi)好友的 Facebook 首頁(yè)。我們會(huì)給對(duì)象添加下面的 onClick 方法：
function initializeFriend(data) {
return {
lastTenPosts: data.lastTenPosts,
birthday: data.birthday,
username: data.username,
fullName: `${data.firstName} ${data.lastName}`,
getThreeRandomPosts: function() {
// get three random posts from this.lastTenPosts
},
getDaysUntilBirthday: function() {
// use this.birthday to get the num days until birthday
},
greeting: function() {
const numDays=this.getDaysUntilBirthday()
return `Hello, this is ${this.fullName}'s data! It is ${numDays} until ${this.fullName}'s birthday!`
},
onFriendClick: function() {
window.open(`https://facebook.com/${this.username}`)
}
};
}
注意我們?cè)趯?duì)象中添加了 username 屬性，這樣 onFriendClick 就能訪(fǎng)問(wèn)它，從而在新窗口中打開(kāi)該好友的 Facebook 首頁(yè)。現(xiàn)在只需要編寫(xiě) HTML：
<button id="Bob_Ross"> <!-- A bunch of info associated with Bob Ross --> </button>
還有 JavaScript：
const bobRossObj=initializeFriend(data[0])
const bobRossDOMEl=document.getElementById('Bob_Ross')
bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)
在上述代碼中，我們給 Bob Ross 創(chuàng)建了一個(gè)對(duì)象。然后我們拿到了 Bob Ross 對(duì)應(yīng)的 DOM 元素。然后執(zhí)行 onFriendClick 方法來(lái)打開(kāi) Bob 的 Facebook 主頁(yè)。似乎沒(méi)問(wèn)題，對(duì)吧？
有問(wèn)題！
哪里出錯(cuò)了？
注意我們調(diào)用 onclick 處理程序的代碼是 bobRossObj.onFriendClick。看到問(wèn)題了嗎？要是寫(xiě)成這樣的話(huà)能看出來(lái)嗎？
bobRossDOMEl.addEventListener("onclick", function() {
window.open(`https://facebook.com/${this.username}`)
})
現(xiàn)在看到問(wèn)題了嗎？如果把事件處理程序?qū)懗?bobRossObj.onFriendClick，實(shí)際上是把 bobRossObj.onFriendClick 上保存的函數(shù)拿出來(lái)，然后作為參數(shù)傳遞。它不再“依附”在 bobRossObj 上，也就是說(shuō)，this 不再指向 bobRossObj。它實(shí)際指向全局對(duì)象，也就是說(shuō) this.username 不存在。似乎我們沒(méi)什么辦法了。
輪到綁定上場(chǎng)了！
7. 明確綁定 this
我們需要明確地將 this 綁定到 bobRossObj 上。我們可以通過(guò) bind 實(shí)現(xiàn)：
const bobRossObj=initializeFriend(data[0])
const bobRossDOMEl=document.getElementById('Bob_Ross')
bobRossObj.onFriendClick=bobRossObj.onFriendClick.bind(bobRossObj)
bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)
之前，this 是按照默認(rèn)的規(guī)則設(shè)置的。但使用 bind 之后，我們明確地將 bobRossObj.onFriendClick 中的 this 的值設(shè)置為 bobRossObj 對(duì)象本身。
到此為止，我們看到了為什么要使用 this，以及為什么要明確地綁定 this。最后我們來(lái)介紹一下，this 實(shí)際上是箭頭函數(shù)。
8. 箭頭函數(shù)
你也許注意到了箭頭函數(shù)最近很流行。人們喜歡箭頭函數(shù)，因?yàn)楹芎?jiǎn)潔、很優(yōu)雅。而且你還知道箭頭函數(shù)和普通函數(shù)有點(diǎn)區(qū)別，盡管不太清楚具體區(qū)別是什么。
簡(jiǎn)而言之，兩者的區(qū)別在于：
在定義箭頭函數(shù)時(shí)，不管 this 指向誰(shuí)，箭頭函數(shù)內(nèi)部的 this 永遠(yuǎn)指向同一個(gè)東西。
嗯……這貌似沒(méi)什么用……似乎跟普通函數(shù)的行為一樣啊？
我們通過(guò) initializeFriend 舉例說(shuō)明。假設(shè)我們想添加一個(gè)名為 greeting 的函數(shù)：
function initializeFriend(data) {
return {
lastTenPosts: data.lastTenPosts,
birthday: data.birthday,
username: data.username,
fullName: `${data.firstName} ${data.lastName}`,
getThreeRandomPosts: function() {
// get three random posts from this.lastTenPosts
},
getDaysUntilBirthday: function() {
// use this.birthday to get the num days until birthday
},
greeting: function() {
function getLastPost() {
return this.lastTenPosts[0]
}
const lastPost=getLastPost()
return `Hello, this is ${this.fullName}'s data!
${this.fullName}'s last post was ${lastPost}.`
},
onFriendClick: function() {
window.open(`https://facebook.com/${this.username}`)
}
};
}
這樣能運(yùn)行嗎？如果不能，怎樣修改才能運(yùn)行？
答案是不能。因?yàn)?getLastPost 沒(méi)有在對(duì)象的上下文中調(diào)用，因此getLastPost 中的 this 按照默認(rèn)規(guī)則指向了全局對(duì)象。
你說(shuō)沒(méi)有“在對(duì)象的上下文中調(diào)用”……難道它不是從 initializeFriend 返回的內(nèi)部調(diào)用的嗎？如果這還不叫“在對(duì)象的上下文中調(diào)用”，那我就不知道什么才算了。
我知道“在對(duì)象的上下文中調(diào)用”這個(gè)術(shù)語(yǔ)很模糊。也許，判斷函數(shù)是否“在對(duì)象的上下文中調(diào)用”的好方法就是檢查一遍函數(shù)的調(diào)用過(guò)程，看看是否有個(gè)對(duì)象“依附”到了函數(shù)上。
我們來(lái)檢查下執(zhí)行 bobRossObj.onFriendClick() 時(shí)的情況。“給我對(duì)象 bobRossObj，找到其中的 onFriendClick 然后調(diào)用該屬性對(duì)應(yīng)的函數(shù)”。
我們同樣檢查下執(zhí)行 getLastPost() 時(shí)的情況。“給我名為 getLastPost 的函數(shù)然后執(zhí)行。”看到了嗎？我們根本沒(méi)有提到對(duì)象。
好了，這里有個(gè)難題來(lái)測(cè)試你的理解程度。假設(shè)有個(gè)函數(shù)名為 functionCaller，它的功能就是調(diào)用一個(gè)函數(shù)：
functionCaller(fn) {
fn()
}
如果調(diào)用 functionCaller(bobRossObj.onFriendClick) 會(huì)怎樣？你會(huì)認(rèn)為 onFriendClick 是“在對(duì)象的上下文中調(diào)用”的嗎？this.username有定義嗎？
我們來(lái)檢查一遍：“給我 bobRosObj 對(duì)象然后查找其屬性 onFriendClick。取出其中的值（這個(gè)值碰巧是個(gè)函數(shù)），然后將它傳遞給 functionCaller，取名為 fn。然后，執(zhí)行名為 fn 的函數(shù)。”注意該函數(shù)在調(diào)用之前已經(jīng)從 bobRossObj 對(duì)象上“脫離”了，因此并不是“在對(duì)象的上下文中調(diào)用”的，所以 this.username 沒(méi)有定義。
這時(shí)可以用箭頭函數(shù)解決這個(gè)問(wèn)題：
function initializeFriend(data) {
return {
lastTenPosts: data.lastTenPosts,
birthday: data.birthday,
username: data.username,
fullName: `${data.firstName} ${data.lastName}`,
getThreeRandomPosts: function() {
// get three random posts from this.lastTenPosts
},
getDaysUntilBirthday: function() {
// use this.birthday to get the num days until birthday
},
greeting: function() {
const getLastPost=()=> {
return this.lastTenPosts[0]
}
const lastPost=getLastPost()
return `Hello, this is ${this.fullName}'s data!
${this.fullName}'s last post was ${lastPost}.`
},
onFriendClick: function() {
window.open(`https://facebook.com/${this.username}`)
}
};
}
上述代碼的規(guī)則是：
在定義箭頭函數(shù)時(shí)，不管 this 指向誰(shuí)，箭頭函數(shù)內(nèi)部的 this 永遠(yuǎn)指向同一個(gè)東西。
箭頭函數(shù)是在 greeting 中定義的。我們知道，在 greeting 內(nèi)部的 this 指向?qū)ο蟊旧怼Ｒ虼耍^函數(shù)內(nèi)部的 this 也指向?qū)ο蟊旧恚@正是我們需要的結(jié)果。
9. 結(jié)論
this 有時(shí)很不好理解，但它對(duì)于開(kāi)發(fā) JavaScript 應(yīng)用非常有用。本文當(dāng)然沒(méi)能介紹 this 的所有方面。一些沒(méi)有涉及到的話(huà)題包括：
我建議你首先問(wèn)問(wèn)自己在這些情況下的 this，然后在瀏覽器中執(zhí)行代碼來(lái)檢驗(yàn)?zāi)愕慕Y(jié)果。
原文地址：https://mp.weixin.qq.com/s/L9eac6rzkSE_JqxXyg3FQw
020 年的技術(shù)熱潮之下，我們?cè)撊绾斡卸希枰邆淠男┘夹g(shù)棧？如果你是一名前端開(kāi)發(fā)者，不妨通過(guò)本文了解頂級(jí)的 JavaScript 框架以及未來(lái)趨勢(shì)預(yù)探，來(lái)升級(jí)自己的技能吧！
作者 | Eric Elliott
譯者 | 蘇本如，責(zé)編 | 屠敏
頭圖 | CSDN 下載自視覺(jué)中國(guó)
出品 | CSDN（ID：CSDNnews）
以下為譯文：
如果你想找到一份很棒的JavaScript工作，或者趕上2020年的重要技術(shù)，以及今后十年的重要技術(shù)，那么這篇文章就是為你準(zhǔn)備的。本文的重點(diǎn)不是告訴你哪些技術(shù)堆棧和框架是“最佳”，最受大家喜愛(ài)或者最受歡迎的技術(shù)，而是告訴你哪些技術(shù)堆棧和框架能夠?yàn)槟闾峁┰?020年及以后獲得一份出色工作的最佳機(jī)會(huì)。
我們將研究以下不同來(lái)源的數(shù)據(jù)：
谷歌搜索的趨勢(shì)：https://trends.google.com/trends/
State of JS調(diào)查報(bào)告：https://2019.stateofjs.com/
Stack Overflow調(diào)查報(bào)告：https://insights.stackoverflow.com/survey/2019
Npm下載量：https://npm-stat.com/charts.html?package=react&package=vue&package=%40angular%2Fcore&package=svelte&package=jquery&from=2015-12-30&to=2019-12-30
Indeed.com上發(fā)布的空缺職位總數(shù)：https://www.indeed.com/
這些指標(biāo)都不是完美的，但就本文的目的而言，npm下載次數(shù)和Indeed.com職位發(fā)布數(shù)量應(yīng)該給予最大的權(quán)重，當(dāng)我們綜合考慮這些指標(biāo)時(shí)，它們可以清晰、一致地描繪JavaScript技術(shù)的前景和趨勢(shì)。根據(jù)這些指標(biāo)選擇一個(gè)學(xué)習(xí)框架是一個(gè)好主意嗎？那首先要取決于你的目標(biāo)是什么。
因?yàn)槲覀冇幸粋€(gè)明確的目標(biāo)：求職者學(xué)習(xí)的投資回報(bào)率。這就使得這項(xiàng)任務(wù)比告訴你什么對(duì)每個(gè)人都是最好的要容易得多。雖然沒(méi)有一種方法是萬(wàn)能的，但客觀(guān)地定義什么可以最大程度地實(shí)現(xiàn)特定的具體目標(biāo)是很容易的。讓我們來(lái)看看一些數(shù)據(jù)。
首先，學(xué)習(xí)JavaScript
在你過(guò)多地?fù)?dān)心技術(shù)堆棧之前，請(qǐng)先學(xué)習(xí)JavaScript以及如何使用它來(lái)編寫(xiě)軟件。如果你無(wú)法解釋什么是函數(shù)組合、對(duì)象組合和模塊，請(qǐng)從這里開(kāi)始。所有的軟件開(kāi)發(fā)都是某種組合：我們把一個(gè)大的、復(fù)雜的問(wèn)題分解成一些小的問(wèn)題，然后使用軟件構(gòu)建塊（如函數(shù)、對(duì)象、模塊等等）來(lái)解決它們。我們將這些解決方案組合起來(lái)形成我們的應(yīng)用程序。從2020年開(kāi)始，請(qǐng)充分理解JavaScript和軟件組合。
React在2019年占據(jù)主導(dǎo)地位，2020年可能繼續(xù)
我喜歡npm下載量這個(gè)指標(biāo)，因?yàn)樗芎玫乇砻髁丝蚣艿幕钴S使用情況（*）。行業(yè)常用框架統(tǒng)計(jì)給于npm下載量的權(quán)重非常之高，原因是因?yàn)橛脩?hù)需要在其本地機(jī)器上運(yùn)行npm install。
此處jQuery被排除在外，原因是許多jQuery項(xiàng)目都是不使用npm的舊項(xiàng)目，因此無(wú)論如何它都會(huì)被嚴(yán)重低估。Svelte被包括進(jìn)來(lái)，是為了提供一些有關(guān)其在市場(chǎng)上的相對(duì)地位的見(jiàn)解，并解釋其在其他圖表中的缺失。目前還沒(méi)有足夠的數(shù)據(jù)讓Svelte在圖表中顯示有意義的內(nèi)容。例如，在Google搜索趨勢(shì)中，它還不是一個(gè)可用的主題。
空缺職位總數(shù)
下面這張圖表顯示了各特定框架的當(dāng)前空缺職位總數(shù)統(tǒng)計(jì)（*）：
2019年12月各UI框架空缺職位統(tǒng)計(jì)（數(shù)據(jù)來(lái)源：indeed.com）
與去年相比，React擴(kuò)大了領(lǐng)先優(yōu)勢(shì)，而Angular和jQuery都輸給了Vue。下面是一個(gè)餅圖，顯示了每個(gè)框架的相對(duì)就業(yè)市場(chǎng)份額：
頂級(jí)框架的就業(yè)市場(chǎng)份額
JavaScript開(kāi)發(fā)人員的平均工資在2019年再次增長(zhǎng)，從每年的11.1萬(wàn)美元增加到每年的11.4萬(wàn)美元（這里是數(shù)據(jù)來(lái)源）。
（*）統(tǒng)計(jì)方法：職位搜索是在indeed.com網(wǎng)站進(jìn)行的。為了排除誤報(bào)，我將搜索與關(guān)鍵字“software”配對(duì)，以增強(qiáng)其相關(guān)性，然后乘以~1.5（大致相當(dāng)于使用“software”和不使用“software”的編程職位列表之間的差異）。所有搜索結(jié)果頁(yè)（SERPs）都按日期排序并抽查其相關(guān)性。得到的數(shù)字并非100%準(zhǔn)確，但對(duì)于本文中使用的相對(duì)近似值來(lái)說(shuō)，它們已經(jīng)足夠好了。
谷歌搜索趨勢(shì)
數(shù)據(jù)來(lái)源：https://trends.google.com/trends/explore?date=2017-01-01%202019-12-01&q=%2Fm%2F012l1vxv,%2Fg%2F11c6w0ddw9,%2Fg%2F11c0vmgx5d,%2Fm%2F0268gyp
正如你所料，搜索興趣（*）反映了就業(yè)市場(chǎng)份額，但存在一些有趣的差異。我們可以清楚地看到，從2017年到現(xiàn)在，人們對(duì)jQuery的興趣在減弱，并且Vue.js搜索興趣正在強(qiáng)勁增長(zhǎng)。以下是各框架在谷歌搜索統(tǒng)計(jì)中所占的份額：
上圖與職位空缺的統(tǒng)計(jì)結(jié)果一致：React擁有強(qiáng)大的領(lǐng)先優(yōu)勢(shì)，吸引了36%的前端框架搜索量，其次是Angular（約占27%）和jQuery（約占25%）。對(duì)Vue.js的搜索興趣遠(yuǎn)遠(yuǎn)大于它在就業(yè)市場(chǎng)的份額，但該數(shù)據(jù)與排名中的就業(yè)市場(chǎng)數(shù)據(jù)基本一致。看來(lái)我們已經(jīng)成功地證實(shí)了這一點(diǎn)。
（*）統(tǒng)計(jì)方法：對(duì)于所有搜索，數(shù)據(jù)都是按主題收集的，而不是按搜索詞收集，以便從無(wú)關(guān)的關(guān)鍵字匹配中剔除誤報(bào)。
未來(lái)值得關(guān)注的框架
現(xiàn)在更多的職位需要具有React框架技能，而不是其他受歡迎但使用不那么廣泛的框架，如Svelte或Vue，這兩個(gè)框架都有很高的滿(mǎn)意度，但行業(yè)采用率相對(duì)要小得多。
學(xué)習(xí)Svelte或Vue框架可能會(huì)很酷。但是如果你的目標(biāo)是找到一份工作，那么如果先學(xué)習(xí)React，你會(huì)有更好的機(jī)會(huì)。
話(huà)雖如此，在《2019年JavaScript狀態(tài)調(diào)查報(bào)告》中，Svelte和Vue的用戶(hù)滿(mǎn)意度得分都非常高。在過(guò)去，React框架的高用戶(hù)滿(mǎn)意度得分預(yù)示了它相對(duì)于A(yíng)ngular框架的快速增長(zhǎng)。Angular框架在當(dāng)時(shí)也占據(jù)了主導(dǎo)地位，但其用戶(hù)滿(mǎn)意度得分卻相對(duì)較低。
在2019年，React框架的用戶(hù)滿(mǎn)意度排名最高，達(dá)到89%。緊跟其后的包括Svelte（88%）和Vue.js（87%，低于上一年的91%）。Svelte或Vue不太可能會(huì)搶走足夠的React用戶(hù)，但是許多仍在使用Angular和jQuery的用戶(hù)，他們可能會(huì)轉(zhuǎn)而使用Svelte或Vue，從而在2020年推動(dòng)這兩個(gè)框架的進(jìn)一步強(qiáng)勁增長(zhǎng)。
可以肯定的是，掌握React框架將會(huì)增加你的機(jī)會(huì)，幫助你在2020年找到并守住一份很棒的工作。
TypeScript vs JavaScript
毫無(wú)疑問(wèn)，在過(guò)去幾年中，TypeScript的發(fā)展非常迅速，根據(jù)JavaScript現(xiàn)狀調(diào)查報(bào)告(State of JS Survey)，89%的TypeScript用戶(hù)會(huì)再次使用它，66%的調(diào)查對(duì)象要么使用TypeScript，要么對(duì)使用TypeScript感興趣（比最低年份的71%略有下降）。
但是，盡管人們的興趣確實(shí)很強(qiáng)，并且使用率似乎正在迅速增長(zhǎng)，但在就業(yè)市場(chǎng)上，擁有TypeScript方面的經(jīng)驗(yàn)還不是很搶手。只有大約7％的JavaScript空缺職位的職位描述中提到TypeScript（數(shù)據(jù)來(lái)源）。這個(gè)數(shù)字對(duì)TypeScript的職位需求可能有些低估，因?yàn)檎衅附?jīng)理們希望JavaScript開(kāi)發(fā)人員能夠輕松地使用TypeScript，因此他們有可能不會(huì)在工作崗位描述中提及TypeScript。
我堅(jiān)持認(rèn)為T(mén)ypeScript語(yǔ)言的投資回報(bào)率可能較低甚至為負(fù)。它可能會(huì)損害而不是提高你的生產(chǎn)率，并且，如果你已經(jīng)在使用諸如TDD，代碼審查和設(shè)計(jì)審查等優(yōu)秀的缺陷預(yù)防工具，那么使用TypeScript編寫(xiě)代碼不太可能帶來(lái)明顯的降低缺陷的好處。
話(huà)雖如此，TypeScript有很多值得熱愛(ài)的地方，你當(dāng)然不應(yīng)該害怕它，或者拒絕一份工作，僅僅因?yàn)樗鼈兪褂玫氖荰ypeScript而不是JavaScript。另外TypeScript是JavaScript的超集，因此從JavaScript轉(zhuǎn)到TypeScript并不像學(xué)習(xí)完全不同的語(yǔ)言那樣具有挑戰(zhàn)性。
你可能不需要學(xué)習(xí)TypeScript語(yǔ)言就可以在2020年的就業(yè)市場(chǎng)競(jìng)爭(zhēng)中脫穎而出，但是TypeScript引擎非常有用，即使對(duì)于標(biāo)準(zhǔn)JavaScript也是如此。
我每天都使用TypeScript引擎為使用VS Code編寫(xiě)的標(biāo)準(zhǔn)JavaScript提供智能感知（Intellisense）。甚至可以使用JSDoc（TypeScript引擎能夠理解和解釋JSDoc，就像解釋類(lèi)型注釋一樣）或外部d.ts文件來(lái)增強(qiáng)這種智能感知，并且VS Code將自動(dòng)獲取你使用的模塊的TypeScript定義。
多年來(lái)我一直使用并享受TernJS和Atom的組合帶來(lái)的類(lèi)似的好處，但是這種組合缺少TypeScript引擎 + VS Code的維護(hù)和社區(qū)支持。
如果您尚未嘗試使用Visual Studio（VS） Code，你可能要從那里開(kāi)始。順便說(shuō)一句，根據(jù)JS現(xiàn)狀調(diào)查的受訪(fǎng)者的反饋，VS Code占據(jù)了JavaScript IDE市場(chǎng)的主導(dǎo)地位，市場(chǎng)份額為57%，其次是WebStorm，市場(chǎng)份額為14％。
數(shù)據(jù)管理
Redux在狀態(tài)管理器的競(jìng)賽中仍然處于領(lǐng)先地位，但是GraphQL和Apollo在滿(mǎn)意度和興趣上都有所提高。預(yù)計(jì)GraphQL在2020年將持續(xù)增長(zhǎng)。
也就是說(shuō)，即使你在使用GraphQL，我仍然認(rèn)為有充分的理由來(lái)學(xué)習(xí)Redux狀態(tài)管理，而且我認(rèn)為每個(gè)人都會(huì)從學(xué)習(xí)Redux中受益，即使他們不使用這個(gè)框架。
GraphQL是近年來(lái)流行的一種查詢(xún)語(yǔ)言。它具有簡(jiǎn)單的語(yǔ)法，但是因?yàn)樗强缯麄€(gè)堆棧使用的，并且學(xué)習(xí)它需要學(xué)習(xí)如何將它連接到數(shù)據(jù)存儲(chǔ)層，因此集成起來(lái)可能令人生畏，但值得付出努力。
GraphQL不會(huì)在短期內(nèi)完全取代JSON REST API，但是它在2019年的增長(zhǎng)很快，我預(yù)計(jì)其強(qiáng)勁增長(zhǎng)將持續(xù)到2020年。
后臺(tái)框架
Express是占主導(dǎo)地位的Node框架，它的滿(mǎn)意度非常高，到2020年也不會(huì)有強(qiáng)勁的挑戰(zhàn)者，但是隨著無(wú)服務(wù)器（serverless）的興起，我希望隨著新的十年的到來(lái)，Express的統(tǒng)治地位將逐漸下降。
Next.js是一個(gè)全棧React框架，最初是在Express之上構(gòu)建的，但此后從Express切換到無(wú)服務(wù)器和靜態(tài)優(yōu)化，它像發(fā)瘋似地快速增長(zhǎng)起來(lái)。
當(dāng)我們將EricElliottJS.com從Express切換到無(wú)服務(wù)器的Next.js時(shí)，我們的主機(jī)托管費(fèi)用減少了90％，并且頁(yè)面加載速度變得更快。所以我無(wú)論多么強(qiáng)烈推薦它都不過(guò)分。現(xiàn)在，對(duì)于所有的應(yīng)用程序，我們都使用了Next.js和Zeit托管。
測(cè)試
Jest和Cypress分別在單元測(cè)試和功能測(cè)試中最受歡迎，但是我非常喜歡RITEWay和TestCafe。RITEWay是一個(gè)測(cè)試框架，它始終回答每個(gè)單元測(cè)試必須回答的5個(gè)問(wèn)題。
TestCafe和Cypress一樣，是一個(gè)功能測(cè)試工具。有了它，你就不再需要和Selenium抗?fàn)帲哂懈玫目鐬g覽器支持和出色的測(cè)試記錄器/集成開(kāi)發(fā)環(huán)境（IDE）。我強(qiáng)烈建議QA團(tuán)隊(duì)嘗試TestCafe。
功能性工具
Lodash，Ramda，Immer，Redux和RxJS是我經(jīng)常使用的功能性工具。
Ramda在2019年取得了長(zhǎng)足發(fā)展，并提供了Lodash所不具備的一些特性，包括lense和transducer。RxJS通過(guò)其管道化運(yùn)算符提供了transducer樣式功能。
Immer使得在JavaScript對(duì)象上操作因無(wú)需對(duì)其進(jìn)行轉(zhuǎn)換而變得更加容易。Redux是一個(gè)狀態(tài)管理工具。
2020年的科技預(yù)覽
在未來(lái)十年，有幾項(xiàng)新興技術(shù)將對(duì)人類(lèi)生活產(chǎn)生巨大影響。以下是這些技術(shù)的最新概況：
人工智能
人工智能可能是有史以來(lái)最具變革性的技術(shù)。許多學(xué)者和自以為是的億萬(wàn)富翁們都將人工智能描述成一個(gè)神奇的烏托邦，或者說(shuō)是人類(lèi)的末日。
正如我們所知，它當(dāng)然可能是人類(lèi)的終結(jié)，但也可能是人類(lèi)和機(jī)器之間完美合作的開(kāi)始。我們才剛剛開(kāi)始對(duì)人工智能可能會(huì)變成什么樣有了粗淺的一瞥。其中有些很?chē)樔耍ū热鏳eep fakes換臉術(shù)），有些則非常有用（比如Adobe Premiere為視頻編輯新推出的自動(dòng)重構(gòu)（auto-reframe）功能）。到目前為止，事實(shí)是人工智能既令人難以置信的可怕，又非常有用。人工智能將繼續(xù)產(chǎn)生一些令人恐懼的東西，但是通過(guò)人工智能改善人類(lèi)生活的潛力也是巨大的。潘多拉的盒子已經(jīng)打開(kāi)，再也無(wú)法關(guān)閉了，所以我希望你能好好利用它來(lái)解決重要問(wèn)題，改善我們的生活。
2019年人工智能領(lǐng)域有許多重要突破。近年來(lái)，研究團(tuán)隊(duì)一直在各種視頻游戲中爭(zhēng)奪超人的表現(xiàn)，但某些類(lèi)別的游戲仍然對(duì)人工智能構(gòu)成挑戰(zhàn)，包括《星際爭(zhēng)霸II》之類(lèi)的長(zhǎng)期戰(zhàn)略游戲。DeepMind的AlphaStar程序（一種人工智能）已經(jīng)在官方的Battle.net服務(wù)器上使用與人類(lèi)玩家相同的資源，達(dá)到了頂級(jí)玩家的水平。《星際爭(zhēng)霸》是一款復(fù)雜的游戲，涉及長(zhǎng)期的戰(zhàn)略思維，一度被認(rèn)為超出了人工智能的能力。戰(zhàn)略思維是走向通用人工智能的重要里程碑。
如果這些游戲看起來(lái)像是愚蠢地使用了資源，那么不妨考慮一下，像DeepMind這樣的項(xiàng)目在文本到語(yǔ)音方面也取得了令人難以置信的進(jìn)步，這可以讓人工智能代理和私人助理發(fā)出更自然的聲音，而且更重要的是，可以把聲音還給失去它們的人類(lèi)。
人工智能還被用于診斷癌癥、預(yù)測(cè)蛋白質(zhì)折疊（可用于了解疾病和發(fā)現(xiàn)新藥）、恢復(fù)殘疾人的肢體控制、生成逼真的照片等（資料來(lái)源：https://www.stateof.ai/）。
無(wú)人駕駛汽車(chē)在變革性的人工智能技術(shù)中應(yīng)該有自己的一席之地。這個(gè)生態(tài)系統(tǒng)中的主要參與者包括Cruise、優(yōu)步、Waymo、Nuro、Aurora、福特等。現(xiàn)在它還處于初期，過(guò)分樂(lè)觀(guān)已經(jīng)給這個(gè)行業(yè)帶來(lái)了真正的問(wèn)題，但毫無(wú)疑問(wèn)，我們將在21世紀(jì)20年代看到超越人類(lèi)的自動(dòng)駕駛能力。在2015年的時(shí)候，我對(duì)無(wú)人駕駛做出了如下預(yù)測(cè)：
“到2045年，一個(gè)人駕駛的小車(chē)看起來(lái)就像一匹馬拉著的輕便馬車(chē)。”
5年后，我想我可能低估了無(wú)人駕駛汽車(chē)的上市速度。2018年，Waymo汽車(chē)的行駛里程超過(guò)100萬(wàn)英里，美國(guó)24個(gè)城市的公共道路上都有無(wú)人駕駛汽車(chē)在行駛。今天，我預(yù)計(jì)到2025年，來(lái)自多家制造商的多種車(chē)型將實(shí)現(xiàn)5級(jí)完全自動(dòng)駕駛。請(qǐng)關(guān)注特斯拉、通用、福特和寶馬。
在過(guò)去的十年中，人工智能研究論文的發(fā)表量增長(zhǎng)了10倍，現(xiàn)在人工智能正把實(shí)用、有幫助的工具交到主流用戶(hù)手中，預(yù)計(jì)這一趨勢(shì)將持續(xù)到新的十年。
我們已經(jīng)開(kāi)始看到人工智能做了很多幾年前大多數(shù)人都不敢相信的事情。期待人工智能在下一個(gè)十年創(chuàng)造出更加驚人的奇跡。
區(qū)塊鏈和加密貨幣
2019年是區(qū)塊鏈和加密貨幣領(lǐng)域具有里程碑意義的一年。區(qū)塊鏈技術(shù)開(kāi)始進(jìn)入主流。我預(yù)計(jì)2020年會(huì)有更多的增長(zhǎng)和主流采用。
DeFi（去中心化金融）爆炸式增長(zhǎng)，實(shí)現(xiàn)了用戶(hù)友好，無(wú)許可，無(wú)銀行借貸。目前DeFi合同的總金額已經(jīng)有6.5億美元（包括4.5億美元的無(wú)銀行貸款），而2019年只是這項(xiàng)技術(shù)可用的第一年。隨著越來(lái)越多的人投資于加密貨幣，我預(yù)測(cè)未來(lái)會(huì)有更多的加密貨幣支持的DeFi貸款。
人們可以在不犧牲其加密投資機(jī)會(huì)成本的情況下獲得流動(dòng)性，或使用DeFi貸款以杠桿效應(yīng)投資加密貨幣（增加其投資的風(fēng)險(xiǎn)/回報(bào)）。
加密貨幣和區(qū)塊鏈技術(shù)正在突破主流。比特幣和以太坊的每日活躍地址在2018年1月達(dá)到峰值，隨后一年由于市場(chǎng)低迷而興趣減弱（每上漲10倍，加密貨幣的價(jià)格就會(huì)大幅回落，然后在下一個(gè)周期比之前的峰值再高出10倍）。
比特幣和以太坊區(qū)塊鏈上的每日活動(dòng)地址統(tǒng)計(jì)（數(shù)據(jù)來(lái)源：https://coinmetrics.io/charts/#assets=btc,eth_log=false_roll=90_left=AdrActCnt_zoom=1279411200000,1577836800000）
Square的Cash App擁有超過(guò)1000萬(wàn)次的安卓版下載量。用戶(hù)可以在一個(gè)擁有出色用戶(hù)體驗(yàn)的簡(jiǎn)單應(yīng)用程序中購(gòu)買(mǎi)、出售、發(fā)送和接收比特幣。
Coinbase的安卓版下載量超過(guò)1000萬(wàn)次。
Brave推出了內(nèi)置以太坊錢(qián)包，每月活躍用戶(hù)（MAU）的數(shù)量從10月的870萬(wàn)增加到11月底的1040萬(wàn)。
借助Sliver.tv和DLive，2000萬(wàn)視頻游戲迷正在使用Theta網(wǎng)絡(luò)進(jìn)行分散流媒體播放。
2019年我最喜歡的變化是Fortmatic的引入。無(wú)論你是否正在構(gòu)建加密應(yīng)用程序，你都可以使用Fortmatic來(lái)替代你的用戶(hù)身份驗(yàn)證并提高安全性、你還可以擺脫供應(yīng)商鎖定，并添加諸如端到端加密、簽名事務(wù)等功能。
如果你打算在2020年構(gòu)建一個(gè)新的應(yīng)用程序，考慮使用Fortmatic，而不是重復(fù)使用你自己的用戶(hù)名/密碼認(rèn)證（2020年應(yīng)該沒(méi)有人再這么做），或者將身份認(rèn)證授權(quán)給谷歌、Facebook等。
我寫(xiě)過(guò)一篇文章，討論如何利用加密技術(shù)來(lái)改善應(yīng)用程序的身份驗(yàn)證和安全性。我很期待看到主流應(yīng)用在2020年采用像Fortmatic這樣的技術(shù)。
以太坊在2019年輕松贏(yíng)得了智能合約平臺(tái)競(jìng)賽。我預(yù)計(jì)它將在2020年繼續(xù)占據(jù)主導(dǎo)地位。
擴(kuò)展現(xiàn)實(shí)（XR）
從2015年開(kāi)始，我每年都會(huì)寫(xiě)一篇關(guān)于對(duì)AR（增強(qiáng)現(xiàn)實(shí)）的期許的文章，從小我就一直夢(mèng)想著它的實(shí)現(xiàn)。未來(lái)，擴(kuò)展現(xiàn)實(shí)（XR）將取代手機(jī)。這只是時(shí)間問(wèn)題。但是還需要多久是個(gè)懸而未決的問(wèn)題。但現(xiàn)在看來(lái)這種轉(zhuǎn)變可能在未來(lái)十年內(nèi)出現(xiàn)。甚至可能在未來(lái)5年內(nèi)開(kāi)始。
由于虛擬現(xiàn)實(shí)（VR）和增強(qiáng)現(xiàn)實(shí)（AR）之間的界限已經(jīng)模糊，因此業(yè)界現(xiàn)在將整個(gè)領(lǐng)域稱(chēng)為擴(kuò)展現(xiàn)實(shí)（XR）。自推出以來(lái)，ARKit和ARCore（蘋(píng)果和谷歌的增強(qiáng)現(xiàn)實(shí)SDK）增長(zhǎng)量驚人。從2017年到2019年5月，每月活躍用戶(hù)從4,700萬(wàn)增長(zhǎng)到了1.5億。
WebAR在2019年站穩(wěn)了腳跟，并且有可能在2020年繼續(xù)增長(zhǎng)。如果你好奇的話(huà)，可以查看AR.js、React 360或Viro React。
硬件方面也有了長(zhǎng)足進(jìn)步。HoloLens 1在2016年首次發(fā)布開(kāi)發(fā)者版本時(shí)，售價(jià)約為5,000美元。在那以后發(fā)生了什么？
HoloLens 2仍然只售3,500美元，而且還沒(méi)有為消費(fèi)者做好準(zhǔn)備。剪輯、防抖動(dòng)和漂移、視場(chǎng)等方面仍然存在問(wèn)題，你不會(huì)想整天穿著這些東西。不過(guò)，由于99美元/月的定價(jià)，獲得一個(gè)開(kāi)發(fā)者版本變成了一個(gè)可能性，即使你不得不在等待名單等上一段時(shí)間。
無(wú)人機(jī)
大約200萬(wàn)架無(wú)人機(jī)已經(jīng)在美國(guó)售出，它們已經(jīng)改變了建筑、地理調(diào)查、測(cè)繪、電影、航空攝影、農(nóng)業(yè)、環(huán)境科學(xué)和娛樂(lè)業(yè)。很有可能，商用無(wú)人機(jī)的交付最終將于2020年在美國(guó)實(shí)現(xiàn)。。
FPV無(wú)人機(jī)比賽是我最喜歡的觀(guān)賞性體育運(yùn)動(dòng)，無(wú)人機(jī)比賽聯(lián)盟的直播流比賽也是。如果你想了解它是什么樣的，他們也有一個(gè)精心設(shè)計(jì)的模擬器。
所有這些新的無(wú)人機(jī)活動(dòng)都需要很多軟件，包括圖像處理、無(wú)人機(jī)地圖軟件、交付飛行計(jì)劃、遙測(cè)記錄和處理、分析、工業(yè)應(yīng)用集成等。
無(wú)人機(jī)和人工智能也有很多重疊之處。自動(dòng)飛行的無(wú)人機(jī)需要圖像處理、避免碰撞等。
結(jié)論
21世紀(jì)10年代給我們帶來(lái)了許多變革性的技術(shù)，它們當(dāng)中的許多我們已經(jīng)視為理所當(dāng)然，但是產(chǎn)生了巨大影響：
Spotify
優(yōu)步
虛擬助理
無(wú)線(xiàn)耳塞
主流虛擬現(xiàn)實(shí)
增強(qiáng)現(xiàn)實(shí)（如在突破命中游戲“神奇寶貝”中所用）
價(jià)格合理的特斯拉
共享經(jīng)濟(jì)（汽車(chē)、踏板車(chē)、自行車(chē)）
主流平板電腦
主流生物識(shí)別技術(shù)（觸摸識(shí)別、面部識(shí)別）
眾籌
我迫不及待想看到你在新的十年里的發(fā)展。
讓我們變魔術(shù)吧！
原文：https://medium.com/javascript-scene/top-javascript-frameworks-and-topics-to-learn-in-2020-and-the-new-decade-ced6e9d812f9
本文為 CSDN 翻譯，轉(zhuǎn)載請(qǐng)注明來(lái)源出處。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
