Minh Quy Blog

var a = {
  i: 0,
  valueOf: function() {
    return this.i++;
  }
};

(function(global) {
  var value = 0;
  Object.defineProperty(global, 'a', {
    get: function() {
      return value++;
    }
  });
})(window)

• a in Method 1 is Object's type instead of Integer's type of Method 2. It leads above expression is only equal in term of value.
• a in Method 2 can not be changed or listed differ to in Method 1.
• There's no way to modify value of a in Method 2.

• Numberic toString: happens when a string representation of an object is required.
• String valueOf: performs two cases
  • In function which need a number, for example Math.sin(obj), isNaN(obj) or +obj.
  • In comparison like == but not for ===
• Boolean.

• EMACScript is an object-oriented programming language for performing computations and manipulating objects within a host environment.
• Javascript is one of well-known EMACScript's dialect.

• Mozilla Firefox: SpiderMonkey
• Chrome: V8
• Safari: Nitro
• Internet Explorer: Chakra

• declare variable
• access not existing property of object

var declared = 1 // explicit
undeclared = 1

• You may only have one inline event assigned.
• The context this in case of inline event is global compare to HTML element in case of addEventListener.

• Events always bubble, no capturing possibility.
• this always refers to the windows.

• Number vs String: try to convert string numeric literal to Number
• one of the operands is Boolean, the Boolean operand is converted to 1 or 0
• Object vs Number / String: Object operand is converted to primitive value(if, and only if its comparand is a primitive), a String or a Number, using the valueOf and toString methods

• Scope inheritance in case 2:
  • if scope chain from execution context doen't declare(both explicit and implicit) variable x, x will declare and initialize on global with configurable = true.
  • Otherwise x will reuse that declaration(in parent scope) and set value with 1.
• In case 1:
  • var x will be declare in execution context with option configurable = false and also be hoisted.

• Creation Stage: create the scope chain, create variable object and determine the value of this. Create variable object will lead:
  • Create arguments object, check the context for parameters, initialize the name and value and create a reference copy.
  • Scan the context for function declarations:
    • For each function found, create a property in variable object which has a reference pointer to the function in memory.
    • If function name exists, the reference pointer value will be overwritten.
  • Scan the context for variable declarations:
    • For each one found, create a property in variable object and initialize the value as undefined.
    • If variable name already exists in the variable object, do nothing and continue scanning.
• Activation / Code Execution Stage: Assign values, references to functions and execute code.

executionContextObj = {
    scopeChain: { /* variableObject + all parent execution context's variableObject */ },
    variableObject: { /* function arguments / parameters, inner variable and function declarations */ },
    this: {}
}

• Pseudo-classical pattern, assigning prototype to prototype.
• Function pattern, declaring attribute in side object and inherit through call it again.
• Prototypal pattern, using Object.create.

• Memory footprint which used by event listeners goes down.
• Also work for new element which is created dynamically.

• Most of event do bubble but not all of them.
• Delegation puts extra load on the browser because the handler runs when an event happens anywhere inside the container

• Promises: describe an object that acts as a proxy for a result that is normally not finished.
• Callback: is simply a function you pass into another function so that function can call it at a later time.

A promise is defined as an object that has a function as the value for the property then:

then(fulfilledHandler, errorHandler, progressHandler)

Adds a fulfilledHandler, errorHandler, and progressHandler to be called for completion of a promise. The fulfilledHandler is called when the promise is fulfilled. The errorHandler is called when a promise fails. The progressHandler is called for progress events. All arguments are optional and non-function values are ignored. The progressHandler is not only an optional argument, but progress events are purely optional. Promise implementors are not required to ever call a progressHandler (the progressHandler may be ignored), this parameter exists so that implementors may call it if they have progress events to report.
This function should return a new promise that is fulfilled when the given fulfilledHandler or errorHandler callback is finished. This allows promise operations to be chained together. The value returned from the callback handler is the fulfillment value for the returned promise. If the callback throws an error, the returned promise will be moved to failed state.

• Should dynamic load javascript and css to prevent blocking render in DOM.
• Minimize the number of http requests to server as little as possible
  • Combine multiple style sheets into one.
  • Use css instead of images whenever possible.
  • Reduce scripts and put them at the bottom of the page.
  • Use image sprite.
• Reduce server response time(less then 200ms).
• Enable compression.
• Enable browser caching.
• Minify resources(html, css, javascript).
• Reduce the number of plugins you use on your site.
• Reduce redirects.
• Use a Content Delivery Network.

• Yslow
• Page Speed
• Pingdom

• security.
• to avoid what they consider to error-prone features.
• to get enhanced in error checking(means it will throw exceptions in situations that are not specified as errors in non-strict mode).
• other reasons of their choosing.

FunctionDeclaration :
function Identifier ( FormalParameterListopt ) { FunctionBody }
FunctionExpression :
function Identifieropt ( FormalParameterListopt ) { FunctionBody }

1. a function defined with the Function constructor assigned to the variable multiply

  var multiply = new Function("x", "y", "return x * y;");

1. a function declaration of a function named multiply

  function multiply(x, y) {
      return x + y;
  }

1. a function expression of an anonymous function assigned to the variable multiply

  var multiply = function(x, y) {
      return x + y;
  }

1. a function expression of a function named func_name assigned to the variable multiply

  var multiply = function func_name(x, y) {
      return x + y
  }

• A function defined by a Function constructor does not inherit any scope other than the global scope
• Functions defined by function expressions and declarations are parsed only once while those defined by the Function constructor are not.

• bind: create function with new context by passing parameters.
• call and apply: call function with new context. They are different each other through the way they pass parameters to function

• It creates new object.
• It sets the constructor to object XXX.
• It sets up object to delegate to XXX.prototype.
• It call XXX() in the context of new object.

String.prototype.returnMe= function() {
  return this;
}

var a = "abc";
var b = a.returnMe();

a; //"abc"
typeof a; //"string" (still a primitive)
b; //"abc"
typeof b; //"object"
a === b; // false

var primitive = "september";
primitive.vowels = 3;
//new object created to set property
(new String("september")).vowels = 3;

primitive.vowels;
//another new object created to retrieve property
(new String("september")).vowels; //undefined

• typeof: return built-in type, it has some issues in cases of null return object, any object type other function return object. Normally, people will define their own function instead of typeof using Object.prototype.toString.call() to get internal [[Class]].

  var toType = function(obj) {
      return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
  }

• instanceOf: check whether anything from left-hand object's prototype chain is the same object as what's reference by prototype property of right-hand object. The problem arise when it comes to scripting in multi-frame DOM environments instanceOf harmful

• Ajax
• Tag: Iframe, Embed, Object, Video, Audio, Image.
• Script tag injection
• Websocket

• Lexical scoping: is statically defined by the function's physical placement within the written source code.

  function outter() {
      var x = 1;
      function inner() {
        console.log(1)
      }
  }

• Dynamic scoping:

  void dynamic() {
      console.log(x)
  }

  void main() {
      var x = 1;
      dynamic();
  }