Bài 31 | Javascript Object – Javascript cơ bản (Phần 7)

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 the 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:

—————————————————————————————

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

Lập trình Web

Bài 31 | Javascript Object – Javascript cơ bản (Phần 7) – SOGO

I. JavaScript Primitives

II. Javascript Objects là các Variables

III. Javascript Object Properties

1. Tạo JavaScript Object sử dụng Object Literal

2. Tạo JavaScript Object sử dụng từ khóa `new`

3. JavaScript Objects có thể thay đổi được (mutable)

4. Truy cập JavaScript Properties

5. Thêm Javascript Properties

6. Xóa Javascript Properties

IV. Javascript Object Methods

1. Truy cập Object Methods

2. Thêm Method vào Object

V. JavaScript Object Accessors

1. Vì sao cần Getters và Setters?

2. JavaScript Getter (`get` Keyword)

3. JavaScript Setter (`set` Keyword)

VI. JavaScript Object Constructors

1. Object Types (Blueprints) (Classes)

2. Thêm một Property vào một Object

3. Thêm một Method vào một Object

4. Thêm một Property vào một Constructor

5. Thêm một Method vào một Constructor

6. Built-in JavaScript Constructors

SOGO – xSchool

Bài 30 | Javascript Array – Javascript cơ bản (Phần 6) – SOGO

Bài 32 | Javascript if else Conditions– Javascript cơ bản (Phần 8) – SOGO

Ý kiến Hủy

Lập trình Web

I. JavaScript Primitives

II. Javascript Objects là các Variables

III. Javascript Object Properties

1. Tạo JavaScript Object sử dụng Object Literal

2. Tạo JavaScript Object sử dụng từ khóa new

3. JavaScript Objects có thể thay đổi được (mutable)

4. Truy cập JavaScript Properties

5. Thêm Javascript Properties

6. Xóa Javascript Properties

IV. Javascript Object Methods

1. Truy cập Object Methods

2. Thêm Method vào Object

V. JavaScript Object Accessors

1. Vì sao cần Getters và Setters?

2. JavaScript Getter (get Keyword)

3. JavaScript Setter (set Keyword)

VI. JavaScript Object Constructors

1. Object Types (Blueprints) (Classes)

2. Thêm một Property vào một Object

3. Thêm một Method vào một Object

4. Thêm một Property vào một Constructor

5. Thêm một Method vào một Constructor

6. Built-in JavaScript Constructors

Bạn cũng có thể thích

Ý kiến Hủy

2. Tạo JavaScript Object sử dụng từ khóa `new`

2. JavaScript Getter (`get` Keyword)

3. JavaScript Setter (`set` Keyword)