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
NTU CCSP 2012Fall - Node.js #2 - Advanced Javas...
Search
Steven Su
October 18, 2012
Programming
1
510
NTU CCSP 2012Fall - Node.js #2 - Advanced Javascript and Node.js
Steven Su
October 18, 2012
Tweet
Share
More Decks by Steven Su
See All by Steven Su
JSDC.TW 2013 Node.js佈署心得
xpsteven
14
1.2k
NTU CCSP 2012Fall - Mobile Web入門 回首網頁開發
xpsteven
3
290
NTU CCSP 2012Fall - Facebook
xpsteven
1
190
NTU CCSP 2012Fall - Node.js #2.1 - Simple File Host Service
xpsteven
2
430
NTU CCSP 2012Fall - Node.js #3 - Mongoose
xpsteven
2
700
NTU CCSP 2012Fall - Node.js #2 - express.js
xpsteven
3
550
Y! Open Hack 2012 Taiwan
xpsteven
0
170
Other Decks in Programming
See All in Programming
Benchmark
sysong
0
270
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
290
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
260
NPOでのDevinの活用
codeforeveryone
0
450
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
Select API from Kotlin Coroutine
jmatsu
1
190
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
250
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
130
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
460
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
150
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
510
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
331
24k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Building Adaptive Systems
keathley
43
2.6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
950
Producing Creativity
orderedlist
PRO
346
40k
Done Done
chrislema
184
16k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Transcript
Advanced JS and Node.js NTU CCSP 2012 FALL
Outline • 物件導向?! new // Function // instanceof • 物件導向2
prototype • ECMA5的好東西 Array.xxx Object.xxx
JS物件導向 • JS沒有class但有new • JS沒有class但有instanceof • JS沒有class但有prototype
回到資料型態 • Primitive Type ◦ string ◦ number (NaN Infinity)
◦ boolean • Composite Type ◦ Object ◦ Array ◦ String ◦ Number ◦ Boolean • Special Type ◦ null ◦ undefined typeof() 都是 function
函數的三種建構方式 function isthisfunction() {} var isthisfunction2 = new Function(); var
isthisfunction3 = function(){}; console.log(typeof(isthisfunction)); console.log(typeof(isthisfunction2)); console.log(typeof(isthisfunction3)); 所有函數都是物件 但物件不一定是函數
函數作為建構子 function funca() {} var obja = new funca(); console.log(typeof(funca));
console.log(typeof obja); console.log(obja instanceof funca); function Person(name, age) { this.name = name; this.age = age; } var p1 = new Person('Justin', 35); var p2 = new Person('Momor', 32); console.log(p1 instanceof Person); typeof funca = function typeof obja = object obja instanceof funca = true 判斷物件的class要用 instanceof 而不是 typeof
What is this ? function fn( arg1, arg2,... ){ //
do something } fn( arg1, arg2,... ); fn.call(context, arg1, arg2,... ); fn.apply(context, [ arg1, arg2,... ]); this就是apply與call的第一個參 數 都沒有指定時取決呼叫方式 物件呼叫帶物件本身 非物件呼叫帶全域變數
呼叫方式對this的差異 var obj = { fn : function() {console.log(this)} };
obj.fn(); var tmpfn = obj.fn; tmpfn(); 第一個會印空物件 第二個會印很多東西 取決於執行環境
回頭看 function Student(school) { this.school = school; } var stu1
= {school : 'NTU'}; var stu2 = new Student('NCKU'); console.log(typeof stu1); console.log(typeof stu2); console.log(stu1 instanceof Student); console.log(stu2 instanceof Student); 你可以想像成 new Student就是 呼叫Studen且context設成一個空物 件 object object false true
原形鍊詳解 function Person(name) { this.name = name; } var p1
= new Person('Steven'); console.log(p1); console.log(p1.__proto__); console.log(p1.__proto__ === Person.prototype); console.log(p1.__proto__.__proto__); console.log(p1.__proto__.__proto__ === Object.prototype); Person p1 Person.prototyp e new Object new Object.prototype { name: 'Steven' } {} true {} true
原型練應用於物件方法 function Person(name) { this.name = name; } Person.prototype.like =
function(another) { if(!(another instanceof Person)) throw new Error('Not Person'); if(another == this) throw new Error('can not like myself'); this.likewith = another; another.likewith = this; }; var p1 = new Person('Steven'); var p2 = new Person('Jobs'); p1.like(p2); console.log(p1); console.log(p2); { name: 'Steven', likewith: { name: 'Jobs', likewith: [Circular] } } { name: 'Jobs', likewith: { name: 'Steven', likewith: [Circular] } }
原型練應用於繼承 function Person(name) { this.name = name; } Person.prototype.like =
function(another) { if(!(another instanceof Person)) throw new Error('Not Person'); if(another == this) throw new Error('can not like myself'); this.likewith = another; another.likewith = this; }; function Superman(name, superpower) { this.superpower = superpower; Person.call(this, name); } Superman.prototype.__proto__ = Person.prototype; Superman.prototype.usesuperpower = function() { console.log(this.name + ' use "' + this.superpower + '"'); } var hulk = new Superman('HULK001', 'green and big'); hulk.usesuperpower(); HULK001 use "green and big"
原型練應用於繼承 Person Person.prototyp e Object.prototype Suprman Suprman.prototy pe hulk new
call
助教我炸裂了! 撐下去 hasOwnProperty isPrototypeOf var hulk = new Superman('HULK001', 'green
and big'); console.log(hulk.hasOwnProperty('name')); console.log(hulk.hasOwnProperty('usesuperpower')); console.log(hulk instanceof Superman); console.log(Person.prototype.isPrototypeOf(hulk)); true false true true 不是自己的特性 hasOwnProperty會回傳 false
還有更讓你炸裂的特性 function Person(name) { if(name) this.name = name; } Person.prototype.name
= 'ONE MAN'; var p1 = new Person(); console.log(p1.name); p1.name = 'Mike'; console.log(p1.name); var p2 = new Person(); console.log(p2.name); 讀取會follow原型練 寫入不會 ONE MAN Mike ONE MAN
我的意見 • 物件導向的所有特性(類別 繼承 封裝 多形) Javascript都能達成 • 但很少專案會完全導入OOP •
語法本質 => 我不這樣寫還是可以正確交付 • code會變很多 • 如果依賴OOP框架 => 可閱讀性與可移植性變低
ECMA5的好東西 • Array Utilities • Object Getter • Object Setter
• …
Object.keys var obj = { a : 'AAA' , b
: 'BBB' } for(var key in obj) { console.log('obj[' + key + ']=' + obj[key]); } obj.__proto__.c = 'CCC'; for(var key in obj) { console.log('obj[' + key + ']=' + obj[key]); } console.log(Object.keys(obj)); obj[a]=AAA obj[b]=BBB obj[a]=AAA obj[b]=BBB obj[c]=CCC [ 'a', 'b' ] Object.keys不會走prototype chain For-in會
Array in ECMA5 var arr = [1, '2', 3]; console.log(arr.map(function(ele){return
ele*3})); console.log(arr.filter(function(ele){return ele > 1})); arr.forEach(function(ele, index){console.log('arr[' + index + ']=' + ele)}); console.log(arr.every(function(ele){return ele > 2})); console.log(arr.some(function(ele){return ele > 2})); console.log(arr.reduce(function(prev, curr){return prev + curr})); [ 3, 6, 9 ] [ '2', 3 ] arr[0]=1 arr[1]=2 arr[2]=3 false true 123 Map Reduce 正夯
還有更多… • Object.seal • Object.freeze • enumerable and non- enumerable
properties • M$開發者上MSDN JS開發者請上MDN
中場休息
Outline • 介紹是一定要的 • 非同步程式 • 安裝 • 模組機制 •
簡單檔案讀取 • 簡單網頁伺服器
瀏覽器裡的Javascript • 語法來自ECMAScript ◦ 由歐洲電腦製造商協會維護 ◦ 目前第五版 ◦ 第六版快了 •
BOM, Browser Object Model ◦ AJAX, Local Storage, WebGL, Web Audio, WebRTC ◦ W3C維護 • DOM, Document Object Model ◦ W3C維護
Node.js • 語法使用 ECMAScript v5 • 模組機制 • 檔案 檔案系統
網路 程式 • 使用Google的V8 Engine • 編譯成native code執行 • 非常重要 => stop-world GC
同步 (絕大多數) 非同步 (這幾年變紅很多) 非同步與同步 IO wait IO wait IO
IO cmpl IO IO cmpl 非同步會變成多個指令流 像是同步的多執行緒 然而多指令流不代表concurrent 喔
比較 同步 非同步 切換context 中斷(IO Wait, time sharing) 一路玩到掛 平行化
TLP PLP 同步機制 Lock, conditional wait, … Send / wait 同步成本 低 高 單一核心使用效率 低 高
安裝 1. Windows只要一直按next 2. Mac同上 3. Linux建議使用nvm, Node Version Manager
• 推薦優先順序 ◦ Linux > Mac > Windows • 密技 Cloud9 https://c9.io/
Demo
模組機制 • require(‘模組名稱’) • require(‘相對路徑’)
讀取檔案 var fs = require('fs'); console.log(fs.readFileSync(__filename, 'utf-8')); fs.readFile(__filename, 'utf8', function(err,
data) { console.log('async readFile:\n'); console.log(data); }); 用Sync請改去用 Python/PHP/Ruby
HTTP Server var http = require('http'); http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello World\n'); }).listen(process.env.PORT); 萬年老梗
結合兩者 var http = require('http'); var fs = require('fs'); http.createServer(function
(req, res) { res.writeHead(200, {'Content-Type': 'text/html'}); fs.readFile('.' + req.url, 'utf8', function(err, data){ res.end(err ? err.toString() : data); }); }).listen(process.env.PORT); Callback hell 下周待續