Object - đối tượng trong Javascript
1. Đối tượng là gì? Ngoài đời thực thì đối tượng là một nhân vật hữu hình như Người, Sinh Viên, Học Sinh, Động vật, Xe đạp, Xe máy, Ô tô...v.v. Trong JavaScript đối tượng là một biến đặc biệt nó có khả năng lưu trữ nhiều giá trị đồng thời. Javascript có sẵn một số đối tượng như String, Array, ...
1. Đối tượng là gì?
Ngoài đời thực thì đối tượng là một nhân vật hữu hình như Người, Sinh Viên, Học Sinh, Động vật, Xe đạp, Xe máy, Ô tô...v.v.
Trong JavaScript đối tượng là một biến đặc biệt nó có khả năng lưu trữ nhiều giá trị đồng thời. Javascript có sẵn một số đối tượng như String, Array, Date, Number. Ngoài các đối tượng này, nhà lập trình có thể tự tạo một đối tượng theo ý của mình dựa vào yêu cầu của bài toán.
Ngoài ra các đối tượng được định nghĩa trong Javascript nhằm thể hiện trừu tượng hóa các đối tượng ngoài đời thực về một phương diện nhất định thông tin đối tượng và hoạt động của mỗi đối tượng.
2. Khái báo một đối tượng.
Trong javascript có hai cách để khai báo một đối tượng cụ thể.
Cách 1: Dùng Object constructor new Object().
var SinhVien = new Object()
Cách 2: Sử dụng cập dấu {}
var SinhVien = {};
3. Thuộc tính và phương thức của đối tượng.
Khi chúng ta thấy một đối tượng hữu hình ngoài đời thực e.g Người, Sinh Viên, Học Sinh. Thì thông thường chúng ta sẽ chú ý tới thông tin của những đối tượng này như sau.
- Đối tượng này tên là gì?
- Giới tính của đối tượng
- Đối tượng bao nhiêu tuổi
- Đối tượng học lớp mấy,trường nào.
- Đối tượng có cha mẹ là ai, địa chỉ nhà ở đâu.
Chúng ta thấy rằng các đối tượng khác nhau thì các thông tin này sẽ khác nhau
Ngoài ra các đối tượng này có các hành động đi ăn, đi ngủ, học bài, xem phim vào thời điểm nào. Hoặc sinh viên thì một tháng về quê bao nhiêu lần...vv.
Tóm tắt lại:
Một đối tượng sẽ bao gồm các thông tin và hành động.
- Mỗi đối tượng khác nhau sẽ có các thông tin khác nhau.
- Mỗi đối tượng khác nhau sẽ có hành động vào các thời điểm khác nhau.
Để đặc tả các thông tin và hành động của đối tượng vào các ngôn ngữ lập trình nói chung và Javascript nói riêng thì một đối tượng sẽ bao gồm các thuộc tính -> thông tin và phương thức -> hành động. Chúng ta sẽ cùng nhau làm rõ dàng hơn khái niệm này trong ngôn ngữ lập trình nhé.
2.1 Thuộc tính là gì??
Thuộc tính là những đặc điểm (có thể hiểu là biến) cần lưu trữ trong đối tượng. Ví dụ đối tượng là Sinh Viên thuộc tính là những thuộc tính sau.
- Tên
- Tuổi.
- Giới tính.
- Địa chỉ.
- Trường đại học.
- Khoa.
Để gán một thuộc tính cho đối tượng trong Javascript có ba cách sau.
Cách 1: Dùng Object constructor new Object()
// Khởi tạo đối tượng var SinhVien = new Object(); // Thuộc tính của đối tượng SinhVien.name = 'Nguyễn Văn A'; SinhVien.age = '20'; SinhVien.gender = 'Nam'; SinhVien.address = "Hà Nội"; SinhVien.school = "Đại học công nghiệp Hà Nội"; SinhVien.class = "Khoa học máy tính";
Cách 2: Sử dụng từ khóa {} và thêm thuộc tính ngay lúc khai báo
var SinhVien = {
name : 'Nguyễn Văn A',
age : 20,
gender : 'Nam',
address : 'Hà Nội',
school : 'Đại học công nghiệp Hà Nội',
class : 'Khoa học máy tính'
};
Cách 3: Sử dụng từ khóa {} và thêm thuộc tính sau đó.
var SinhVien = {};
// Thuộc tính của đối tượng
SinhVien.name = 'Nguyễn Văn A';
SinhVien.age = '20';
SinhVien.gender = 'Nam';
SinhVien.address = "Hà Nội";
SinhVien.school = "Đại học công nghiệp Hà Nội";
SinhVien.class = "Khoa học máy tính";
// Hoặc
var SinhVien = {};
SinhVien['name'] = 'Nguyễn Văn A';
SinhVien['age'] = '20';
SinhVien['gender'] = 'Nam';
SinhVien['address'] = "Hà Nội";
SinhVien['school'] = "Đại học công nghiệp Hà Nội";
SinhVien['class'] = "Khoa học máy tính";
Thuộc tính là một cặp giá trị key = value
Trong đó:
- key: Là tên của thuộc tính.
- value: Là giá trị của thuộc tính
2.2 Phương thức là gì?
Phương thức là những hành động (hàm) của đối tượng. Ví dụ trong đối tượng Sinh Viên thì mình cần hai phương thức là:
- eat() // đi ăn
- sleep() // đi ngủ
- comebackhome() // về quê
Tương tự với thuộc tính thì phương thức cũng có ba cách để khai báo.
Cách 1: Dùng Object constructor new Object()
// Khởi tạo đối tượng
var SinhVien = new Object();
// Thêm phương thức
SinhVien.eat = function(){
// do some thing
}
SinhVien.sleep = function(){
// do some thing
}
SinhVien.comebackhome = function(){
// do some thing
}
Cách 2: Sử dụng từ khóa {} và thêm phương thức ngay lúc khai báo.
// Khởi tạo đối tượng
var SinhVien = {
// Thêm phương thức
eat : function(){
// do some thing
},
sleep : function(){
// do some thing
},
comebackhome : function(){
// do some thing
}
}
Cách 3: Sử dụng từ khóa {} và thêm phương thức sau đó
// Khởi tạo đối tượng
var SinhVien = {}
// Thêm phương thức
SinhVien.eat = function(){
// do some thing
}
SinhVien.sleep = function(){
// do some thing
}
SinhVien.comebackhome = function(){
// do some thing
}
Vậy ta có một trong ba cú pháp để khởi tạo một đối tượng trong Javascript như sau.
// Khởi tạo đối tượng
var SinhVien = {
thuộc_tính_1 : '[giá_trị]',
thuộc_tính_2 : '[giá_trị]',
thuộc_tính_n : '[giá_trị]',
phương_thức_1: function(){
// do some thing
},
phương_thức_2: function(){
// do some thing
},
phương_thức_n: function(){
// do some thing
}
}
Ví du: Khởi tạo một đối tượng sinh viên
var SinhVien = {
// Thêm thuộc tính
name : 'Nguyễn Văn A',
age : 20,
gender : 'Nam',
address : 'Hà Nội',
school : 'Đại học công nghiệp Hà Nội',
class : 'Khoa học máy tính',
// Thêm phương thức
eat : function(){
// do some thing
},
sleep : function(){
// do some thing
},
comebackhome : function(){
// do some thing
}
}
4. Truy cập thuộc tính và phương thức của đối tượng.
4.1 Cách truy cập vào thuộc tính của đối tượng.
Việc truy cập vào thuộc tính của đối tượng sẽ trả về giá trị của thuộc tính đó.
Cú pháp:
Tên_Đối_Tượng.Tên_thuộc_tính
Ví dụ: Xuất ra tên và tuổi của sinh viên
var name = SinhVien.name; // Tên var age = SinhVien.age; // Tuổi
4.2 Cách truy cập vào phương thức của đối tượng.
Việc truy cập vào phương thức của đối tượng sẽ gọi thực thi phương thức đó.
Cú pháp:
Tên_Đối_Tượng.Tên_phương_thức()
Ví dụ: Gọi phương thức sleep() của SinhVien
SinhVien.sleep();
Ví dụ 02:
<!DOCTYPE html>
<html>
<body>
<script>
// Khởi tạo đối tượng
var SinhVien = {
name : 'Nguyễn Văn A',
age : 20,
gender : 'Nam',
address : 'Hà Nội',
school : 'Đại học công nghiệp Hà Nội',
showInfo:function(){
return this.name;
}
}
// Output
var info = "Tên tôi là: " + SinhVien.showInfo();
document.write(info);
</script>
</body>
</html>
Xem kết quả
... Còn nữa đừng nản bạn nhé...
Tiếp theo mình sẽ có một số lưu ý rất quan trọng để chúng ta cùng bàn bàn luận bạn nhé.
1. Kiểu dữ liệu tham trị và tham chiếu.
Như các bạn đã biết thì các kiểu dữ liệu cơ bản trong Javascript là các kiểu dữ liệu tham trị, còn kiểu dữ liệu Object sẽ là kiểu dữ liệu tham chiếu.
Vậy điểm khác biệt cơ bản giữa hai kiểu dữ liệu tham trị và kiểu tham chiếu đó là: "giá trị của kiểu dữ liệu tham chiếu không được lưu trực tiếp vào biến, mà biến đó sẽ lưu một tham chiếu tới giá trị thực".
Mình lấy một ví dụ sau biến được lưu theo kiểu tham trị:
<script> var a = 10; var b = a; a++; document.writeln(a); // return 11; document.writeln(b); // return 10; </script>
Như các bạn thấy b được gán bằng a. Nhưng sau khi a++ thì b vẫn được gán giá trị a ban đầu.
Ví dụ biến được lưu theo kiểu tham chiếu.
<script>
// Khai báo Object
var Fruit = {name : "Táo"};
var Apple = Fruit;
// Thay đổi giá trị
Fruit.name = "Orange";
document.writeln(Fruit.name); // Orange
document.writeln(Apple.name); // Orange
</script>
Như đã thấy, mặc dù thay đổi giá trị của biến ‘Orange’, nhưng giá trị của biến ‘Apple’ cũng bị thay đổi. Nguyên do của việc này là bởi các đối tượng Object lưu giá trị theo kiểu tham chiếu, tức là 2 biến này cùng tham chiếu tới 1 vùng giá trị.
2. Thuộc tính riêng và thuộc tính kế thừa của Object
Một cách khái quát, thuộc tính riêng là thuộc tính được định nghĩa tại bản thân của đối tượng (tại bản thân object), thuộc tính kế thừa là những thuộc tính được kế thừa từ đối tượng prototype của Object đó.
Để kiểm tra một thuộc tính có thuộc object hay không (kể cả thuộc tính riêng và thuộc tính kế thừa), ta dùng toán tử in:
var Fruit = {name: 'Apple'};
//kiểm tra thuộc tính
console.log('name' in Fruit); //true
console.log('price' in Fruit); //false
Để kiểm tra một thuộc tính có phải là thuộc tính riêng hay không, ta có thể dùng phương thức hasOwnProperty của Object.
//Khởi tạo mẫu
function Fruit(){};
Fruit.prototype.color = 'black';
// Tạo đối tượng và thuộc tính riêng
var apple = new Fruit();
apple.name = 'China';
//Kiểm tra thuộc tính
console.log(apple.hasOwnProperty('color')); //false
console.log(apple.hasOwnProperty('name')); //true
Ta có thể nhận định thêm rằng, các thuộc tính định nghĩa trong prototype sẽ được kế thừa tới mọi object, nhưng ta vẫn có thể thêm các thuộc tính riêng cho từng object khác nhau. Đây là một trong những đặc điểm rất đặc biệt của thuộc tính prototype trong Javascript.
3. Tạo nhiều đối tượng(Multiple Object).
Do nhau cầu của chương trình mình cần khởi tạo một danh sách sinh viên khoảng 20 người có các thông tin như sau:
var SinhVien = {
// Thuộc tính
name : ',
age : ',
gender : ',
address : ',
// Phương thức
showInfo : function(){
return 'Họ và tên: '+ this.name
+'<br />Tuổi :' + this.age
+'<br />Giới tính :' + this.gender
+'<br />Địa chỉ :' + this.address;
}
}
....
Chẳng nhẽ mình sẽ phải tạo như vậy hết 20 người là điều không thể đúng không. Và đây cũng là hướng để trả lời câu hỏi "Javascript có phải là ngôn ngữ lập trình hướng đối tượng không". Sẽ có hai cách như sau.
Cách 1: Sử dụng mẫu khởi tạo.
Cách này sử dụng từ khoá function để tạo ra một hàm khởi tạo đối tượng, dùng từ khoá this để gán các thuộc tính cho đối tượng.
function SinhVien (name, age, gender, address){
this.name = name ;
this.age = age;
this.gender = gender;
this.address = address;
this.showInfo = function(){
return 'Họ và tên: '+ this.name
+'<br />Tuổi :' + this.age
+'<br />Giới tính :' + this.gender
+'<br />Địa chỉ :' + this.address;
}
};
Với hàm khởi tạo này, ta có thể tạo hàng loạt các đối tượng kiểu SinhVien như sau:
var a = new SinhVien('Bùi Thị Nhím', '20', 'Nữ', 'Hà Nội');
Cách 2: Sử dụng Prototype
Mình sẽ mở thêm một khái niệm nữa là Prototype trong Javascript. Tuy nhiên trong bài viết này mình chưa nói gì về Prototype cả, mà mình chỉ có một kết luận ngắn như sau liên quan tới Object.
Prototype là gì???
...
Mọi Object trong Javascript đều có prototype. Bản thân prototype cũng là một Object. Tất cả Object đều kế thừa thuộc tính và phương thức từ prototype. Tất cả các Object trong Javascript (Date, Array, Number,String,RegExp, Function, ....) kế thừa từ Object.prototype.
Câu hỏi đặt là "Vậy Object.prototype nó nằm ở đâu?". Mình xin trả lời nó nằm ở Core trong Javascript nhé.
5. Kết luận.
Qua bài viết này mình mong muốn bạn sẽ hiểu hơn về Object trong Javascript. JavaScript không phải là một ngôn ngữ lập trình hướng đối tượng, tuy nhiên bạn hoàn toàn có thể lập trình hướng đối tượng thông qua kiểu dữ liệu Object mà JavaScript cung cấp.
