Hướng dẫn let object javascript - để đối tượng javascript

Như các bạn đã biết, Javascript có 5 kiểu dữ liệu 

get = object.property;
object.property = set;

get = object.property;
object.property = set;

get = object.property;
object.property = set;

let hello;
let world;

// Old way 
const obj = {
    hello: hello,
    world: world
}

// Modern way 
const obj = {
    hello,
    world,
}

let hello;
let world;

// Old way 
const obj = {
    hello: hello,
    world: world
}

// Modern way 
const obj = {
    hello,
    world,
}

let hello;
let world;

// Old way 
const obj = {
    hello: hello,
    world: world
}

// Modern way 
const obj = {
    hello,
    world,
}

let hello;
let world;

// Old way 
const obj = {
    hello: hello,
    world: world
}

// Modern way 
const obj = {
    hello,
    world,
}

Object là gì?

Objects trong JavaScript, cũng tương tự như những ngôn ngữ khác, có thể so sánh như đối tượng trong đời thường. Khái niệm của objects trong JavaScript có thể được hiểu như những đối tượng thực tế trong đời thực.

Trong JavaScript, một object là một thực thể độc lập, với thuộc tính và kiểu. Lấy cái tách làm ví dụ. Cái tách là một object có những thuộc tính của riêng nó. Một cái tách có màu sắc, thiết kế, trọng lượng, chất liệu tạo ra nó, vân vân... Tương tự như vậy, JavaScript objects có thể có những thuộc tính định nghĩa nên đặc tính của nó.

Đối tượng trong Javascript là một tập hợp các cặp khóa - giá trị, tương tự như bản đồ, từ điển, hay hash-table trong ngôn ngữ lập trình khác.khóa - giá trị, tương tự như bản đồ, từ điển, hay hash-table trong ngôn ngữ lập trình khác.

• Đối tượng là một tập hợp các thuộc tính
• Thuộc tính là một cặp khóa - giá trị chứa tên và giá trịkhóa - giá trị chứa tên và giá trị
• Tên thuộc tính là một giá trị duy nhất có thể bị ép buộc vào một chuỗi và trỏ đến một giá trị
• Giá trị thuộc tính có thể là bất kỳ giá trị nào, bao gồm các đối tượng khác hoặc các hàm, được liên kết với tên/khóa

Đối tượng (Object) và những điều cần biết

1. Tạo đối tượng

Các bạn có 3 cách để khai báo đối tượng trong Javascript: 

• Sử dụng từ khóa {}
• Sử dụng từ khóa

  let hello;
  let world;
  
  // Old way 
  const obj = {
      hello: hello,
      world: world
  }
  
  // Modern way 
  const obj = {
      hello,
      world,
  }

  4
• Sử dụng phương thức static

Dưới đây là ví dụ về tạo ra đối tượng rỗng trong Js:

// literal
const dog = { }

// constructor
const cat = new Object();

// static method
const horse = Object.create({ })

2. Nhận và thiết đặt thuộc tính (Get and Set Properties)

Bây giờ chúng ta đã có 1 đối tượng trống, chúng ta cần thêm các thuộc tính vào nó bằng cách sử dụng các trình truy cập (accessors).

Tên thuộc tính hợp lệ bao gồm chữ cái, số, kí tự,.. có thể ép thành một chuỗi, nhưng không được sử dụng các từ dành riêng như

let hello;
let world;

// Old way 
const obj = {
    hello: hello,
    world: world
}

// Modern way 
const obj = {
    hello,
    world,
}

let hello;
let world;

// Old way 
const obj = {
    hello: hello,
    world: world
}

// Modern way 
const obj = {
    hello,
    world,
}

let hello;
let world;

// Old way 
const obj = {
    hello: hello,
    world: world
}

// Modern way 
const obj = {
    hello,
    world,
}

get = object.property;
object.property = set;

Kể từ ES6, chúng ta có một cách viết tắt thuận tiện để thiết lập các thuộc tính:

let hello;
let world;

// Old way 
const obj = {
    hello: hello,
    world: world
}

// Modern way 
const obj = {
    hello,
    world,
}

Sử dụng một biến hoặc biểu thức làm tên thuộc tính bằng cách đặt nó trong dấu ngoặc [] - đây được gọi là thuộc tính được tính toán

const x = 'khoa';

const obj = {
  [x]: 07
}

obj.khoa // 07

Thuộc tính của đối tượng có thể được xóa với từ khóa

let hello;
let world;

// Old way 
const obj = {
    hello: hello,
    world: world
}

// Modern way 
const obj = {
    hello,
    world,
}

delete obj.hello;
delete obj.world;

3. Phương thức trong đối tượng

Một đối tượng ngoài các thuộc tính ra nó còn chứa hàm gọi là phương thức. Một phương thức là một hàm liên kết với một object, hoặc, có thể nói phương thức là một thuộc tính của object có giá trị là một hàm. Phương thức được định nghĩa giống như cách định nghĩa hàm, ngoài trừ việc chúng phải được gán như là thuộc tính của một object.

Thường các phương thức được định nghĩa qua một hàm khởi tạo đối tượng. Ví dụ:

//Hàm khởi tạo đối tượng
function person(name, age) {
  this.name = name;
  this.age = age;
  this.changeName = function (name) {
    this.name = name;
  }
}

//Tạo đối tượng
var p = new person("Khoa", 19);

p.changeName("Vân");
//Giờ p.name bằng "Vân"

Các phương thức bạn cũng có thể định nghĩa bên ngoài hàm khởi tạo. Ví dụ:

function person(name, age) {
  this.name= name;
  this.age = age;
  this.yearOfBirth = bornYear; //Gán phương thức bên ngoài
}

//Hàm bên ngoài hàm tạo, hàm này được gán vào đối tượng qua hàm tạo ở trên
function bornYear() {
  return 2020 - this.age;
}

var p = new person("Khoa", 19);
document.write(p.yearOfBirth());
// Outputs 2001

4. Setter và Getter

Một thuộc tính của của đối tượng còn thiết lập nó là hàm 

let hello;
let world;

// Old way 
const obj = {
    hello: hello,
    world: world
}

// Modern way 
const obj = {
    hello,
    world,
}

const x = 'khoa';

const obj = {
  [x]: 07
}

obj.khoa // 07

let hello;
let world;

// Old way 
const obj = {
    hello: hello,
    world: world
}

// Modern way 
const obj = {
    hello,
    world,
}

const x = 'khoa';

const obj = {
  [x]: 07
}

obj.khoa // 07

let hello;
let world;

// Old way 
const obj = {
    hello: hello,
    world: world
}

// Modern way 
const obj = {
    hello,
    world,
}

const x = 'khoa';

const obj = {
  [x]: 07
}

obj.khoa // 07

let hello;
let world;

// Old way 
const obj = {
    hello: hello,
    world: world
}

// Modern way 
const obj = {
    hello,
    world,
}

const x = 'khoa';

const obj = {
  [x]: 07
}

obj.khoa // 07

Hàm setter định nghĩa bằng cách cho thêm 

const x = 'khoa';

const obj = {
  [x]: 07
}

obj.khoa // 07

const x = 'khoa';

const obj = {
  [x]: 07
}

obj.khoa // 07

const x = 'khoa';

const obj = {
  [x]: 07
}

obj.khoa // 07

const x = 'khoa';

const obj = {
  [x]: 07
}

obj.khoa // 07

var obj = {
    age: 0,

    set ageInfo(age) {                              //Định nghĩa setter
        console.log('setter - ' + age);
        this.age = age;
    },

    get ageInfo() {                                 //Định nghĩa getter
        console.log('getter');
        return "Thông tin tuổi: " + this.age;
    }
};

obj.ageInfo = 25;          //Gán -> Tự động gọi settter
alert(obj.ageInfo);        //Không phải gán -> Tự động gọi getter

Trong trường hợp muốn định nghĩa 

const x = 'khoa';

const obj = {
  [x]: 07
}

obj.khoa // 07

const x = 'khoa';

const obj = {
  [x]: 07
}

obj.khoa // 07

const x = 'khoa';

const obj = {
  [x]: 07
}

obj.khoa // 07

const x = 'khoa';

const obj = {
  [x]: 07
}

obj.khoa // 07

//Một đối tượng đã có tên ob, thêm cho nó setter, getter có tên namepro
Object.defineProperty(ob, 'namepro', {
    set: function(x) {
        //code setter ở đây
       },
    get: function() {
            //code getter ở đây
       }

});

Ví dụ trên định nghĩa lại trong hàm tạo:

function person(age) {
    this.age = 0;
    Object.defineProperty(this, 'ageInfo', {
        set : function (age) {
            console.log('setter - ' + age);
            this.age = age;
        },
        get : function () {
            console.log('getter');
            return "Thông tin tuổi: " + this.age;
        }
    });
 }

var obj = new person(0);

obj.ageInfo = 25;
alert(obj.ageInfo);

5. Sử dụng this để tham chiếu tới đối tượng

Trong một đối tượng thông thường,

const x = 'khoa';

const obj = {
  [x]: 07
}

obj.khoa // 07

get = object.property;
object.property = set;

6. So sánh Objects

Trong JavaScript những object là kiểu tham chiếu. Hai đối tượng tách biệt không bao giờ bằng nhau, thậm chí nếu chúng có cùng những thuộc tính. Chỉ khi nó so sánh với chính nó thì kết quả mới là true.

Ví dụ:

get = object.property;
object.property = set;

get = object.property;
object.property = set;

get = object.property;
object.property = set;

Constructor là gì?

const x = 'khoa';

const obj = {
  [x]: 07
}

obj.khoa // 07

const x = 'khoa';

const obj = {
  [x]: 07
}

obj.khoa // 07

Cú pháp:

get = object.property;
object.property = set;

Ví dụ:

get = object.property;
object.property = set;

Constructor là gì?

delete obj.hello;
delete obj.world;

delete obj.hello;
delete obj.world;

const x = 'khoa';

const obj = {
  [x]: 07
}

obj.khoa // 07

const x = 'khoa';

const obj = {
  [x]: 07
}

obj.khoa // 07

Cú pháp:

Chỉ có duy nhất 1 phương thức đặc biệt tên là "constructor" ở trong class. Có nhiều hơn 1 phương thức 

delete obj.hello;
delete obj.world;

delete obj.hello;
delete obj.world;

get = object.property;
object.property = set;

Một constructor có thể sử dụng từ khóa delete obj.hello; delete obj.world;2 để gọi đến constructor của class cha.

Nếu bạn không chỉ định 1 phương thức constructor thì constructor mặc định sẽ được sử dụngBạn thấy thế nào về JS, hãy đưa ra những ý kiến trong quá trình sử dụng JS nhé. Nếu các bạn thấy bài viết hữu ích hãy rate 5* và share cho mọi người tham khảo!

Hãy để lại comment để mình có thể hoàn thiện bản thân hơn trong tương lai. Cám ơn các bạn!