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
你懂了 JavaScript,也不懂 JavaScript - MOPCON 2021
Search
Huli
November 19, 2021
Programming
3
1.1k
你懂了 JavaScript,也不懂 JavaScript - MOPCON 2021
Huli
November 19, 2021
Tweet
Share
More Decks by Huli
See All by Huli
ModernWeb 2018 - 輕鬆應付複雜的非同步操作:RxJS + Redux Observable
aszx87410
0
210
Attacking web without JS - CSS injection
aszx87410
0
3.3k
Front-end Security that Front-end developers don't know
aszx87410
2
5.8k
接觸資安才發現前端的水真深 - Modern Web 2021
aszx87410
0
2.4k
JSDC2020 - 用 API mocking 讓前端不再苦等待
aszx87410
0
1.3k
Other Decks in Programming
See All in Programming
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
850
気づいて!アプリからのSOS 〜App Store Connect APIで始めるパフォーマンス健康診断〜
waka12
0
250
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
2.8k
CSS Linter の現在地 2025年のベストプラクティスを探る
ryo_manba
10
3.2k
実践AIチャットボットUI実装入門
syumai
7
2.4k
株式会社 Sun terras カンパニーデック
sunterras
0
180
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
820
開発者への寄付をアプリ内課金として実装する時の気の使いどころ
ski
0
340
メモリ不足との戦い〜大量データを扱うアプリでの実践例〜
kwzr
1
700
AIエージェント時代における TypeScriptスキーマ駆動開発の新たな役割
bicstone
4
1.2k
Serena MCPのすすめ
wadakatu
4
850
CSC509 Lecture 01
javiergs
PRO
1
430
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
How GitHub (no longer) Works
holman
315
140k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
How to Ace a Technical Interview
jacobian
280
23k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Faster Mobile Websites
deanohume
310
31k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Transcript
你懂了了 JavaScript,也不懂 JavaScript Huli @ MOPCON 2021
About 上半年年:OneDegree 前端⼯工程師
About 上半年年:OneDegree 前端⼯工程師 下半年年:Cymetrics 資安⼯工程師
開始之前,先來來個⼩小測驗
下列列各組「」內的字,讀⾳音相同的選項是 • (A) 令⼈人發「噱」/「遽」然⽽而逝 • (B) 同⼼心「戮」⼒力力/「蓼」菜成⾏行行 • (C) 寒「蛩」鳴秋/「煢」居荒野
• (D)「瓠」巴⿎鼓瑟/簞「瓢」屢屢空 出處:101 年年指考國⽂文
下列列各組「」內的字,讀⾳音相同的選項是 • (A) 令⼈人發「噱」/「遽」然⽽而逝 • (B) 同⼼心「戮」⼒力力/「蓼」菜成⾏行行 • (C) 寒「蛩」鳴秋/「煢」居荒野
• (D)「瓠」巴⿎鼓瑟/簞「瓢」屢屢空 出處:101 年年指考國⽂文
下列列各組「」內的字,讀⾳音相同的選項是 • (A) 令⼈人發「噱」/「遽」然⽽而逝 • (B) 同⼼心「戮」⼒力力/「蓼」菜成⾏行行 • (C) 寒「蛩」鳴秋/「煢」居荒野
• (D)「瓠」巴⿎鼓瑟/簞「瓢」屢屢空 出處:101 年年指考國⽂文
下列列各組「」內的字,讀⾳音相同的選項是 • (A) 令⼈人發「噱」/「遽」然⽽而逝 • (B) 同⼼心「戮」⼒力力/「蓼」菜成⾏行行 • (C) 寒「蛩」鳴秋/「煢」居荒野
• (D)「瓠」巴⿎鼓瑟/簞「瓢」屢屢空 出處:101 年年指考國⽂文
讓我們再來來⼀一個⼩小測驗
請問以下四個的結果是 [] + [] [] + {} {} + []
{} + {}
請問以下四個的結果是 [] + [] [] + {} {} + []
{} + {}
1. 這個對我寫 code 有幫助嗎? 2. 不知道的話,會容易易寫出 bug 嗎?
None
None
eslint: b is not defined
None
None
None
1. 比較不重要但有趣的知識 2. 重要的知識
1. 比較不重要但有趣的知識 2. 重要的知識 成為 JS ⼤大師 aka spec ⼤大師
1. 比較不重要但有趣的知識 2. 重要的知識 避免寫出 bug,寫出更更好的 code
時間有限的前提下,挑價值最⾼高的先學
Agenda 1.Type 2.Hoisting 3.This 4.Prototype 5.Async
Type
Number 跟 String
[1,5,3,11,7].sort()
[1,5,3,11,7].sort() [1,11,3,5,7]
None
None
None
None
3.3000000000000003
Number.EPSILON = 2^-52
Math.abs(0.1+0.2-0.3) < Number.EPSILON
None
None
None
None
Number.MAX_SAFE_INTEGER 9007199254740991
第七種資料型別 BigInt
重點 1. 排序時注意比較的是字典序 2. 注意數字加字串串會變字串串 3. 處理理⼩小數時注意浮點數問題 4. 處理理⼤大數時注意數字範圍 5.
⼤大數可以⽤用 BigInt
Hoisting
None
1 2 3 4
1 2 3 4
JS 在執⾏行行前就會做⼀一些處理理
None
重點 1. JS 還是有編譯的存在 2.在進入函式時就會對宣告做處理理
This
None
None
var q = document.query q() document.query()
var q = document.query q() document.query()
this 的值跟怎麼呼叫函式有關
var q = document.query q() document.query() this
var q = document.query q() document.query() this this?
None
None
None
None
None
None
TypeError Cannot read property 'setState' of undefined
this 的值跟怎麼呼叫函式有關
None
None
None
重點 1. 呼叫函式的⽅方式會影響 this 2. bind 可以綁定特定 this 3. call、apply
呼叫函式時可以指定 this 4. arrow function 也會改變 this
Prototype
None
(1).toString()
(1).toString() (1).__proto__ => Number.prototype
(1).toString() (1).__proto__ => Number.prototype Number.prototype.toString
(1).toString() (1).__proto__ => Number.prototype Number.prototype.toString
None
None
None
None
None
None
None
None
重點 1. prototype chain 的概念念 2. JS 透過 prototype chain
尋找 屬性跟⽅方法 3.透過全寫去呼叫函式
Async
None
None
None
callback !== 非同步
None
call stack task queue Web API main
call stack task queue Web API main setTimeout
call stack task queue Web API main 100ms, fn
call stack task queue Web API main fn
call stack task queue Web API main fn console
call stack task queue Web API main fn
call stack task queue Web API fn
call stack task queue Web API fn
call stack task queue Web API fn console
call stack task queue Web API fn
call stack task queue Web API
None
None
None
None
重點 1. callback !== 非同步 2. event loop 的運作⽅方式
Agenda 1.Type 2.Hoisting 3.This 4.Prototype 5.Async
1. 這個對我寫 code 有幫助 2. 不知道的話,會容易易寫出 bug