Trong bài này tất cả chúng ta sẽ tìm hiểu và khám phá object trong javascript, qua đó sẽ giúp bạn hiểu được khái niệm đối tượng người dùng object là gì ? Cách khởi tạo và những thêm thuộc tính / phương pháp vào đối tượng người dùng . Hãy cùng KU Casino xem ngay!
Kể từ phiên bản ES6 – năm ngoái thì đã Open khái niệm lập trình hướng đối tượng người tiêu dùng trong javascript, bởi ta hoàn toàn có thể tạo class, thêm phương pháp và thuộc tính cho class, thậm chi là hoàn toàn có thể tạo class thừa kế từ class khác. Tuy nhiên, vì những bạn đang học cơ bản nên tất cả chúng ta hãy bàn luận về object javascript một cách đơn thuần nhất nhé .
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.
1. Đối tượng / object trong javascript là gì ?
Trong Javascript, object là một khái niệm trừu tượng, được dùng biểu lộ cho những đối tượng người dùng mà qua đó ta hoàn toàn có thể thêm những thuộc tính và phương pháp cho đối tượng người dùng đó .
Chúng ta có sẵn một số ít đối tượng người tiêu dùng như Date, Number. Ngoài những đối tượng người dùng này thì lập trình viên hoàn toàn có thể tự tạo một đối tượng người tiêu dùng theo ý của mình .
Ví dụ, mình đang xây dựng tính năng bình luận thì sẽ tạo một đối tượng Comment, đối tượng này sẽ có những thuộc tính và phương thức chuyên xử lý các bình luận trên website.
Cú pháp khởi tạo đối tượng như sau:
Cách 1: Sử dụng từ khóa new Object()
var Comment = new Object();
Cách 2: Sử dụng từ khóa {}
var Comment = {};
Khi chúng ta khai báo một object thì tức là chúng ta đang tạo một instance của đối tượng Object, tức là đối tượng Object bản thân nó là một constructor. Vì vậy, ta không thể sử dụng từ khóa new để tạo ra một instance từ một instance được.
var Comment = {};
// Sai, vì Comment là một instance và
// không phải là constructor
var comment = new Comment()
Để hiểu rõ hơn thì bạn nên khám phá constructor và prototype nhé .
2. Thuộc tính / phương thức của object trong javasript
Mỗi đối tượng người tiêu dùng sẽ có những thuộc tính và phương pháp .
Thuộc tính
Thuộc tính là những đặc thù ( hoàn toàn có thể hiểu là biến ) cần tàng trữ trong đối tượng người dùng. Ví dụ với đối tượng người tiêu dùng Comment thì mình cần những thuộc tính sau .
- title
- content
- fullname
Lúc này ta hoàn toàn có thể khai báo bằng ba cách .
Cách 1: Sử dụng từ khóa new Object()
// Khởi tạo var Comment = new Object(); // Thêm thuộc tính Comment.title=""; Comment.content=""; Comment.fullname=""; Comment.email="";
Cách 2: Sử dụng từ khóa {} và thêm thuộc tính ngay lúc khai báo
// Khởi tạo
var Comment = {
title : "",
content : "",
fullname : "",
email : ""
};
Cách 3: Sử dụng từ khóa {} và thêm thuộc tính sau đó
// Khởi tạo
var Comment = {};
// Thêm thuộc tính
Comment.title="";
Comment.content="";
Comment.fullname="";
Comment.email="";
Trong ba cách trên thì mình khuyến khích những bạn nên sử dụng cách thứ hai chính bới nó mạch lạc và dễ quản trị code hơn .
Phương thức
Phương thức là những hành vi ( hoàn toàn có thể hiểu là hàm ) của đối tượng người dùng. Ví dụ trong đối tượng người dùng Comment thì mình cần hai phương pháp là :
- addComment ( )
- validateComment()
Lúc này ta sẽ có ba cách khai báo tựa như như cách khai báo thuộc tính .
Cách 1: Sử dụng từ khóa new Object()
// Khởi tạo
var Comment = new Object();
// Thêm phương thức
Comment.addComment = function(){
// do some thing
};
Comment.validateComment = 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
var Comment = {
addComment : function(){
// do some thing
},
validateComment : 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
var Comment = {};
// Thêm phương thức
Comment.addComment = function(){
// do some thing
};
Comment.validateComment = function(){
// do some thing
};
Và mình cũng khuyến khích những bạn nên sử dụng cách 2 .
Xem danh sách phương thức và thuộc tính
Cách nhanh nhất để xem và debug đối tượng người tiêu dùng thì bạn nên sử dụng Firebug. Ví dụ đối tượng người dùng Comment trên thì khi sử dụng Firebug tích hợp hàm console.log ( ) thì sẽ có hiệu quả như hình sau :
3. Thao tác với thuộc tính và phương thức của object trong js
Sau khi tạo xong đối tượng người tiêu dùng thì ta có hai cách sử dụng cơ bản, đó là gọi và gán tài liệu cho thuộc tính và phương pháp. Nhưng nếu xem xét mọi góc nhìn thì tất cả chúng ta có những thao tác thường thì như sau :
- Gán giá trị cho thuộc tính
- Lấy giá trị của thuộc tính
- Gọi phương thức
Gán giá trị cho thuộc tính
Để gán giá trị cho thuộc tính chúng ta chỉ việc thực hiện bằng cách sử dụng toán tử = giống như cách gán giá trị cho biến.
Comment.title = "Tiêu đề bình luận";
Nhưng nếu bạn gọi từ một hàm trong đối tượng thì bạn có thể sử dụng từ khóa this.
var Comment = {
title : "",
addComment : function(){
this.title = "Tiêu đề bình luận";
}
};
Lấy giá trị của thuộc tính
Để lấy giá trị thuộc tính thì ta làm tựa như như thao tác với biến .
var title = Comment.title;
Nếu gọi từ một hàm trong đối tượng thì bạn có thể sử dụng từ khóa this.
var Comment = {
title : "",
addComment : function(){
var title = this.title;
}
};
Xóa thuộc tính
Nếu bạn muốn xóa thuộc tính nào đó thì sử dụng từ khóa delete.
var Comment = {
title : "",
addComment : function(){
var title = this.title;
}
};
// Xóa thuộc tính title, lúc này Comment chỉ còn 1 phương thức addComment
delete Comment.title;
Gọi phương thức
Tương tự như thuộc tính tất cả chúng ta gọi thông thường .
comment.addComment();
Gọi trong hàm của đối tượng người dùng .
var Comment = {
title : "",
addComment : function(){
this.validateComment();
},
validateComment : function(){
// do some thing
}
};
4. Mảng chứa object – object chứa object
Mỗi đối tượng người dùng ( object ) trong Javascript hoàn toàn có thể chứa những đối tượng người dùng khác, hoặc một mảng cũng hoàn toàn có thể chứa những đối tượng người tiêu dùng .
object chứa object
Ví dụ 1: Gom các thuộc tính của Comment vào một đối tượng Info.
var Comment = {
info : {
title : "",
content : "",
email : "",
fullname : ""
}
};
Ví dụ 2: Gom các phương thức (hàm) của Comment vào đối tượng func.
var Comment = {
func : {
addComment : function(){
// Something
},
validateComment : function(){
// Something
}
},
};
Lúc này để truy xuất tới những thuộc tính và phương pháp này ta chỉ việc sử dụng dấu chấm và bổ trợ thêm một cấp nữa .
Comment.info.title = "Comment tại freetuts.net"; Comment.func.addComment();
Mảng chứa object
Để gán giá trị là một đối tượng người tiêu dùng vào mảng cũng tương tự như như gán những giá trị thông thường khác ( xem mảng trong Javascript ) .
// Đối tượng Comment
var Comment = {
title : "",
content : "",
email : "",
fullname : ""
};
// Khởi tạo mảng
var Comments = [];
// Gán giá trị cho phần tử mảng
Comments[0] = Comment;
// Gọi tới thuộc tính
Comments[0].title = "Tiêu đề bình luận";
alert(Comments[0].title);
Hoặc
// Khởi tạo mảng
var Comment = [{
title : "",
content : "",
email : "",
fullname : ""
}];
// Sử dụng
Comment[0].title = "Tiêu đề bình luận";
alert(Comment[0].title);
6. Lặp qua từng phần tử của object trong js
Muốn lặp qua từng thành phần của object thì ta sử dụng vòng lặp for .. in .
Cú pháp
for (key in object) {
// key chính là phần tử trong quá trình lặp
}
Ví dụ
let user = {
name: "John",
age: 30,
isAdmin: true
};
for (let key in user) {
console.log(`Key ${key} có giá trị là ${user[key]}`);
}
Kết quả :
Key name có giá trị là John newhtml.html:19 Key age có giá trị là 30 newhtml.html:19 Key isAdmin có giá trị là true
Lời kết
Nói về đối tượng người tiêu dùng trong Javascript thì rất là nhiều nên mình không hề trình diễn trong một bài được, vì thế bài này mình xin dừng ở đây và ở những bài tiếp theo tất cả chúng ta sẽ thực hàm những ví dụ tương quan đến đối tượng người dùng tìm hiểu và khám phá mối liên hệ giữa đối tượng người tiêu dùng và JSON trong Javascript .
Trong những phần trên thì ở phần 5 là hơi khó hiểu nhất vì nó tương quan tới mảng và có cấu trúc rườm rà. Nhưng bạn đừng lo ngại chính bới những bài tiếp theo mình sẽ đề cập tới nó cũng khá nhiều .
