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
520
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
440
NTU CCSP 2012Fall - Node.js #3 - Mongoose
xpsteven
2
710
NTU CCSP 2012Fall - Node.js #2 - express.js
xpsteven
3
560
Y! Open Hack 2012 Taiwan
xpsteven
0
170
Other Decks in Programming
See All in Programming
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
4
680
🔨 小さなビルドシステムを作る
momeemt
3
630
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
130
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
0
230
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
200
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
4
2k
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
17
3.9k
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
syucream
2
800
CSC305 Summer Lecture 12
javiergs
PRO
0
130
KessokuでDIでもgoroutineを活用する / Go Connect #6
mazrean
0
130
TROCCO×dbtで実現する人にもAIにもやさしいデータ基盤
nealle
0
390
TDD 実践ミニトーク
contour_gara
1
270
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
A designer walks into a library…
pauljervisheath
207
24k
Automating Front-end Workflow
addyosmani
1370
200k
Balancing Empowerment & Direction
lara
3
610
The Pragmatic Product Professional
lauravandoore
36
6.8k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Thoughts on Productivity
jonyablonski
69
4.8k
Unsuck your backbone
ammeep
671
58k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
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 下周待續