🔥CHỌN LỌC TOP NHỮNG KHOÁ HỌC LẬP TRÌNH ONLINE NHIỀU NGƯỜI THEO HOC TẠI ĐÂY🔥

Chào các bạn, hôm nay cafedev chia sẻ cho ace một danh sách các bài tập từ cơ bản tới nâng cao liên quan tới các kiến thức cơ bản trong lập trình Javascript. Cụ thể, trong bài này chúng ta sẽ làm quen với Class. Từ đó giúp ace nâng cao kiến thức, kỹ năng, kinh nghiệm lập trình của mình và áp dụng nó vào thực tế.

Trước khi đi vào chi tiết bài tập, cafedev khuyến khích ace tự code bài tập của mình trước khi tham khảo bài hướng dẫn nhé.

Để chạy hoặc code các bài tập sau, ace có thể code trên trang web này như sau:

  • Chọn new
  • Chọn dự án bạn muốn code, ở đây có nhiều lựa chọn như Javascript, AngularJS, React,…. Tất nhiên mình sẽ chọn Javascript.
  • Sau đó bạn sẽ thấy nơi bạn code.
  • Sau khi code sau chọn Preview để xem kết quả.

Ngoài ra ace cũng có thể dùng các IDE đã được giới thiệu tại đây để code và chạy code đó trên máy tính của mình nhé.

Lưu ý: Mọi bài tập bên dưới cũng như các bài tập khác trong Series Javascript này được tạo ra từ các bài học và kiến thức của từng phần trong series tự học Javascript này. Nếu ace nào chưa làm được hoặc chưa hiểu kỹ về bài học thì bạn có thể tham khảo lại series tự học này nhé. Chúc các bạn thành công.

Bài 1

Lớp Clock được viết theo phong cách hàm. Viết lại nó theo cú pháp “class”.

Bài 2

Đây là code với Rabbit mở rộng Animal.

Rất tiếc, không thể tạo đối tượng Rabbit. Chuyện gì vậy? Sửa nó

class Animal {

  constructor(name) {
    this.name = name;
  }

}

class Rabbit extends Animal {
  constructor(name) {
    this.name = name;
    this.created = Date.now();
  }
}

let rabbit = new Rabbit("White Rabbit"); // Error: this is not defined
alert(rabbit.name);

Bài 3

Chúng ta đã có một lớp Clock về Đồng hồ. Hiện tại, nó in thời gian mỗi giây.

class Clock {
  constructor({ template }) {
    this.template = template;
  }

  render() {
    let date = new Date();

    let hours = date.getHours();
    if (hours < 10) hours = '0' + hours;

    let mins = date.getMinutes();
    if (mins < 10) mins = '0' + mins;

    let secs = date.getSeconds();
    if (secs < 10) secs = '0' + secs;

    let output = this.template
      .replace('h', hours)
      .replace('m', mins)
      .replace('s', secs);

    console.log(output);
  }

  stop() {
    clearInterval(this.timer);
  }

  start() {
    this.render();
    this.timer = setInterval(() => this.render(), 1000);
  }
}

Tạo một lớp ExtendedClock mới kế thừa từ Clock và thêm độ chính xác của tham số – số mili giây giữa các “ticks”. Theo mặc định phải là 1000 (1 giây).

  • Code của bạn phải nằm trong tệp Extended-clock.js
  • Không sửa đổi clock.js gốc. Mở rộng nó.

Hướng dẫn cách xem và tải tài liệu từ trang cafedev tại đây.


Giải bài 1,2,3

Bài 4

Như chúng ta đã biết, tất cả các đối tượng thường kế thừa từ Object.prototype và có quyền truy cập vào các phương thức đối tượng “generic” như hasOwnProperty, v.v.

Ví dụ:

class Rabbit {
  constructor(name) {
    this.name = name;
  }
}

let rabbit = new Rabbit("Rab");

// hasOwnProperty method is from Object.prototype
alert( rabbit.hasOwnProperty('name') ); // true

Nhưng nếu chúng ta đánh vần nó một cách rõ ràng như “class Rabbit extends Object“, thì kết quả sẽ khác với một class Rabbit” đơn giản?

Có gì khác biệt?

Dưới đây là một ví dụ về code như vậy (nó không hoạt động – tại sao? Sửa nó?):

class Rabbit extends Object {
  constructor(name) {
    this.name = name;
  }
}

let rabbit = new Rabbit("Rab");

alert( rabbit.hasOwnProperty('name') ); // Error

Bài 5

Trong đoạn mã dưới đây, tại sao instanceof trả về true? Ta có thể dễ dàng thấy rằng a không được tạo bởi B().

function A() {}
function B() {}

A.prototype = B.prototype = {};

let a = new A();

alert( a instanceof B ); // true

Giải bài 4,5

Nguồn và Tài liệu tiếng anh tham khảo:

Tài liệu từ cafedev:

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!

BÀI VIẾT LIÊN QUANXEM THÊM