- Object quy định các phần tử theo cặp key-value

- Key giống như tên biến

- Value có thể thuộc bất kỳ kiểu dữ liệu nào, có thể gán value là một biểu thức. Mỗi cặp key-value trong object được gọi là thuộc tính của object

Sự khác biệt giữa array và object

- Trong object lấy ra các giá trị dựa vào tên thuộc tính mà không cần quan tâm đến thứ tự của chúng, object sử dụng cho các dữ liệu phi cấu trúc

- Trong array thứ tự vô cùng quan trọng vì đó là cách truy cập vào phần tử, array sử dụng cho dữ liệu có thứ tự

2 cách lấy giá trị của thuộc tính: dấu chấm và ngoặc vuông

Ví dụ:

Sử dụng dấu chấm: jonas.lastName

Sử dụng dấu ngoặc vuông: jonas['lastName']

Sự khác biệt giữa 2 cách lấy

- Khi sử dụng ngoặc vuông ta có thể đặt bất kỳ biểu thức nào bên trong nó, linh hoạt trong một số trường hợp.

- Khi sử dụng dấu chấm ta phải biết chính xác tên thuộc tính.

Cú pháp this trong object

- Để truy cập vào giá trị của một thuộc tính ngay trong object thì sử dụng tử khóa this

- Từ khóa this hay biến this về cơ bản là object (đối tượng) hiện tại của phương thức được gọi

Tại sao lại cần this để trỏ vào object?

- Cần this trỏ vào object để lấy ra được những thuộc tính cần để tính toán mà không cần phải truyền biến từ bên ngoài vào

Phương thức call, apply, bind

call

- Phương thức call là phương thức có sẵn của 1 hàm.

- Đối số đầu tiên của phương thức call là đối tượng mà chúng ta muốn từ khóa this trỏ đến.

- Các đối số sau là các đối số muốn truyền vào hàm gốc.

- Chức năng chung của call và apply là xác định một tham số, xác định this và truyền các tham số còn lại vào.

apply

- Điểm khác nhau cơ bản giữa chúng là apply sẽ truyền 1 array các tham số còn call sẽ truyền lần lượt các tham số.

- Phương pháp apply không được sử dụng trong JS ngày nay vì call là cách tốt hơn để thay thế.

- Cả 2 cách đều là công cụ cho phép chúng ta xác định rõ ràng từ khóa this trong bất kỳ hàm nào

Bind

- Bind là một function nằm trong function prototype do đó chỉ có function mới có thể gọi dc nó. Chúng ta gọi Bind method dùng để xác định tham số “this” cho một function.

- Giống như call, bind cũng cho phép chúng ta đặt từ khóa this theo cách thủ công cho bất kì lệnh gọi hàm nào.

- Sự khác biệt là bind không gọi hàm ngay, nó trả về một hàm mới nơi mà từ khóa this bị ràng buộc. Nó được đặt thành bất kỳ giá trị nào mà chúng ta truyền vào bind.

    const user = {

      country: "Vietnam",

      showInfo: function(name, age){

        console.log(`${name} la nguoi ${this.country}, nam nay ${age} tuoi`);

      }

    }

    user.showInfo('Duong', 32);

    const user1 = user.showInfo;

    user1("Thao", 28); //this sẽ trỏ đến undefine

    user1.call(user, "Van", 30);

    user1.apply(user, ["Hanh", 33]);

    const user2 = user.showInfo.bind(user, "Tuyet");

    user2(26);

Event listener

- Từ khóa this trong hàm callback của event listener luôn trỏ vào đối tượng DOM gọi hàm đó.

- Để sử dụng được từ khóa this của hàm callback thì vì chúng ta cần truyền giá trị vào 1 hàm mà không gọi nó ngay, vậy nên ta cần sử dụng phương thức bind.

    document

      .getElementById("btn")

      .addEventListener('click', user.showInfo.bind(user, "Huong", 27));

    const sum = (number1, number2) => number1 + number2;

    console.log(sum(2,5));

    const sum2 = sum.bind(null, 8);

    console.log(sum2(9));

Closure

Closure là một hàm mà có thể truy cập biến thuộc scope chứa nó (hàm closure), ngay cả khi scope chứa nó đã được thực thi xong. Cụ thể, closure có thể truy cập biến mà được khai báo trong hàm mà tạo ra closure đó, ngay cả khi hàm tạo ra nó đã hoàn tất việc thực thi.

Closure được tạo ra khi một hàm được khai báo trong một hàm khác. Hàm bên trong có thể truy cập tất cả biến mà được khai báo ở hàm bên ngoài, ngay cả khi hàm bên ngoài đã hoàn thành việc thực thi.

Closure có 3 scope chain, đó là:

 - Có thể truy cập đến biến của chính nó (biến được định nghĩa trong dấu ngoặc nhọn của nó).

 - Có thể truy cập biến của hàm bên ngoài.

 - Có thể truy cập biến toàn cục (global).

Hàm bên trong không chỉ truy cập được đến biến của hàm bên ngoài và còn sử dụng được các tham số của hàm bên ngoài nữa. Chú ý là hàm bên trong này không thể gọi object arguments của hàm bên ngoài, mặc dù nó có thể sử dụng các tham số của hàm bên ngoài một cách bình thường.

 - Closures có thể truy cập biến của hàm bên ngoài ngay cả hàm bên ngoài đã trả về

- Closures lưu tham chiếu đến biến của hàm bên ngoài

- có thể gây ra bugs khi biến của hàm bên ngoài thay đổi với vòng lặp for

    const increment = function (){

      let count = 0;

      return function () {

        count++;

        console.log(count);

      }

    };

    const increCount = increment();

    increCount();

    increCount();

    //Closure là cơ chế js không bị mất kết nối quyền truy cập vào biến bên trong Object, vậy nên giá trị mới được bảo tồn đến lần gọi hàm tiếp theo