Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Learn JavaScript Well
Search
高見龍
October 25, 2020
Programming
1
1.3k
Learn JavaScript Well
MOPCON 2020 分享主題「打造資深實力 - 你該學好的 JavaScript」
高見龍
October 25, 2020
Tweet
Share
More Decks by 高見龍
See All by 高見龍
為你自己學 Python
eddie
0
620
Generative AI 年會小聚 - AI 教我寫程式
eddie
0
98
讓數據說話:用 Python、Prometheus 和 Grafana 講故事
eddie
0
620
AI 時代的程式語言學習法
eddie
0
140
前端模組解放運動 - importmap
eddie
0
1.4k
Git 和 DevOps - 在混亂的流星群開發流程中找到小確幸
eddie
1
1.2k
模組化前端開發:從亂七八糟到組織有序
eddie
0
1.6k
被 Vue 框架耽誤的建置工具
eddie
2
1k
開開心心寫測試,你的程式碼也會微笑
eddie
1
1.3k
Other Decks in Programming
See All in Programming
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
550
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
130
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
470
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
360
Is Xcode slowly dying out in 2025?
uetyo
1
270
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
820
生成AI時代のコンポーネントライブラリの作り方
touyou
1
210
ふつうの技術スタックでアート作品を作ってみる
akira888
1
820
Hack Claude Code with Claude Code
choplin
4
2k
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
440
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Bash Introduction
62gerente
613
210k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Automating Front-end Workflow
addyosmani
1370
200k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Transcript
ޒഒላӃ .01$0/ ଧࢿਂመྗ 你該學好的 JavaScript ҝ㟬ࣗݾላ
a.k.a Eddie 愛現! 喜歡冷門的玩具 Ruby/Rails 開發者、講師 Ruby 技術推廣、教育、諮詢 台灣、日本等國內外 Ruby
技術研討會講者 部落格:https://kaochenlong.com 高見龍@eddiekao
ޒഒላӃ .01$0/ 第18刷 發售中 發售中 發售中
ޒഒላӃ .01$0/ Git 小教室
ޒഒላӃ .01$0/ 已絕版
ޒഒላӃ .01$0/ 敬請 期待
ޒഒላӃ .01$0/ ༗ᘋ㐸 電子書
ޒഒላӃ .01$0/ ʮላशෆधཁҝެ࢘ɺҝɼ ෆधཁҝผਓɼҝ你ࣗݾʯ ߴݟཾ
ޒഒላӃ .01$0/ ৬ೈᱪఔࢣʁ
ޒഒላӃ .01$0/ ೖҎ্ɼதڃະᕝ
ޒഒላӃ .01$0/ େߝ
ޒഒላӃ .01$0/ େߝ w+BWB4DSJQUతᢛෆ wಹࠣ༗झత+BWB4DSJQUޠ๏എޙతނࣄ w你ٕ֘ೳᴍᏐᴍࡏṜࠣํʂ wኺ৽ख্࿏౸അ్ࣝ
ޒഒላӃ .01$0/ DISCLAIMER 本次分享內容可能隱含部份商業或課程置入訊 息,請謹慎評估!
ޒഒላӃ .01$0/ ᪑ෆ
ޒഒላӃ .01$0/ ʮՖऒᚙɼ+BWB4DSJQUಹॄኄᗞઃܭʂʯ ᢛෆ
ޒഒላӃ .01$0/ ʮੈք্༗ၷछఔࣜޠݴɼ Ұछඃഃ౸ष಄ɼ另Ұछᔒਓ༻ʯ $ ೭#KBSOF4USPVTUSVQ ᢛෆ
ޒഒላӃ .01$0/ +4-JOU ᢛෆ
ޒഒላӃ .01$0/ +4-JOU Մೳ။ᩋ你᧷ಘࣗݾෆ။ሜఔࣜʂ ᢛෆ
ޒഒላӃ .01$0/ function hello() { return "world"; } function hello()
{ return "world"; } ᢛෆ
ޒഒላӃ .01$0/ 㑌छఔࣜޠݴ༗ᢛෆతҰ໘ ᢛෆ
ޒഒላӃ .01$0/ ෆཁੋ᪑ஶ鄉ຽҰىഃ ᢛෆ
ޒഒላӃ .01$0/ ༗झޠ๏എޙతނࣄ
ޒഒላӃ .01$0/ 你ಓએࠂੋዎኄҰճࣄ嗎ʁ ༗झޠ๏
ޒഒላӃ .01$0/ ᏓᏐએࠂ ༗झޠ๏
ޒഒላӃ .01$0/ var a = 1; console.log(a); // 會印出什什麼? ༗झޠ๏
1
ޒഒላӃ .01$0/ console.log(a); // 會印出? var a = 1; ༗झޠ๏
undefined
ޒഒላӃ .01$0/ ᏓᏐఏঢ 7BSJBCMF)PJTUJOH ༗झޠ๏
ޒഒላӃ .01$0/ var a; console.log(a); // 所以印出 undefined a =
1; ༗झޠ๏ 被拉到上面?
ޒഒላӃ .01$0/ ฤᩄWTᩄ $PNQJMBUJPOWT*OUFSQSFUBUJPO ༗झޠ๏
ޒഒላӃ .01$0/ ݐཱظWTࣥߦظ $SFBUJPO1IBTFWT&YFDVUJPO1IBTF ༗झޠ๏
ޒഒላӃ .01$0/ ݐཱظ Ḽ໊ʢ*EFOUJpFSʣ ਐߦॳ࢝Խ 1A 1B ༗झޠ๏
ޒഒላӃ .01$0/ ࣥߦظ ࣥߦവᏐො值 2 ༗झޠ๏
ޒഒላӃ .01$0/ var a = 1; console.log(a); ༗झޠ๏ ݐཱظ var
a; console.log(a); undefined 1A 1B
ޒഒላӃ .01$0/ var a = 1; console.log(a); ༗झޠ๏ ࣥߦظ a
= 1; console.log(a); 1 2 2
ޒഒላӃ .01$0/ ၷ֊ஈ ༗झޠ๏
ޒഒላӃ .01$0/ console.log(a); var a = 1; ༗झޠ๏ ݐཱظ console.log(a);
var a; undefined 1A 1B
ޒഒላӃ .01$0/ console.log(a); var a = 1; ༗झޠ๏ ࣥߦظ console.log(a);
a = 1; undefined 1 2 2
ޒഒላӃ .01$0/ খଌᱛ ༗झޠ๏
ޒഒላӃ .01$0/ var a = 1; var a; console.log(a); //
會印出什什麼? ༗झޠ๏ 1
ޒഒላӃ .01$0/ if (false) { var a = 1; }
console.log(a); // 會印出什什麼? ༗झޠ๏ undefined
ޒഒላӃ .01$0/ 另ҰछᏓᏐએࠂ ༗झޠ๏
ޒഒላӃ .01$0/ console.log(a); // 會印出什什麼? let a = 1; ༗झޠ๏
Reference Error
ޒഒላӃ .01$0/ ҼҝMFUෆ။ᏓᏐఏঢʁ ༗झޠ๏
ޒഒላӃ .01$0/ console.log(a); let a = 1; ༗झޠ๏ ݐཱظ console.log(a);
let a; 1A TDZ
ޒഒላӃ .01$0/ console.log(a); let a = 1; ༗झޠ๏ ࣥߦظ console.log(a);
a = 1; Reference Error 2
ޒഒላӃ .01$0/ ࣌ࢮე 5%;5FNQPSBM%FBE;POF ༗झޠ๏
ޒഒላӃ .01$0/ let a = 1; console.log(a); // 會印出什什麼? ༗झޠ๏
ޒഒላӃ .01$0/ let a = 1; console.log(a); ༗झޠ๏ ݐཱظ let
a; console.log(a); 1A TDZ
ޒഒላӃ .01$0/ let a = 1; console.log(a); ༗झޠ๏ ࣥߦظ a
= 1; console.log(a); 1 2 2
ޒഒላӃ .01$0/ MFU৽൛తWBS Ҏޙ༻MFUबྃʁ ༗झޠ๏
ޒഒላӃ .01$0/ വᏐએࠂ ༗झޠ๏
ޒഒላӃ .01$0/ sayHello(); function sayHello() { console.log('hello'); } ༗झޠ๏ ?
ޒഒላӃ .01$0/ sayHello(); function sayHello() { console.log('hello'); } ༗झޠ๏ ݐཱظ
1A 1B sayHello(); function sayHello() { console.log('hello'); } 2
ޒഒላӃ .01$0/ sayHello(); function sayHello() { console.log('hello'); } ༗झޠ๏ sayHello();
function sayHello() { console.log('hello'); } 2 ࣥߦظ hello
ޒഒላӃ .01$0/ { } ༗झޠ๏ 物件? Block?
ޒഒላӃ .01$0/ { hello: '哈囉' } ༗झޠ๏ 物件
ޒഒላӃ .01$0/ { hello: for (var i = 0; i
< 10; i++ ) { if (i % 2 === 0) { continue hello; } console.log(i); } } ༗झޠ๏ label label Block
ޒഒላӃ .01$0/ + 加號? 十字架? ༗झޠ๏
ޒഒላӃ .01$0/ DPFSDJPO<ˋkoʊˈɝː.ʃən> 5IFVTFPGGPSDFUPQFSTVBEFTPNFPOFUPEP TPNFUIJOHUIBUUIFZBSFVOXJMMJOHUPEP ༗झޠ๏
ޒഒላӃ .01$0/ +'' // 0 +[] // 0 +{} //
NaN +-1 // -1 +true // 1 +false // 0 +undefined // NaN +null // 0 ༗झޠ๏
ޒഒላӃ .01$0/ [] + [] // ? [] + {}
// ? {} + [] // ? ༗झޠ๏
ޒഒላӃ .01$0/ [] + [] ༗झޠ๏
ޒഒላӃ .01$0/ ༗झޠ๏
ޒഒላӃ .01$0/ [] + [] [].toString() + [].toString() ༗झޠ๏ 空字串
空字串
ޒഒላӃ .01$0/ [] + {} ༗झޠ๏
ޒഒላӃ .01$0/ [] + {} [].toString() + {}.toString() ༗झޠ๏ '[object
Object]' 字串串 空字串
ޒഒላӃ .01$0/ {} + [] ༗झޠ๏ Block
ޒഒላӃ .01$0/ [] + {} Block 後⾯面跟了了 +[] ༗झޠ๏ 0
ޒഒላӃ .01$0/ [] + [] // '' [] + {}
// '[object Object]' {} + [] // 0 ༗झޠ๏
ޒഒላӃ .01$0/ /B//PU"/VNCFS ༗झޠ๏
ޒഒላӃ .01$0/ console.log(typeof NaN); // 會印出什什麼? number ༗झޠ๏
ޒഒላӃ .01$0/ /B/ੋҰछᏐࣈ ୠሏ༻ိදࣔʮෆੋᏐࣈʯ ༗झޠ๏
ޒഒላӃ .01$0/ ʮݸᥒʯ᪑ʮݸᥒʯతࠩผʁ ༗झޠ๏
ޒഒላӃ .01$0/ ʮݸᥒෆ။ൺֱܕผʁʯ ༗झޠ๏
ޒഒላӃ .01$0/ ݸᥒ᪑ݸᥒతࠩผʁ ༗झޠ๏
ޒഒላӃ .01$0/ ཧղࡉઅ ༗झޠ๏
ޒഒላӃ .01$0/ 你ٕ֘ೳᴍᏐᴍࡏṜࠣํʂ ਓੜۤ
ޒഒላӃ .01$0/ ಓཧେՈಓɼୠೳ၏౸తᔒଟগ ਓੜᴍᏐ
ޒഒላӃ .01$0/ ٕೳᴍᏐ༗ݶ ਓੜᴍᏐ
ޒഒላӃ .01$0/ Ռཁࢿࡏ+BWB4DSJQUత ਓੜᴍᏐ
ޒഒላӃ .01$0/ ਂೖ+BWB4DSJQU w݅ಋ wവᏐ$MPTVSF wUIJT wඇಉ㑊႔ཧ w&4.PEVMF
ޒഒላӃ .01$0/ ֘ላલᐽՍ嗎ʁ֘ላ哪Ұݸʁ ਓੜᴍᏐ "
ޒഒላӃ .01$0/ ؐཁෆཁላK2VFSZʁ ਓੜᴍᏐ
ޒഒላӃ .01$0/ ֘ላࢿྉ݁ߏɺԋࢉ๏嗎ʁ ਓੜᴍᏐ
ޒഒላӃ .01$0/ ؐ༗ॄኄʁ ਓੜᴍᏐ
ޒഒላӃ .01$0/ ൛ຊ߇੍ ਓੜᴍᏐ 非業配
ޒഒላӃ .01$0/ "TTFUଧแ۩ ਓੜᴍᏐ
ޒഒላӃ .01$0/ ཆจ݅తश׳ ਓੜᴍᏐ
ޒഒላӃ .01$0/ ӳจ ਓੜᴍᏐ
ޒഒላӃ .01$0/ ࢿҰఆ༗෩ᯃɼٕज़ࢿ༗ᩲ༗ഛɼ ਃߪલጯৄ閱ެ։說໌ॻɻ ਓੜᴍᏐ
ޒഒላӃ .01$0/ ኺ৽ख্࿏౸അ్ࣝ
ޒഒላӃ .01$0/ ૉਓ৬ޭతՄೳੑʁ ৽खᢛഅ
ޒഒላӃ .01$0/ զෆੋՊ൝ඟۀత ৽खᢛഅ
ޒഒላӃ .01$0/ զཁઌላ哪Ұఔࣜޠݴʁ ৽खᢛഅ
ޒഒላӃ .01$0/ ઌ辦๏፤౸ථʂ ৽खᢛഅ
ޒഒላӃ .01$0/ ઌᏓʮ৽खʯ ৽खᢛഅ
ޒഒላӃ .01$0/ ၏ላతํࣜ ৽खᢛഅ
ޒഒላӃ .01$0/ େ෦份తٕज़ඃᚙ໌ग़ိ ੋཁղܾಛఆత ৽खᢛഅ
ޒഒላӃ .01$0/ അ్ࣝ೭༌ೖἫ ৽खᢛഅ
ޒഒላӃ .01$0/ ॏᴍɿจ݅ن֨ख ࣗզ ৽खᢛഅ
ޒഒላӃ .01$0/ ৽खᢛഅ
ޒഒላӃ .01$0/ ৽खᢛഅ
ޒഒላӃ .01$0/ ཧղࡉઅ ৽खᢛഅ
ޒഒላӃ .01$0/ อ࣋ح৺ ৽खᢛഅ
ޒഒላӃ .01$0/ ෆཁ࠶૬৴ᔒ༗ࠜᎦత說๏ྃ ৽खᢛഅ
ޒഒላӃ .01$0/ ҆፻ʁ ৽खᢛഅ
ޒഒላӃ .01$0/ ᩇॻʂ ৽खᢛഅ
ޒഒላӃ .01$0/ ਪનॻ ৽खᢛഅ
ޒഒላӃ .01$0/ ਪનॻ w:PV%POU,OPX+4ܥྻ w᮷阱ʂޡղʂఱॏ৽ೝࣝ+BWB4DSJQUʂ w&MPRVFOU+BWB4DSJQU w&GGFDUJWF+BWB4DSJQU
ޒഒላӃ .01$0/ 閱ᩇݪ࢝ᛰ ৽खᢛഅ
ޒഒላӃ .01$0/ ( function( global, factory ) { "use strict";
// 略略 } )( typeof window !== "undefined" ? window : this, function( window, noGlobal ) { // 略略 IIFE ৽खᢛഅ
ޒഒላӃ .01$0/ അ్ࣝ೭༌ग़Ἣ ৽खᢛഅ
ޒഒላӃ .01$0/ ࢪൺडߋ༗ಘ ৽खᢛഅ
ޒഒላӃ .01$0/ ʮՌ你ߨ౸࿈你Ѩ嫲ᡒత懂తʯ ৽खᢛഅ
ޒഒላӃ .01$0/ 㑚Ө ࣗݴࣗޠʂ ৽खᢛഅ
ޒഒላӃ .01$0/ ሜจষ ৽खᢛഅ
ޒഒላӃ .01$0/ ሜจষෆੋҝྃߚɺ ࣕੋҝྃࢥߟᢛࣗզሣ ৽खᢛഅ
ޒഒላӃ .01$0/ J5)PNFਓᩱ ৽खᢛഅ
ޒഒላӃ .01$0/ 4JEF1SPKFDU ৽खᢛഅ
ޒഒላӃ .01$0/ ৽ख্࿏ ৽खᢛഅ
ޒഒላӃ .01$0/ ෆཁযྀɺෆཁᛇ
ޒഒላӃ .01$0/ photo by redjar
ޒഒላӃ .01$0/ photo by Quality & Style
ޒഒላӃ .01$0/ Ҏ্Ͱ͢ʂ
ޒഒላӃ .01$0/ 歡迎加 好友