Bài 31 | Javascript Object – Javascript cơ bản (Phần 7) – SOGO
Trong JavaScript, hầu như mọi thứ đều là object: Booleans, Numbers, Strings, Dates, Maths, Regular expressions, Arrays, Functions, Objects. Tất cả giá trị Javascript, ngoại trừ dữ liệu nguyên thủy (primitives), đều là objects.
I. JavaScript Primitives
Một giá trị nguyên thủy (primitive value) là một giá trị mà không có thuộc tính (properties) hoặc phương pháp (methods).
Một primitive data type là dữ liệu mà có primitive value.
JavaScript định nghĩa 5 primitive data types:
string
number
boolean
null
undefined
Primitive values thì immutable (không thể thay đổi được).
Ví dụ x = 3.14, bạn có thể thay đổi giá trị của x. Nhưng không thể thay đổi giá trị của 3.14.
Value | Type | Comment |
---|---|---|
“Hello” | string | “Hello” is always “Hello” |
3.14 | number | 3.14 is always 3.14 |
true | boolean | true is always true |
false | boolean | false is always false |
null | null (object) | null is always null |
undefined | undefined | undefined is always undefined |
II. Javascript Objects là các Variables
JavaScript variables chứa single values:
Ví dụ:
var person = "John Doe";
Objects cũng là variables. Tuy nhiên objects có thể chứa nhiều giá trị.
Các giá trị được viết theo cặp name : value.
Ví dụ:
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
III. Javascript Object Properties
Trong Javascript, object chứa các thuộc tính được đặt tên, gọi là properties.
Một JavaScript object là một tập hợp các thuộc tính không có thứ tự (unordered properties).
Object properties có thể là các primitive values, objects, hoặc functions.
Ví dụ:
Property | Value |
---|---|
firstName |
John |
lastName |
Doe |
age |
50 |
eyeColor |
blue |
1. Tạo JavaScript Object sử dụng Object Literal
Sử dụng object literal, bạn định nghĩa và tạo ra một object trong cùng 1 câu lệnh
Một object literal là một danh sách các cặp name:value bên trong dấu ngoặc nhọn (curly braces) {}.
Ví dụ:
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
See the Pen javascript object literal by QUANG (@QUANGPHUONG) on CodePen.
2. Tạo JavaScript Object sử dụng từ khóa new
Ví dụ sau tạo một JavaScript object có 4 thuộc tính (properties):
Ví dụ:
var person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";
See th
e Pen javascript object new by QUANG (@QUANGPHUONG) on CodePen.
3. JavaScript Objects có thể thay đổi được (mutable)
Objects thì mutable bởi vì chúng được gọi bằng reference, không phải giá trị.
Ví dụ:
var x = person; // This will not create a copy of person.
Cả x và person cùng là 1 object và có cùng 1 địa chỉ trong bộ nhớ.
Bất kì thay đổi nào với x cũng sẽ thay đổi person.
Ví dụ
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
See the Pen javascript object mutable by QUANG (@QUANGPHUONG) on CodePen.
4. Truy cập JavaScript Properties
Cú pháp để truy cập property của một object:
objectName.property // person.age
hoặc
objectName[“property“] // person[“age”]
hoặc
objectName[expression] // x = “age”; person[x]
Ví dụ:
person.firstname + " is " + person.age + " years old.";
Ví dụ:
person["firstname"] + " is " + person["age"] + " years old.";
Ví dụ sau lặp qua các thuộc tính của object person:
var person = {fname:"John", lname:"Doe", age:25};
for (x in person) {
txt += person[x];
}
See the Pen javascript object property by QUANG (@QUANGPHUONG) on CodePen.
5. Thêm Javascript Properties
Ví dụ:
person.nationality = "English";
See the Pen javascript object add property by QUANG (@QUANGPHUONG) on CodePen.
6. Xóa Javascript Properties
Từ khóa delete
dùng để xóa property của một object.
Ví dụ
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
delete person.age; // or delete person["age"];
See the Pen javascript delete property by QUANG (@QUANGPHUONG) on CodePen.
IV. Javascript Object Methods
Methods là các hành động được thực hiện bởi object.
Một object method là một object property chứa đựng một function definition.
Property | Value |
---|---|
firstName |
John |
lastName |
Doe |
age |
50 |
eyeColor |
blue |
fullName |
function() {return this.firstName + " " + this.lastName;} |
1. Truy cập Object Methods
Cú pháp:
objectName.methodName()
Ví dụ:
name = person.fullName();
See the Pen javascript object method by QUANG (@QUANGPHUONG) on CodePen.
2. Thêm Method vào Object
Ví dụ:
person.name = function () {
return this.firstName + " " + this.lastName;
};
See the Pen javascript object add method by QUANG (@QUANGPHUONG) on CodePen.
V. JavaScript Object Accessors
1. Vì sao cần Getters và Setters?
- Cú pháp đơn giản
- Dùng chung cho properties và methods
- Bảo đảm an toàn cho dữ liệu
- Và các tiện dụng khác
2. JavaScript Getter (get
Keyword)
Ví dụ:
// Create an object:
var person = {
firstName: "John",
lastName : "Doe",
language : "en",
get lang() {
return this.language;
}
};
// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.lang;
See the Pen javascript getter by QUANG (@QUANGPHUONG) on CodePen.
3. JavaScript Setter (set
Keyword)
Ví dụ:
var person = {
firstName: "John",
lastName : "Doe",
language : "",
set lang(lang) {
this.language = lang;
}
};
// Set an object property using a setter:
person.lang = "en";
// Display data from the object:
document.getElementById("demo").innerHTML = person.language;
See the Pen javascript setter by QUANG (@QUANGPHUONG) on CodePen.
VI. JavaScript Object Constructors
1. Object Types (Blueprints) (Classes)
Các ví dụ trên chỉ tạo các object riêng lẻ.
Đôi khi ta muốn tạo một “blueprint” để có thể tạo ra nhiều objects có cùng chung một “type”.
Ta có thể làm được việc này bằng cách tạo ra một object constructor function.
Trong ví dụ sau, function Person()
là một object constructor function.
Objects mà có cùng type được tạo ra bằng cách gọi (call) constructor function với từ khóa new
:
See the Pen javascript object constructor by QUANG (@QUANGPHUONG) on CodePen.
2. Thêm một Property vào một Object
Ví dụ:
myFather.nationality = "English";
See the Pen javascript object add property 2 by QUANG (@QUANGPHUONG) on CodePen.
3. Thêm một Method vào một Object
Ví dụ:
myFather.name = function () {
return this.firstName + " " + this.lastName;
};
See the Pen javascript object add method by QUANG (@QUANGPHUONG) on CodePen.
4. Thêm một Property vào một Constructor
Ví dụ:
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
this.nationality = "English";
}
See the Pen javascript object add property constructor by QUANG (@QUANGPHUONG) on CodePen.
5. Thêm một Method vào một Constructor
Adding methods to an object constructor must be done inside the constructor function:
Ví dụ:
function Person(firstName, lastName, age, eyeColor) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.eyeColor = eyeColor;
this.changeName = function (name) {
this.lastName = name;
};
}
See the Pen javascript add method constructor by QUANG (@QUANGPHUONG) on CodePen.
6. Built-in JavaScript Constructors
JavaScript có built-in constructors cho các native objects:
Ví dụ:
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
Tuy nhiên việc tạo ra các Objects nói trên không được khuyến khích. Thay vào đó bạn có thể sử dụng các cách sau:
- Sử dụng object literals
{}
thay vìnew Object()
. - Sử dụng string literals
""
thay vìnew String()
. - Sử dụng number literals
12345
thay vìnew Number()
. - Sử dụng boolean literals
true / false
thay vìnew Boolean()
. - Sử dụng array literals
[]
thay vìnew Array()
. - Sử dụng pattern literals
/()/
thay vìnew RegExp()
. - Sử dụng function expressions
() {}
thay vìnew Function()
.
Ví dụ:
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
Nguồn tham khảo: w3school
*************
Xem thêm:
- Lập trình web là gì?
- HTML là gì?
- Học lập trình web bắt đầu như thế nào?
- Bài 1 | Xây dựng trang web đơn giản với HTML
- Bài 2 | Các thành phần cơ bản của HTML
- Bài 3 | HTML style – Định dạng nội dung trang web
- Bài 4 | CSS style – Định dạng nội dung trang web
- Bài 5 | HTML Table và List – Định dạng bảng và list trong trang web
- Bài 6 | HTML Block, Inline, ID, Class và Iframes Elements
- Bài 7 | HTML Form Elements – Nhập dữ liệu cho Web
- Bài 8 | HTML Input Elements – Nhập dữ liệu cho Web
- Bài 9 | Tạo responsive web layout bằng HTML và CSS
- Bài 10 | CSS là gì? Thiết kế Web nâng cao bằng CSS
- Bài 11 | CSS Background và Border
- Bài 12 | CSS Margin và Padding
- Bài 13 | CSS Box Model trong thiết kế Website
- Bài 14 | CSS Text, List và Table
- Bài 15 | CSS Display, Overflow, Float và Alignment
- Bài 16 | CSS Combinator
- Bài 17 | CSS Navigation Bar
- Bài 18 | Responsive Web Layout với CSS
- Bài 19 | CSS Animation
- Bài 20 | jQuery là gì? jQuery Selectors & Event Methods
- Bài 21 | jQuery Animate – Effects & Animation
- Bài 22 | jQuery CSS
- Bài 23 | jQuery Traversing
- Bài 24 | Javascript là gì?- Giới thiệu về Javascript
- Bài 25 | Lập trình Javascript cơ bản (Phần 1)
- Bài 26 | Javascript function là gì? Lập trình Javascript cơ bản (Phần 2)
- Bài 27 | Javascript Data Types – Lập trình Javascript cơ bản (Phần 3)
- Bài 28 | Javascript Date – Lập trình Javascript cơ bản (Phần 4)
- Bài 29 | Javascript Number Format – Lập trình Javascript cơ bản (Phần 5)
- Bài 30 | Javascript Array – Lập trình Javascript cơ bản (Phần 6)
—————————————————————————————
SOGO – xSchool
Đối tác của trường Đại học trực tuyến FUNiX (thuộc khối giáo dục FPT Education).
SOGO hợp tác cùng FUNiX triển khai chương trình đào tạo Lập trình viên chuyên nghiệp – Java Developer dựa trên cơ sở hoàn thành 03 chứng chỉ đầu tiên của chương trình Cử nhân Đại học trực tuyến FUNiX (tổng cộng 8 Chứng chỉ để lấy bằng Đại học FPT).
Mục tiêu của chương trình này là giúp sinh viên có thể hoàn thành 3 chứng chỉ đầu trong thời gian từ 10 – 12 tháng và có thể đi làm ngay tại FPT Software với chức danh Java Developer Fresher.
Sau khi đi làm, sinh viên vẫn có thể tiếp tục học để hoàn thành 5 chứng chỉ còn lại của FUNiX và lấy bằng Đại học FPT (được Bộ giáo dục và đào tạo công nhận).
Chi tiết chương trình trở thành Java Developer chỉ trong 10 tháng.
Liên hệ ngay để biết thêm chi tiết đây:
Hotline: 0355 00 77 38
Facebook (SOGO xSchool): sogoxschool
Tag:array literals, array object, Arrays, boolean literals, booleans, Dates, function expressions, function object, Functions, getter, Javascript, javascript object, javascript property, lap trinh web, Maths, new object, number literals, Numbers, object accessor, object constructor, object literal, object literals, object method, Objects, pattern literals, primitive boolean, primitive number, primitive string, regexp object, Regular expressions, setter, SOGO, string literals, Strings, thiet ke web, web developer