Cách tạo một đối tượng JavaScript và thuộc tính, phương thức của...

Cách tạo một đối tượng JavaScript và thuộc tính, phương thức của đối tượng

Object là một kiểu dữ liệu không nguyên thủy (non-primitive) trong JavaScript. Nó tương tự như các biến khác, nhưng khác biệt duy nhất là object có thể chứa nhiều giá trị, và các giá trị này được gọi là các thuộc tính (properties) và phương thức (methods). Các properties có thể chứa các giá trị của các kiểu dữ liệu nguyên thủy (primitive data types) và các methods là các hàm (functions).

Trong các ngôn ngữ lập trình khác như Java hoặc C#, bạn cần một lớp (class) để tạo một đối tượng của nó. Trong JavaScript, một đối tượng là một thực thể độc lập (standalone entity) vì không có lớp nào trong JavaScript. Tuy nhiên, bạn có thể thực hiện các chức năng của lớp bằng cách sử dụng các hàm (functions).

Nội dung chính:

Cách tạo đối tượng trong JavaScript
Cách truy cập thuộc tính & phương thức của một object
Undefined Property hoặc Method

1. Cách tạo đối tượng trong JavaScript

Trong JavaScript, một object có thể được tạo bằng một trong hai cách sau:

Object literal
Object constructor

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

1.1. Tạo object bằng Object literal

– Object literal là một cách đơn giản để tạo một object bằng cách sử dụng dấu {}, và giá trị của object bên trong dấu {} là các cặp key:value, trong đó key sẽ là tên property hoặc tên method và value sẽ là giá trị của property của bất kỳ data type hoặc function nào. Sử dụng dấu phẩy (,) để phân tách nhiều cặp key:value.

– Cú pháp:

var <object-name> = { key1 : value1, key2 : value2,... keyN : valueN };

– Ví dụ: Tạo đối tượng bằng cách sử dụng cú pháp Object Literal

[code language=”javascript”]var emptyObject = {}; // object with no properties or methods

var person = { firstName: "John" }; // object with single property

// object with single method
var message = {
showMessage: function (val) {
alert(val);
}
};

// object with properties & method
var car = {
brand : "Toyota",
name : "Prius 2018",
weight : 850,
color : "White",
getFullName: function () {
return this.brand + ‘ ‘ + this.name;
}
}; [/code]

Khoảng trắng (spaces) và xuống dòng (line breaks) là không quan trọng. Một định nghĩa object có thể được viết trên một hoặc nhiều dòng.

– Bạn phải chỉ định cặp key:value cho properties hoặc methods của object. Chỉ có tên property hoặc chỉ có tên method là không hợp lệ. Cú pháp sau không hợp lệ:

Ví dụ: Wrong Syntax

[code language=”javascript”]var person = { firstName };
// hoặc:
var person = { firstName: };[/code]

1.2. Tạo object bằng Object constructor

Cách thứ hai để tạo một object là với Object Constructor sử dụng từ khóa new. Bạn có thể attach properties và methods cho object bằng cách sử dụng ký tự dấu chấm. Hoặc bạn cũng có thể tạo thuộc tính bằng cách sử dụng [] và chỉ định tên thuộc tính là một string bên trong dấu []

Xem thêm: Từ khóa new trong JavaScript.

Ví dụ: Tạo đối tượng bằng cách sử dụng Object Constructor

[code language=”javascript”]// Tạo đối tượng car từ constructor Object()
var car = new Object();

// Thêm các properties và method cho car object
car.brand = "Toyota";
car["name"] = "Prius 2018";
car.weight = 850;
car.getFullName = function () {
return this.brand + ‘ ‘ + this.name;
};[/code]

– Cả 2 cách tạo đối tượng bằng cú pháp Object literal hay Object constructor đều cho kết quả như sau.
– Tuy nhiên, để đơn giản, dễ đọc và tốc độ thực thi thì nên sử dụng phương pháp tạo đối tượng bằng cú pháp Object literal.

★★★ Không khai báo Strings, Numbers, và Booleans thành Objects!

Khi biến JavaScript được khai báo với từ khóa new, biến đó sẽ được tạo dưới dạng một object:

Ví dụ:

[code language=”javascript”]var x = new String(); // Khai báo x như là một String object
var y = new Number(); // Khai báo y như là một Number object
var z = new Boolean(); // Khai báo z như là một Boolean object[/code]

Tránh tạo các đối tượng String, Number và Boolean. Chúng làm phức tạp code của bạn và làm chậm tốc độ thực thi.

2. Cách truy cập thuộc tính & phương thức của một object

Bạn có thể get hoặc set các giá trị thuộc tính của đối tượng bằng cách sử dụng ký tự dấu chấm (dot notation) hoặc bằng dấu [] (bracket) cùng với tên thuộc tính. Tuy nhiên, bạn CHỈ có thể gọi (call) phương thức của đối tượng bằng cách sử dụng ký tự dấu chấm (dot notation).

2.1. Truy cập thuộc tính của đối tượng

Bạn có thể truy cập các thuộc tính (properties) của đối tượng theo cú pháp sau:

objectName.propertyName

// hoặc

objectName["propertyName"]
objectName[expression]	// x = "age"; person[x]

expression phải là tên thuộc tính (property name).

Ví dụ:

[code language=”javascript”]// Tạo đối tượng:
var car = {
brand : "Toyota",
name : "Prius 2018",
weight : 850
};

// Truy cập thuộc tính:
car.brand; // Toyota

car["name"]; // Prius 2018[/code] Try it »

2.2. Truy cập phương thức của đối tượng

– Một object method là một định nghĩa hàm (function definition), được lưu trữ dưới dạng một giá trị thuộc tính (property value).

– Để truy cập object method chúng ta chỉ có duy nhất 1 cách là sử dụng ký tự dấu chấm (dot notation).

– Cú pháp:

objectName.methodName()

Ví dụ:

[code language=”javascript”]name = car.getFullName();[/code] Try it »

– Nếu bạn truy cập một phương thức không có dấu ngoặc đơn (), nó sẽ trả về định nghĩa hàm:

Ví dụ:

[code language=”javascript”]name = car.getFullName;[/code] Try it »

2.3. Access Object Keys

Sử dụng vòng lặp for…in để lặp qua các thuộc tính (properties) và phương thức (methods) của một đối tượng:

Tạo đối tượng car:

[code language=”javascript”]var car = {
brand : "Toyota",
name : "Prius 2018",
weight : 850,
getFullName : function() {
return this.brand + " " + this.name;
}
};[/code]

Access Keys

[code language=”javascript”] // Truy cập các KEY của object car
for (var key in car) {
document.getElementById("demo").innerHTML = key;
}[/code] Try it »