javascript

keywords

closure

  1. hide sth/ enable private method

  2. use lexicalEnv as memoizer

“use strict”

- “prototype”

  • obj._proto__ function.prototype/function._proto__
    • Object.create(proto, propertiesObject)

  1. obj = new Function;

    • obj._proto__ = Function.prototype
    • obj.constructor = Function = Function.prototype.constructor

- constructor

  • obj.constructor | Object.prototype.constructor alert( rabbit.hasOwnProperty(‘constructor’) ) / false alert( Rabbit.prototype.hasOwnProperty(‘constructor’) ) / true

- LexicalEnvironment | closure | block

- ECMAScript ES3/ES5/ES6

- typeof | instanceof | null | undefined

- compare

  1. stric equal =
  2. abstract equal ==
  3. Object.is(val1,val2)

- this

  1. called as obj.method
  2. called as function
    • Window/Global/undefined (“use strict”)
  3. called in new
  4. explicit this func.call(context, args…) func.apply(context, [arg]|args…) func.bind(context, args…)()

Built-in obj

  • Function
    1. arguments arguments.callee
    2. static fields: arguments.callee.count

DOM document object model

BOM browser object model

  • alert/confirm/prompt
  • url
  • frame
  • XMLHttpRequest

FOP

Arrow Functions => (ES6 only, non IE support!)

  1. definition

    An arrow function expression has a shorter syntax than a function expression and does not bind its own this, arguments, super, or new.target. These function expressions are best suited for non-method functions, and they cannot be used as constructors.

    (param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
// equivalent to: (param1, param2, …, paramN) => { return expression; }
    
// Parentheses are optional when there's only one parameter:
(singleParam) => { statements }
singleParam => { statements }
    
// A function with no parameters requires parentheses:
() => { statements }
() => expression // equivalent to: () => { return expression; }
    
// Parenthesize the body to return an object literal expression:
params => ({foo: bar})
    
// Rest parameters and default parameters are supported
(param1, param2, ...rest) => { statements }
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements }
    
// Destructuring within the parameter list is also supported
var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();  // 6

  2. not bind its own this, arguments, super, or new.target; not as constructor

    'use strict';
var obj = {
  i: 10,
  b: () => console.log(this.i, this),
  c: function() {
    console.log(this.i, this);
  }
}
obj.b(); // prints undefined, undefined
obj.c(); // prints 10, Object {...}

forEach/for in/for of

var s = 'a𝓌a';
for(var c of s) console.log(c);

for(var c in s) console.log(s[c]);
Array.prototype.forEach.call(s, c => console.log(c));

every/some

reverse/sort

map/reduce/filter

var materials = ['Hydrogen', 'Helium', 'Lithium', 'Beryllium'];
var result = materials.map(material => material.length).filter(n=>n>7).reduce((a,b)=>a+b);

  1. reduce

    [0, 1, 2, 3, 4].reduce( (accumulator, currentValue, currentIndex, array) => accumulator + currentValue,

    100 );

generator/yield/*yield

Promise

OOP patterns

pseudo-class

function Hamster() { 
  this.food = []
}
Hamster.prototype = {
  found: function(something) {
    this.food.push(something)
  }
}

speedy = new Hamster()
lazy = new Hamster()

speedy.found("apple")
speedy.found("orange")

alert(speedy.food.length) // 2
alert(lazy.food.length) // 0(!)

Event

Asynchronous Event Queue

Synchronous Event

other source code

// 1. Function declarations are initialized before the code is executed.
// window = { f: function }

// 2. Variables are added as window properties.
// window = { f: function, a: undefined, g: undefined }

var a = 5   // <-- var

function f(arg) { alert('f:'+arg) }

var g = function(arg) { alert('g:'+arg) } // <-- var

//read vs set
function f() {
  x = 5 // writing x puts it into outmost LexicalEnvironment
  console.log(typeof y); //undefined
  console.log(abc); //error
}

Ref

CSS

CSS3

SASS

Sass is an extension of CSS3 which adds nested rules, variables, mixins, selector inheritance, and more. Sass generates well formatted CSS and makes your stylesheets easier to organize and maintain.

Compass

Compass is an open-source CSS authoring framework which uses the Sass stylesheet language to make writing stylesheets powerful and easy.