CTN 01. Closure và con trỏ this

Hello! I'm Zu.Doan

Series này mình muốn rèn luyện khả năng suy nghĩ và giải bài tập, qua đó để hiểu rõ hơn các khái niệm của Javascript. Mình tham khảo các bài tập từ link này.

Bài 01. Xác định kết quả trả về của đoạn code dưới đây

function a(x) {
  x++;
  return function () {
    console.log(++x);
  };
}

a(1)();
a(1)();
a(1)();

let x = a(1);
x();
x();
x();

Lời giải:

function a(x) {
  x++; // sẽ tăng giá trị x lên 1
  return function () { // trả về hàm
    console.log(++x); // sẽ tăng giá trị x lên 1
  };
}

a(1)(); // khi thực hiện gọi hàm này ta sẽ hiểu tương ứng như sau:
// - hàm a(1) được gọi có nghĩa là hàm này sẽ tạo ra một phạm vi của riêng nó, sau đó tăng giá trị tham số đầu vào lên 1 (tương đương lúc này x = 2)
// - sau đó nó return về 1 hàm vô danh và hàm vô danh này sẽ console.log(++x) tương đương lúc này x = 3
// - vậy khi gọi hàm a(1)() thì sẽ cho ra kết quả là 3

a(1)(); // tương tự như trên => kết quả = 3
a(1)(); // tương tự như trên => kết quả = 3

let x = a(1); // Khai báo biến tên là x (global) và gán giá trị bằng a(1)
// - tức là biến x này sẽ là một hàm có nội dung tương ứng hàm vô danh mà function a return về.
// - có 1 điểm quan trọng ở đây khác với 3 đoạn gọi hàm a(1)() ở trên là nó chỉ tạo ra đúng 1 phạm vi thực thi của hàm a(1) 

x(); // Khi thực thi câu lệnh này, chúng ta sẽ nhận được kết quả = 3 tương tự như giải thích của a(1)()

x(); // Khi thực thi lệnh này, chúng ta sẽ nhận được kết quả = 4, bởi vì nó sẽ thực thi cùng phạm vi hàm a(1) như của lệnh x() trên
// - do đó giá trị của x trước khi thực thi lệnh này là 3 thì sẽ được tăng thêm 1 để trở thành 4.

x(); // tương tự như trên (kết quả = 5)

Kiến thức liên quan:

• Sự khác biệt của 2 biểu thức x++ và ++x
• Closure: thể hiện khả năng ghi nhớ phạm vi (hàm, biến) cha của hàm con ngay cả khi hàm cha đã được gọi xong.

Bài 2

• Lưu ý: Môi trường thực thi là trình duyệt (window). Nếu muốn thực thi trong NodeJs thì chúng ta thay thế biến window bằng global

function Name(a, b) {
  this.a = a;
  this.b = b;
}

const me = Name("Vuong", "Nguyen");

console.log(!(a.length - window.a.length));

Lời giải

function Name(a, b) {
  this.a = a;
  this.b = b;
}

const me = Name("Vuong", "Nguyen");

console.log(!(a.length - window.a.length));
// - Khi ta khai báo function Name(a, b) {}
// - Trong function Name ta gọi this.a = a
// - Do function Name nằm ở phạm vi global do đó this sẽ tham chiếu đến đối tượng window (môi trường thực thi là trình duyệt)
// => biến a cũng chính là window.a => a.length == window.a.length
// => !(a.length - window.a.length) == !0 => true

Kiến thức liên quan:

• Con trỏ this
  • Con trỏ this luôn trỏ tới đối tượng mà nó thuộc về.
  • vd: this nằm trong hàm (phương thức) của một đối tượng thì this sẽ trỏ tới đối tượng đó.
  • vd: this đứng ngoài phương thức thì nó sẽ trỏ tới đối tượng global (ở trình duyệt thì đối tượng global là window)