1. Tips
2. Scope
2.1. Execution context
2.1.1. global
2.1.1.1. +-------------+ +-----------------------+ |Node +------+ |Execution Context | +-------------+ | +-----------------------+ |global = { | +--> |[Variable Object] = { | | | | | | |}; | | | variables | +-------------- | | | | | data | | | | | | functions | +-------------- | | | |Browser +------+ | objects | +-------------+ | | |window = { | | ... | | | | | |}; | |}; | +-------------+ +-----------------------+
2.1.2. context stack
2.1.2.1. +-----------------------------------+ |function b() // create new context +-----+ +-----------------------------------+ | |Variable Object = { | | +---------------+ | arguments = ...; | | | | | | | | | | | | | | |}; | | | | |Scope chain = | | | . | | +-------------------------------+ | | | . | | |global | | | | . | | | +---> f = 'no'; | | | | | | | | | | | | | | | +---> function a() | | | | | | | +---> f = 'ye' | | | +---------------+ | | | | | +-> |function b | | | +---> function b() | | +---------------+ | | +---> | | |function a | | | | | | +---------------+ | | +---> | | |global context | | | | | +---------------+ | +-------------------------------+ | Context Stack |this = {Object owns b}; | +-----------------------------------+ http://rainy.im
2.2. Scope chain
2.2.1. +--------------------------------------------+ |Scope Chain | +--------------------------------------------+ +-+global [Variable Object] | | | | | +-> var x; | | | | | | <---------------+ | | | + | | +-> function a() [Variable Object]<+ | | | + | | | | | | | | | +--> var x; | | | | | | | | | | + | | | +--> function b() [Variable Object] | | | | | | <---------------+ | | | + | | +-> function c() [Variable Object]<+ | | | + | | | | | | | | | +--> var x; | | | | | | | | | | + | | | +--> function d() [Variable Object] | | | | | v | | | +--------------------------------------------+
2.3. Closure
2.3.1. +-------------------+ +-----------------+ |Execution context | +---+[Scope chain] | +-------------------+ | +-----------------+ +> | var x = 100; | | |[Function inc] | | | var inc1 = inc(); +--+ | + | | | var inc2 = inc(); +--+ | +-> x; | | | | | | | | | inc1(); | | +-> [Function] | | | inc1(); | | + | | | inc2(); | | +-> x++; | | | inc1(); | | | | | inc2(); | +-----------------+ +--+ x; | http://rainy.im | | +-------------------+
3. Identifier
3.1. Case-sensitive
3.1.1. a != A
3.2. start with: letters, _, $
3.2.1. letters: [ascii, unicode]
3.3. key words
3.3.1. break; case; catch; continue; default; delete; do; else; finally; for; function; if; in; instanceof; new; return; switch; this; throw; try; typeof; var; void; while; with
3.4. Reserved words
3.4.1. Nonstrict
3.4.1.1. class; const; enum; export; extends; import; super;
3.4.2. 'use strict'
3.4.2.1. implements; interface; let; package; private; protected; public; static; yield;
3.5. Variables
3.5.1. var a; // local
3.5.2. a = 123; // global
4. comments
4.1. // single line
4.2. /* multi-line comments */
5. Data type
5.1. Number [Primitive like]
5.1.1. typeof
5.1.1.1. 'number'
5.1.2. value
5.1.2.1. 0
5.1.2.2. 1.2
5.1.2.3. 045
5.1.2.4. 0x56
5.1.2.5. 0.314e2
5.1.2.6. NaN
5.1.3. Number()
5.1.3.1. parseInt("2.7", 10); // 2
5.1.3.1.1. parseInt('10', 2); // 2
5.1.3.2. parseFloat('2.5'); // 2.5
5.1.3.3. isNaN(parseFloat('a')); // true
5.1.4. +-*/%
5.1.5. <, <=, >, >=, !=, ==
5.2. String [Primitive like]
5.2.1. typeof
5.2.1.1. 'string'
5.2.2. value
5.2.2.1. "Hello"
5.2.2.2. 'World'
5.2.3. String()/toString()
5.2.3.1. var a = 8; a.toString(2); // '1000'
5.2.4. immutable
5.2.4.1. var a = 'ABC'; a[0]; // 'A' a[0] = 'D'; a; // 'ABC'
5.2.4.2. var a = 'abc'; a = a + 'd'; a; // 'abcd'
5.2.5. +
5.2.6. <, <=, >, >=, !=, ==
5.3. Boolean [Primitive like]
5.3.1. typeof
5.3.1.1. 'boolean'
5.3.2. value
5.3.2.1. true
5.3.2.2. false
5.3.3. Boolean()
5.3.3.1. number
5.3.3.1.1. Boolean(0); // false
5.3.3.1.2. Boolean(NaN); // false
5.3.3.1.3. Boolean(!0); // true
5.3.3.2. string
5.3.3.2.1. Boolean(''); // false
5.3.3.2.2. Boolean('*'); // true
5.3.3.3. object
5.3.3.3.1. Boolean(null); // false
5.3.3.3.2. Boolean({}); // true
5.3.3.4. undefined
5.3.3.4.1. Boolean(undefined);// false
5.4. Undefined [Primitive like]
5.4.1. typeof
5.4.1.1. 'undefined'
5.4.2. value
5.4.2.1. undefined
5.4.3. undefined != Not defined
5.4.3.1. undefined == undefined; // true var a; a == undefined; // true console.log(d); // Error
5.5. Object (basic)
5.5.1. typeof
5.5.1.1. 'object'
5.5.2. {}
5.5.2.1. var p = { name: 'Ad', 'age': 24 };
5.5.2.2. var q = {}; q.name = 'Bob'; q.age = 24; console.log(q.name); // 'Bob' console.log(q['age']); // 24
5.5.3. new Object()
5.5.3.1. var p = new Object(); p.sayHi = function(){ console.log('Hi!'); } p.sayHi(); // 'Hi!'
5.5.4. Null //[Primitive like]
5.5.4.1. typeof
5.5.4.1.1. 'object'
5.5.4.2. value
5.5.4.2.1. null
5.5.4.3. "undefined object"
5.5.4.3.1. null == undefined; // true
5.6. Function (basic)
5.6.1. typeof
5.6.1.1. 'function'
5.6.2. create
5.6.2.1. var a = function(arg1, arg2){ //func body; }
5.6.2.2. function a(arg1, arg2){ //func body; }
5.6.2.3. (function(arg1,arg2){ //func body; })
5.6.3. inside function
5.6.3.1. arguments
5.6.3.1.1. // by order
5.6.3.1.2. undefined
5.6.3.1.3. arguments
5.6.3.2. return
6. Operators
6.1. +-*/%
6.1.1. casting
6.1.1.1. +
6.1.1.1.1. string > number > boolean
6.1.1.2. -
6.1.1.2.1. number > string > boolean
6.2. ++a a-- a+=1 a-=1
6.3. compare
6.3.1. >, >=, <, <=
6.3.2. ==, !=
6.3.2.1. // only value
6.3.3. ===, !==
6.3.3.1. // both value & type
6.3.4. casting
6.3.4.1. a > b; // a - b > 0
6.4. ! && ||
6.4.1. !true; // false
6.4.2. true && false; // false
6.4.3. false || true; // true
7. Reference type
7.1. Function
7.1.1. typeof
7.1.1.1. 'function'
7.1.2. properties
7.1.2.1. f.length;
7.1.3. as value (callback)
7.1.3.1. var api = function(){ return { name: 'rainy', age: 24 }; }; var handler = function(d){ console.log('Name: '+d.name+', Age: '+d.age); }; var request = function(api, callback){ callback(api()); }; request(api, handler); // Name: rainy, Age: 24
7.1.4. methods
7.1.4.1. apply/call/bind
7.1.4.1.1. // func.apply(thisObj, [arg1, arg2, ...]); // func.call(thisObj, arg1, arg2, ...); // func.bind(thisObj, arg1, arg2, ...); // about thisObj, see `Scope`
7.1.4.1.2. var sayHi = function(name){ console.log('Hello, ' + name + '!'); }; sayHi.call(this, 'rainy'); // Hello, rainy! sayHi.apply(this, ['rainy']); // Hello, rainy! sayHi.bind(this, 'rainy')(); // Hello, rainy!
7.2. Array
7.2.1. typeof
7.2.1.1. 'object'
7.2.2. var a = [1, 2, '3', [4, true]];
7.2.3. var a = new Array(1, 2, '3', [4, true]);
7.2.4. properties
7.2.4.1. a.length; // 4
7.2.5. methods
7.2.5.1. a[0] == 1; // true
7.2.5.2. a[3][1] == true; // true
7.2.5.3. a.slice(0, 2); // [1, 2]
7.2.5.4. a.indexOf(1); // 0
7.2.5.5. a.push({}); // return a.length(Mod)
7.2.5.6. a.pop(); // return popped element(Mod)
7.2.5.7. a.join('-'); // ?
7.2.5.7.1. a.toString() == a.join(',');
7.2.5.7.2. var s = 'a,b,c,d'; s.split(','); // ['a', 'b', 'c', 'd']
7.2.5.8. a.concat(['a', 'b']); // VS push()
7.2.5.9. map/reduce
7.2.5.9.1. // arr.map(callback, thisObj) /* callback = function(element, index, arr){ * return element to the same pos of (returned)arr; * }; */ [55, 44, 33, 22, 11].map(function(e, i, arr){ return e/(arr.length-i); }); // [ 11, 11, 11, 11, 11 ];
7.2.5.9.2. // arr.reduce(callback, init); /* callback = function(prev, curr, index, arr){ * curr walk through * arr.slice(init != undefined ? 0 : 1, arr.length); * prev cache last returned value start with: * (init != undefined ? init : arr[0]); * }; */ [55, 44, 33, 22, 11].reduce(function(p, c, i, arr){ return p + c/(arr. length-i); }, 55); // 0;
7.2.5.10. filter/some/every
7.2.5.11. shift/unshift/sort/reverse/splice
7.2.5.11.1. // will change the array
7.2.6. iteration
7.2.6.1. for(var i = 0; i < a.length; i++){ console.log(a[i]); }
7.2.6.2. a.forEach(function(ele){ console.log(ele); });
7.3. Object (OOP)
7.3.1. root of everything.
7.3.2. Constructor
7.3.2.1. function Person(name){ this.name = name; this.sayHi= function(){ console.log('Hi ' + this.name + '!'); }; }; var p1 = new Person('Ad'); var p2 = new Person('Bob'); p1.name // 'Ad' p2.sayHi(); // 'Hi Bob!' p1.constructor === Person // true p1 instanceof Person // true p1.sayHi == p2.sayHi // false
7.3.3. prototype chain
7.3.3.1. function Person(){}; Person.prototype.name = 'Person'; var p1 = new Person(); var p2 = new Person(); p2.name = 'rainy'; console.log(p1.name); // 'Person' console.log(p2.name); // 'rainy'
7.3.3.1.1. Person
7.3.3.1.2. p1 = new Person();
7.3.3.1.3. p2 = new Person();
7.3.3.2. p1 instanceof Person // true p1.age = 24; p1.hasOwnProperty('name'); // false Person.hasOwnProperty('name'); // true p1.hasOwnProperty('age'); // true 'name' in p1 // true 'age' in Person // false
7.3.3.3. // All properties on the prototype are shared among instances Person.prototype.friends = ['Ad', 'Bob']; p1.friends.pop(); // 'Bob' console.log(p2.friends); // ['Ad'] // Combine constructor & prototype function Person(){ this.friends = ['Ad', 'Bob']; }; Person.prototype.name = 'Person';
7.3.4. Inheritance
7.3.4.1. prototype chain
7.3.4.1.1. function Father(){}; Father.prototype.familyName = 'Good'; function Child(){}; Child.prototype = new Father(); var c = new Child(); console.log(c.familyName); // 'Good'
7.3.4.2. constructor
7.3.4.2.1. function Father(){ this.familyName = 'Good'; }; function Child(){ Father.call(this); }; var c = new Child(); console.log(c.familyName); // 'Good'
8. Flow control
8.1. if
8.1.1. if(cond){ state1; }else if(cond2){ state2; }else{ state3; }
8.1.2. false ? a : b
8.2. switch
8.2.1. switch (day) { case MON: break; case TUE: break; case WEN: break; default: }
8.3. while
8.3.1. do { state1; } while(cond)
8.3.2. while(cond){ state1; }
8.3.3. break; continue
8.4. for
8.4.1. for(var i = 0; i < len; i++){ state1; }
8.4.2. for(var k in Obj){ // if Obj.hasOwnProperty(k){ console.log('Obj[' + k + '] = ' + Obj[k]); // } }
8.5. try/catch/finally
8.5.1. var a = {}; try{ a.f(); }catch(e){ console.log(e instanceof TypeError); // true (function(){ console.log('a.f()'); // 'a.f()' })(); }finally{ console.log('always'); // 'always' }