Hướng dẫn javascript property - thuộc tính javascript

Trong hướng dẫn này, chúng ta cùng tìm hiểu về Object Properties và attributes của nó trong object JavaScript như configurable, writable,

let website = {};

Object.defineProperty(website, 'name', {
    value: 'homiedev',
});

console.log(website); // {}
0,
let website = {};

Object.defineProperty(website, 'name', {
    value: 'homiedev',
});

console.log(website); // {}
1,
let website = {};

Object.defineProperty(website, 'name', {
    value: 'homiedev',
});

console.log(website); // {}
2, và
let website = {};

Object.defineProperty(website, 'name', {
    value: 'homiedev',
});

console.log(website); // {}
3 nhé. 😄😄.Object Properties và attributes của nó trong object JavaScript như configurable, writable,
let website = {};

Object.defineProperty(website, 'name', {
    value: 'homiedev',
});

console.log(website); // {}
0,
let website = {};

Object.defineProperty(website, 'name', {
    value: 'homiedev',
});

console.log(website); // {}
1,
let website = {};

Object.defineProperty(website, 'name', {
    value: 'homiedev',
});

console.log(website); // {}
2, và
let website = {};

Object.defineProperty(website, 'name', {
    value: 'homiedev',
});

console.log(website); // {}
3 nhé. 😄😄.

Object Properties trong JavaScript

Trong JavaScript, có hai loại thuộc tính đối tượng:

  1. data property
  2. accessor property

Đặc điểm của thuộc tính đối tượng - Object Properties được bao quanh bởi hai cặp dấu ngoặc vuông, ví dụ:

let website = {};

Object.defineProperty(website, 'name', {
    value: 'homiedev',
});

console.log(website); // {}
4.Object Properties được bao quanh bởi hai cặp dấu ngoặc vuông, ví dụ:
let website = {};

Object.defineProperty(website, 'name', {
    value: 'homiedev',
});

console.log(website); // {}
4.

Data Property trong JavaScript

Một data property có 4 attributes:4 attributes:

  1. let website = {};
    
    Object.defineProperty(website, 'name', {
        value: 'homiedev',
    });
    
    console.log(website); // {}
    5 - xác định xem các attribute có thể được cài đặt lại hoặc loại bỏ property thông qua toán tử
    let website = {};
    
    Object.defineProperty(website, 'name', {
        value: 'homiedev',
    });
    
    console.log(website); // {}
    6 hay không.
  2. let website = {};
    
    Object.defineProperty(website, 'name', {
        value: 'homiedev',
    });
    
    console.log(website); // {}
    7 - ảnh hưởng đến một số hoạt động (vd như
    let website = {};
    
    Object.defineProperty(website, 'name', {
        value: 'homiedev',
    });
    
    console.log(website); // {}
    8,
    let website = {};
    
    Object.defineProperty(website, 'name', {
        value: 'homiedev',
    });
    
    console.log(website); // {}
    9). Nếu nó là false, thì những hoạt động đó sẽ bỏ qua thuộc tính.
  3. console.log(Object.getOwnPropertyDescriptors(website));
    // hoặc
    console.log(Object.getOwnPropertyDescriptor(website,'name'));
    0 - xác định xem value của một data property có thể được thay đổi hay không..
  4. console.log(Object.getOwnPropertyDescriptors(website));
    // hoặc
    console.log(Object.getOwnPropertyDescriptor(website,'name'));
    1 - chứa giá trị của thuộc tính.

Các thuộc tính

let website = {};

Object.defineProperty(website, 'name', {
    value: 'homiedev',
});

console.log(website); // {}
5 ,
let website = {};

Object.defineProperty(website, 'name', {
    value: 'homiedev',
});

console.log(website); // {}
7 và
console.log(Object.getOwnPropertyDescriptors(website));
// hoặc
console.log(Object.getOwnPropertyDescriptor(website,'name'));
0 có giá trị mặc định true cho tất cả các thuộc tính mà chúng ta tạo ra trên một đối tượng. Giá trị mặc định của thuộc tính [[value]] là undefined.

Ví dụ:

let person = {
    name: 'Minh',
    age: 22
};

Để thay đổi bất kỳ attribute nào của một thuộc tính, bạn cần sử dụng method

console.log(Object.getOwnPropertyDescriptors(website));
// hoặc
console.log(Object.getOwnPropertyDescriptor(website,'name'));
5.

Method

console.log(Object.getOwnPropertyDescriptors(website));
// hoặc
console.log(Object.getOwnPropertyDescriptor(website,'name'));
5 yêu cầu ba đối số:

  1. object.
  2. Tên thuộc tính của object.
  3. object chứa attribute: configurable,
    let website = {};
    
    Object.defineProperty(website, 'name', {
        value: 'homiedev',
    });
    
    console.log(website); // {}
    0, writable, và
    let website = {};
    
    Object.defineProperty(website, 'name', {
        value: 'homiedev',
    });
    
    console.log(website); // {}
    3 (giá trị mặc định configurable,
    let website = {};
    
    Object.defineProperty(website, 'name', {
        value: 'homiedev',
    });
    
    console.log(website); // {}
    0, writable là false và
    let website = {};
    
    Object.defineProperty(website, 'name', {
        value: 'homiedev',
    });
    
    console.log(website); // {}
    3 là undefined.

Giờ chúng ta thử tạo một object bằng

console.log(Object.getOwnPropertyDescriptors(website));
// hoặc
console.log(Object.getOwnPropertyDescriptor(website,'name'));
5:

let website = {};

Object.defineProperty(website, 'name', {
    value: 'homiedev',
});

console.log(website); // {}

Tại sao ở ví dụ trên lại trả về object trống, mặc dù mình đã set giá trị cho

{
  name: {
    value: "homiedev"
    writable: false,
    enumerable: false
    configurable:false
  }
}
6? Thực ra object
{
  name: {
    value: "homiedev"
    writable: false,
    enumerable: false
    configurable:false
  }
}
7 lúc này đã có thuộc tính
{
  name: {
    value: "homiedev"
    writable: false,
    enumerable: false
    configurable:false
  }
}
6, tuy nhiên khi sử dụng
{
  name: {
    value: "homiedev"
    writable: false,
    enumerable: false
    configurable:false
  }
}
9, bạn có thể hiểu rằng
{
  name: {
    value: "homiedev"
    writable: false,
    enumerable: false
    configurable:false
  }
}
9 sẽ hiển thị những thuộc tính là enumerable. Trong trường hợp này
{
  name: {
    value: "homiedev"
    writable: false,
    enumerable: false
    configurable:false
  }
}
6 có enumerable mặc định là false (non-enumerable) cho nên chúng ta sẽ không nhìn thấy thuộc tính
{
  name: {
    value: "homiedev"
    writable: false,
    enumerable: false
    configurable:false
  }
}
6 khi dùng
{
  name: {
    value: "homiedev"
    writable: false,
    enumerable: false
    configurable:false
  }
}
9.

Để biết đã có thuộc tính

{
  name: {
    value: "homiedev"
    writable: false,
    enumerable: false
    configurable:false
  }
}
6 hay chưa, chúng ta có thể xem bằng cách sử dụng
let website = {};

Object.defineProperty(website, 'name', {
    value: 'homiedev',
    enumerable: true // set lại giá trị
});

console.log(website); // {name: "homiedev"} 😄
5 hoặc
let website = {};

Object.defineProperty(website, 'name', {
    value: 'homiedev',
    enumerable: true // set lại giá trị
});

console.log(website); // {name: "homiedev"} 😄
6:

console.log(Object.getOwnPropertyDescriptors(website));
// hoặc
console.log(Object.getOwnPropertyDescriptor(website,'name'));

Kết quả:

{
  name: {
    value: "homiedev"
    writable: false,
    enumerable: false
    configurable:false
  }
}

Để

{
  name: {
    value: "homiedev"
    writable: false,
    enumerable: false
    configurable:false
  }
}
9 hiển thị
{
  name: {
    value: "homiedev"
    writable: false,
    enumerable: false
    configurable:false
  }
}
6 thì chúng ta sẽ đưa thuộc tính này về enumerable bằng cách đặt lại thuộc tính này giá trị true.

let website = {};

Object.defineProperty(website, 'name', {
    value: 'homiedev',
    enumerable: true // set lại giá trị
});

console.log(website); // {name: "homiedev"} 😄

Có thêm thì sẽ có lúc cần xóa, bây giờ chúng ta thử xóa thuộc tính

{
  name: {
    value: "homiedev"
    writable: false,
    enumerable: false
    configurable:false
  }
}
6 xem kết quả như nào nhé 😁.

Sử dụng từ khóa

let website = {};

Object.defineProperty(website, 'name', {
    value: 'homiedev',
});

console.log(website); // {}
6 trong JavaScript để xóa một thuộc tính.

let website = {};

Object.defineProperty(website, 'name', {
    value: 'homiedev',
    enumerable: true
});

delete website.name; // xóa thuộc tính khỏi object

console.log(website); {name: "homiedev"}

Kết quả như bạn thấy là chúng ta không thể xóa thuộc tính

{
  name: {
    value: "homiedev"
    writable: false,
    enumerable: false
    configurable:false
  }
}
6, lý do là vì mặc định configurable là false, configurable sẽ ngăn cản việc xóa thuộc tính này.

Để xóa thì chúng ta set configurable thành true là được:

let website = {};

Object.defineProperty(website, 'name', {
    value: 'homiedev',
    enumerable: true,
    configurable: true
});

delete website.name; // xóa thuộc tính khỏi object

console.log(website); {} 😋

Accessor Property trong JavaScript

accessor property trong JavaScript có các thuộc tính

let website = {};

Object.defineProperty(website, 'name', {
    value: 'homiedev',
});

console.log(website); // {}
5,
let website = {};

Object.defineProperty(website, 'name', {
    value: 'homiedev',
});

console.log(website); // {}
7,
let website = {};

Object.defineProperty(website, 'name', {
    value: 'homiedev',
    enumerable: true
});

delete website.name; // xóa thuộc tính khỏi object

console.log(website); {name: "homiedev"}
7 và
let website = {};

Object.defineProperty(website, 'name', {
    value: 'homiedev',
    enumerable: true
});

delete website.name; // xóa thuộc tính khỏi object

console.log(website); {name: "homiedev"}
8.

Khi bạn đọc dữ liệu từ một thuộc tính của accessor property, hàm

let website = {};

Object.defineProperty(website, 'name', {
    value: 'homiedev',
    enumerable: true
});

delete website.name; // xóa thuộc tính khỏi object

console.log(website); {name: "homiedev"}
7 sẽ tự động được gọi để trả về một giá trị. giá trị trả về mặc định của hàm
let website = {};

Object.defineProperty(website, 'name', {
    value: 'homiedev',
    enumerable: true
});

delete website.name; // xóa thuộc tính khỏi object

console.log(website); {name: "homiedev"}
7 là undefined.

Nếu bạn gán một giá trị cho một thuộc tính của accessor property, thì hàm

let website = {};

Object.defineProperty(website, 'name', {
    value: 'homiedev',
    enumerable: true
});

delete website.name; // xóa thuộc tính khỏi object

console.log(website); {name: "homiedev"}
8 sẽ tự động được gọi.

let person = {
    name: 'Minh',
    address: 'TP. HCM'
}

Object.defineProperty(person, 'information', {
    get: function () {
        return this.name + ', địa chỉ: ' + this.address;
    },
    set: function (value) {
        let parts = value.split(' ');
        if (parts.length == 2) {
            this.name = parts[0];
            this.address = parts[1];
        } else {
            throw 'Dữ liệu đầu vào phải có dạng "name address"';
        }
    }
});

console.log(person.information); // "Minh, địa chỉ: TP. HCM"
person.information = "Tú KonTum";
console.log(person.information); // "Tú, địa chỉ: KonTum"

Như vậy qua bài viết này chúng ta đã tìm hiểu được:

  1. Các đối tượng JavaScript có hai loại thuộc tính:

    1. data property
    2. accessor property
  2. Đặc điểm của thuộc tính đối tượng - Object Properties được bao quanh bởi hai cặp dấu ngoặc vuông, ví dụ:

    let website = {};
    
    Object.defineProperty(website, 'name', {
        value: 'homiedev',
    });
    
    console.log(website); // {}
    4.

  3. Data Property trong JavaScript

  4. Một data property có 4 attributes:

Tải thêm tài liệu liên quan đến bài viết Hướng dẫn javascript property - thuộc tính javascript