JavaScript

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

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

Series lập trình JavaScript, ngôn ngữ lập trình linh động, thực thi phía client.

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).

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

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:

  1. Object literal
  2. 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 []

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

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 »

Access Values
[code language=”javascript”] // Truy cập các VALUE của object car
for (ii in car) {
values += car[ii];
}[/code] Try it »
3. Undefined Property hoặc Method

3. Undefined Property hoặc Method

– Nếu bạn truy cập thuộc tính hoặc gọi phương thức không tồn tại, JavaScript sẽ trả về “undefined“.

– Nếu bạn không biết một đối tượng có thuộc tính nào đó hay không, hãy sử dụng phương thức hasOwnProperty() trước khi truy cập thuộc tính:

Ví dụ: hasOwnProperty()
[code language=”javascript”]var person = new Object();

person.firstName; // return undefined

if (person.hasOwnProperty("firstName")) {
person.firstName;
}[/code] Try it »

Cảm ơn bạn đã theo dõi. Đừng ngần ngại hãy cùng thảo luận với chúng tôi!

Giới thiệu

Minh Hoàng

Xin chào, tôi là Hoàng Ngọc Minh, hiện đang làm BrSE, tại công ty Toyota, Nhật Bản. Những gì tôi viết trên blog này là những trải nghiệm thực tế tôi đã đúc rút ra được trong cuộc sống, quá trình học tập và làm việc. Các bài viết được biên tập một cách chi tiết, linh hoạt để giúp bạn đọc có thể tiếp cận một cách dễ dàng nhất. Hi vọng nó sẽ có ích hoặc mang lại một góc nhìn khác cho bạn[...]

1 bình luận

Translate »