Javascript Under The Hood ~ The Mysterious Parts ~

Javascript ngày nay đã trở thành một trong những ngôn ngữ lập trình phổ biến nhất thế giới, tuy nhiên có một điểm lạ là nó cũng chính là một trong những ngôn ngữ "khó hiểu", hay "dễ bị hiểu nhầm" nhất. :v

Series Javascript Under The Hood sẽ đưa đến cho các bạn cái nhìn tổng thế về bản chất, những khái niệm cơ bản của Javascript, từ đó hy vọng có thể giúp bạn có thể sử dụng nó một cách hiệu quả hơn, và tránh được những sai lầm không đáng có.

Phần 1: The Mysterious Parts

Nội dung: first-class functions, function statement, function expression, IIFE, hoisting, lexical scope, nested scope, function scope, block scope, closure, this keyword binding ...

Phần 2: Object Oriented Javascript

Nội dung: new keyword, function constructor, prototype, object-oriented programming with Javascript ...

Code examples:

• http://jsbin.com/tojavun/edit?html,js,console,output

// What are the output values
var a = 1;
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);
console.log(f);
console.log(g);
console.log(h);
var b = 2;
var d = e = 3;
function f() {};
var g = function() {};
h = 4;

function foo() {
    var bar = 5;
    baz = 6;
    console.log(qux);
    var qux = 8;
}
var qux = 7;
foo();
console.log(bar);
console.log(foo.bar);
console.log(baz);
console.log(foo.baz);

• http://jsbin.com/wabedaf/3/edit?html,js,output

// Example 1: What will be alerted when we click at the buttons
for (var i = 0; i < 5; i++) {
  var btn = document.createElement('button');
  btn.appendChild(document.createTextNode('Button ' + i));
  btn.addEventListener('click', function() {
    alert(i);
  });
  document.body.appendChild(btn);
}

// Example 2: What will be outputed to the console
for (var j = 0; j < 5; j++) {
  setTimeout (function() {
    console.log(j);
  }, 0);
}

Other Javascript's posts:

• Variables Comparison in Javascript
• Tìm hiểu về Strict Mode trong Javascript