JavaScript Design Pattern - Constructor Pattern

Đối với lập trình hướng đối tượng trong JavaScript, cách đơn giản nhất để tạo mới một object là sử dụng function kết hợp với từ khoá new. Bên trong hàm khởi tạo này, từ khoá this dùng để chỉ tới đối tượng mới. Thông thường, hàm khởi tạo được viết hoa chữ cái đầu tiên, dùng để phân biệt với các hàm số thông thường.

Constructor cơ bản

function Animal(name, leg) {
  this.name = name;
  this.leg = leg;
  this.about = function () {
    return this.name + " has " + this.leg + " legs";
  };
}

// Usage:
var dog = new Animal("Dog", 4);
var bird = new Animal("Bird", 2);
console.log(dog.about()); // => Dog has 4 legs
console.log(bird.about());// => Bird has 2 legs

Trong ví dụ trên, đối tượng sử dụng hàm khởi tạo Animal sẽ có 2 thuộc tính (name, leg) và 1 phương thức (about). Tuy nhiên, cách trên có nhược điểm là khó để kế thừa và phương thức about sẽ phải định nghĩa lại đối với mỗi đối tượng. Để khắc phục nhược điểm trên, ta có cách thứ hai là sử dụng Prototypes.

Constructor với Prototypes

Trong JavaScript, mọi object (bao gồm function) đều tồn tại thuộc tính prototype - cũng là một object. Khi sử dụng hàm khởi tạo để tạo mới một object, mọi thuộc tính trong prototype đều được kế thừa cho các đối tượng mới.

function Animal(name, leg) {
  this.name = name;
  this.leg = leg;
}
Animal.prototype.about = function() {
  return this.name + " has " + this.leg + " legs";
}

// Usage:
var dog = new Animal("Dog", 4);
var bird = new Animal("Bird", 2);
console.log(dog.about()); // => Dog has 4 legs
console.log(bird.about());// => Bird has 2 legs

Constructor với từ khoá class

Từ khoá class thực chất là một hàm số đặc biệt. Sử dụng class cho phép khởi tạo đối tượng mới một cách trực quan, và gần với khái niệm class trong các ngôn ngữ lập trình khác như C++, Java,...

Một điểm khác giữa classfunctionfunction thuộc dạng hoisting, còn class thì không. Nghĩa là bạn có thể sử dụng hàm số trước khi khai báo hàm. Trong khi nếu bạn sử dụng class trước khi khai báo class thì bạn sẽ nhận được thông báo lỗi ReferenceError.

class Animal {
  constructor(name, leg) {
    this.name = name;
    this.leg = leg;
  }

  about() {
    return this.name + " has " + this.leg + " legs";
  };
}

// Usage:
var dog = new Animal("Dog", 4);
var bird = new Animal("Bird", 2);
console.log(dog.about()); // => Dog has 4 legs
console.log(bird.about());// => Bird has 2 legs

Trong class, có một hàm duy nhất và đặc biệt là constructor, đây là hàm khởi tạo của class. Trong hàm này bạn có thể định nghĩa các thuộc tính (name, leg) giống như sử dụng function và phương thức (about). Ngoài ra, bạn có thể định nghĩa các getter, setter và các hàm static.

Tham khảo


Theo dõi Lam Pham trên Kipalog để nhận thông báo khi có bài viết mới nhất:

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Lam Pham

24 bài viết.
43 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
28 11
Trước khi vào nội dung bài viết. Tôi xin đính chính giúp anh trả lời những câu hỏi chỉ là tựa đề của một bài hát tôi không có ý xưng hô là anh. Bài...
Lam Pham viết 10 tháng trước
28 11
White
14 6
Có thể bạn thừa biết, JavaScript là một ngôn ngữ chạy (Link). Điều đó có nghĩa là nếu bạn thực hiện một tác vụ quá lớn trên giao diện chính thì khả...
Lam Pham viết 10 tháng trước
14 6
White
14 3
Xin chào bạn Có thể bạn đã biết, JavaScript là một ngôn ngữ lập trình rất mạnh, nhưng lại vô cùng rắc rối, phức tạp. Để có thể nắm vững được Java...
Lam Pham viết 6 tháng trước
14 3
Bài viết liên quan
White
0 2
fCC: Technical Documentation Page note So I have finished the HTML part of this exercise and I want to come here to lament about the lengthy HTML ...
HungHayHo viết 5 tháng trước
0 2
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
24 bài viết.
43 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!