07/09/2018, 14:59

Định nghĩa các đối tượng trong JavaScript

Trong JavaScript, các đối tượng được ví như vua. Nếu bạn hiểu các đối tượng, bạn hiểu JavaScript. Hầu hết “mọi thứ” đều là một đối tượng. Booleans có thể là đối tượng (nếu được định nghĩa bằng từ khoá mới) Số có thể là đối tượng (nếu được định ...

Trong JavaScript, các đối tượng được ví như vua. Nếu bạn hiểu các đối tượng, bạn hiểu JavaScript. Hầu hết “mọi thứ” đều là một đối tượng.

  • Booleans có thể là đối tượng (nếu được định nghĩa bằng từ khoá mới)
  • Số có thể là đối tượng (nếu được định nghĩa bằng từ khoá mới)
  • Chuỗi có thể là đối tượng (nếu được định nghĩa bằng từ khoá mới)
  • Ngày luôn là đối tượng
  • Toán học luôn là đối tượng
  • Biểu thức chính quy luôn là đối tượng
  • Mảng luôn là đối tượng
  • Hàm luôn là đối tượng
  • Đối tượng luôn là đối tượng

Tất cả giá trị JavaScript, trừ các giá trị nguyên hàm đều là các đối tượng.

Các nguyên mẫu JavaScript

Giá trị nguyên hàm là giá trị không có thuộc tính hoặc phương thức. Một kiểu dữ liệu nguyên hàm là dữ liệu có giá trị nguyên hàm.

JavaScript định nghĩa 5 loại kiểu dữ liệu nguyên hàm:

  • string
  • number
  • boolean
  • null
  • undefined

Giá trị nguyên hàm là không thay đổi (chúng được mã hoá và do đó không thể thay đổi).

Nếu x = 3,14, bạn có thể thay đổi giá trị của x. Nhưng bạn không thể thay đổi giá trị 3,14.

Giá trị Kiểu Chú thích
“Hello” string “Hello” luôn là “Hello”
3.14 number 3.14 luôn là 3.14
TRUE boolean true luôn là true
FALSE boolean false luôn là false
null null (object) null luôn là null
undefined undefined undefined luôn là undefined

Đối tượng là biến chứa biến

Các biến JavaScript có thể chứa các giá trị đơn:

var person = “John Doe”;

Đối tượng cũng là các biến. Nhưng các đối tượng có thể chứa nhiều giá trị. Các giá trị được viết như tên: cặp giá trị (tên và giá trị được phân cách bởi dấu hai chấm).

var person = {firstName:”John”, lastName:”Doe”, age:50, eyeColor:”blue”};

Một đối tượng JavaScript là một bộ sưu tập các giá trị được đặt tên.

Thuộc tính đối tượng

Các giá trị được đặt tên, trong các đối tượng JavaScript, được gọi là thuộc tính.

Thuộc tính Giá trị
firstName John
lastName Doe
age 50
eyeColor blue

Các đối tượng được viết như các cặp giá trị tên tương tự như:

  • Mảng kết hợp trong PHP
  • Từ điển bằng Python
  • Bảng Hash trong C
  • Bản đồ Hash trong Java
  • Hashes trong Ruby và Perl

Phương thức đối tượng

Phương thức là các hành động có thể được thực hiện trên các đối tượng. Thuộc tính đối tượng có thể là cả giá trị nguyên hàm, các đối tượng và hàm khác.

Một phương thức đối tượng là một thuộc tính đối tượng có chứa một định nghĩa hàm.

firstName John
lastName Doe
age 50
eyeColor blue
fullName function() {return this.firstName + ” ” + this.lastName;}

Các đối tượng JavaScript là nơi chứa cho các giá trị được đặt tên, được gọi là thuộc tính và phương thức.

Tạo đối tượng JavaScript

Với JavaScript, bạn có thể định nghĩa và tạo các đối tượng của riêng mình. Có nhiều cách khác nhau để tạo các đối tượng mới:

  • Xác định và tạo ra một đối tượng đơn, sử dụng một đối tượng literal.
  • Xác định và tạo ra một đối tượng duy nhất, với từ khóa mới.
  • Xác định một đối tượng xây dựng, và sau đó tạo ra các đối tượng của các loại xây dựng.

Trong ECMAScript 5, một đối tượng cũng có thể được tạo ra với hàm Object.create().

Sử dụng một đối tượng Literal

Đây là cách dễ dàng nhất để tạo một đối tượng JavaScript. Sử dụng một đối tượng Literal, bạn vừa xác định và tạo ra một đối tượng trong một câu lệnh.

Một đối tượng literal là một danh sách tên: cặp giá trị (như tuổi: 50) bên trong dấu ngoặc nhọn {}. Ví dụ sau tạo một đối tượng JavaScript mới với bốn thuộc tính:

var person = {firstName:”John”, lastName:”Doe”, age:50, eyeColor:”blue”};

Khoảng trắng và ngắt dòng không quan trọng. Định nghĩa đối tượng có thể kéo dài nhiều dòng:

var person = {
firstName:”John”,
lastName:”Doe”,
age:50,
eyeColor:”blue”
};

Sử dụng từ khoá JavaScript mới

Ví dụ sau cũng tạo một đối tượng JavaScript mới với bốn thuộc tính:

var person = new Object();
person.firstName = “John”;
person.lastName = “Doe”;
person.age = 50;
person.eyeColor = “blue”;

Hai ví dụ trên làm chính xác như nhau. Không cần sử dụng Object() mới. Để đơn giản, dễ đọc và tốc độ thực hiện, hãy sử dụng phương pháp thứ nhất (phương pháp đối tượng literal).

Sử dụng hàm dựng một đối tượng

Các ví dụ trên được giới hạn trong nhiều tình huống. Họ chỉ tạo ra một đối tượng duy nhất. Đôi khi chúng ta muốn có một “loại đối tượng” có thể được sử dụng để tạo ra nhiều đối tượng của một loại.

Cách tiêu chuẩn để tạo ra một “loại đối tượng” là sử dụng một hàm dựng đối tượng:

function person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
var myFather = new person(“John”, “Doe”, 50, “blue”);
var myMother = new person(“Sally”, “Rally”, 48, “green”);

Hàm trên (người) là một hàm tạo đối tượng. Một khi bạn có một hàm tạo đối tượng, bạn có thể tạo các đối tượng mới cùng loại:

var myFather = new person(“John”, “Doe”, 50, “blue”);
var myMother = new person(“Sally”, “Rally”, 48, “green”);

Từ khóa this

Trong JavaScript, điều được gọi là this, là đối tượng “sở hữu” mã JavaScript. Giá trị của this, khi được sử dụng trong một hàm, là đối tượng “sở hữu” hàm. Giá trị của his, khi được sử dụng trong một đối tượng, chính là đối tượng.

Từ khoá này trong một hàm tạo đối tượng không có giá trị. Nó chỉ là một sự thay thế cho đối tượng mới. Giá trị của this sẽ trở thành đối tượng mới khi hàm khởi tạo được sử dụng để tạo ra một đối tượng.

Lưu ý rằng this không phải là một biến. Đó là một từ khóa. Bạn không thể thay đổi của this.

Tích hợp hàm tạo JavaScript

JavaScript đã tích hợp trong hàm tạo cho các đối tượng riêng:

var x1 = new Object();    // A new Object object
var x2 = new String();    // A new String object
var x3 = new Number();    // A new Number object
var x4 = new Boolean();   // A new Boolean object
var x5 = new Array();     // A new Array object
var x6 = new RegExp();    // A new RegExp object
var x7 = new Function();  // A new Function object
var x8 = new Date();      // A new Date object

Đối tượng Math() không có trong danh sách. Toán là một đối tượng toàn cục. Không thể sử dụng từ khoá mới trên Toán học.

Có thể bạn chưa biết

Như bạn thấy, JavaScript có các phiên bản đối tượng của các kiểu dữ liệu ban đầu String, Number và Boolean. Không có lý do để tạo ra các đối tượng phức tạp. Các giá trị nguyên hàm thực hiện nhanh hơn nhiều.

Và không có lý do gì để sử dụng Array() mới. Sử dụng các chữ cái mảng để thay thế: []

Và không có lý do gì để sử dụng RegExp() mới. Sử dụng các ký tự dạng: / () /

Và không có lý do gì để sử dụng Function() mới. Sử dụng các biểu thức chức năng thay vì: function() {}.

Và không có lý do gì để sử dụng Object() mới. Sử dụng các ký tự đối tượng thay thế: {}

var x1 = {};            // new object
var x2 = “”;            // new primitive string
var x3 = 0;             // new primitive number
var x4 = false;         // new primitive boolean
var x5 = [];            // new array object
var x6 = /()/           // new regexp object
var x7 = function(){};  // new function object

Đối tượng String

Thông thường, chuỗi được tạo ra như là nguyên hàm: var firstName = “John”. Nhưng chuỗi cũng có thể được tạo ra như các đối tượng sử dụng từ khóa mới: var firstName = new String (“John”).

Đối tượng Number

Thông thường, số được tạo ra dưới dạng nguyên hàm: var x = 123. Nhưng các con số cũng có thể được tạo ra dưới dạng các đối tượng sử dụng từ khoá mới: var x = new Number(123)

Đối tượng Boolean

Thông thường, các phép toán luận được tạo ra như là các biến hàm: var x = false. Nhưng các phép toán luận cũng có thể được tạo ra như các đối tượng sử dụng từ khoá mới: var x = new Boolean(false).

Các đối tượng JavaScript có thể biến đổi

Đối tượng có thể bị thay đổi: chúng được giải quyết bằng tham chiếu chứ không phải theo giá trị. Nếu person là một đối tượng, lệnh sau đây sẽ không tạo ra một bản sao của person:

var x = person;  // This will not create a copy of person.

Đối tượng x không phải là một bản sao của person. Đó là con người. Cả x và người đều là cùng một person. Mọi thay đổi cho x cũng sẽ thay đổi personi, bởi vì x và person là cùng một đối tượng.

var person = {firstName:”John”, lastName:”Doe”, age:50, eyeColor:”blue”}

var x = person;
x.age = 10;           // This will change both x.age and person.age

Lưu ý: Các biến JavaScript không thể thay đổi, chỉ các đối tượng JavaScript.

Tham khảo thêm các khóa học lập trình web từ Front-end đến Back-end do trực tiếp giảng viên quốc tế trường FPT Arena giảng dạy giúp bạn thành thạo kỹ năng lập trình web từ CƠ BẢN – NÂNG CAO với giá chỉ từ 290,000đ:
  • Học lập trình front-end cơ bản với bootstrap 4/html5/css3
  • Học lập trình front-end nâng cao qua Project thực tế
  • Học thiết kế web với Photoshop, CSS theo kiểu SASS
  • Học cách sử dụng Git_hub cho lập trình viên
  • Học lập trình Back-end PHP theo mô hình MVC cơ bản
  • Học lập trình Back-end PHP theo mô hình MVC nâng cao
  • Học lập trình Cơ sở dữ liệu với AngularJS
  • Học lập trình theme wordpress. Làm ra mọi website hoàn chỉnh với wordpress
  • Combo lập trình front-end từ cơ bản – nâng cao
  • Combo lập trình back-end từ cơ bản đến nâng cao
  • Combo lập trình web với word press từ A-Z
0