Hướng dẫn javascript objects in depth - các đối tượng javascript chuyên sâu

Bạn đã tìm hiểu về đối tượng JavaScript trong phần cơ bản của JavaScript. Ở đây, bạn sẽ tìm hiểu về đối tượng một cách chi tiết.

Như bạn đã biết, đối tượng trong JavaScript có thể được tạo bằng cách sử dụng hàm theo nghĩa đen, hàm tạo đối tượng hoặc hàm tạo. Đối tượng bao gồm các thuộc tính. Mỗi thuộc tính có thể được gán một giá trị theo nghĩa đen hoặc một hàm.

Hãy xem xét các ví dụ sau của các đối tượng được tạo bằng hàm theo nghĩa đen và hàm tạo.

// object literal 
var person = {
  firstName:'Steve',
  lastName:'Jobs'
};

// Constructor function
function Student(){
  this.name = "John";
  this.gender = "Male";
  this.sayHi = function(){
    alert('Hi');
  }
}
var student1 = new Student();
console.log(student1.name);
console.log(student1.gender);
student1.sayHi();

Trong ví dụ trên, đối tượng

function Student(){
  this.title = "Mr.";
  this.name = "Steve";
  this.gender = "Male";
  this.sayHi = function(){    
    alert('Hi');
  }
}
var student1 = new Student();

Object.keys(student1);

function Student(){
  this.title = "Mr.";
  this.name = "Steve";
  this.gender = "Male";
  this.sayHi = function(){    
    alert('Hi');
  }
}
var student1 = new Student();

Object.keys(student1);

function Student(){
  this.title = "Mr.";
  this.name = "Steve";
  this.gender = "Male";
  this.sayHi = function(){    
    alert('Hi');
  }
}
var student1 = new Student();

Object.keys(student1);

function Student(){
  this.title = "Mr.";
  this.name = "Steve";
  this.gender = "Male";
  this.sayHi = function(){    
    alert('Hi');
  }
}
var student1 = new Student();

Object.keys(student1);

function Student(){
  this.title = "Mr.";
  this.name = "Steve";
  this.gender = "Male";
  this.sayHi = function(){    
    alert('Hi');
  }
}
var student1 = new Student();

Object.keys(student1);

function Student(){
  this.title = "Mr.";
  this.name = "Steve";
  this.gender = "Male";
  this.sayHi = function(){    
    alert('Hi');
  }
}
var student1 = new Student();

Object.keys(student1);

Bất kỳ chức năng JavaScript nào sử dụng đối tượng được tạo được gọi là chức năng Constructor.

Sử dụng phương thức đối tượng.Keys () để truy xuất tất cả các thuộc tính cho đối tượng được chỉ định dưới dạng mảng chuỗi.

function Student(){
  this.title = "Mr.";
  this.name = "Steve";
  this.gender = "Male";
  this.sayHi = function(){    
    alert('Hi');
  }
}
var student1 = new Student();

Object.keys(student1);

["title", "name", "gender", "sayHi"]

Sử dụng vòng lặp for-in để truy xuất tất cả các thuộc tính của một đối tượng như được hiển thị bên dưới.

function Student(){
  this.title = "Mr.";
  this.name = "Steve";
  this.gender = "Male";
  this.sayHi = function(){    
    alert('Hi');
  }
}
var student1 = new Student();

//enumerate properties of student1
for(var prop in student1){
  console.log(prop);
}

Mô tả tài sản

Trong JavaScript, mỗi thuộc tính của một đối tượng có mô tả thuộc tính mô tả bản chất của một thuộc tính. Bộ mô tả thuộc tính cho thuộc tính của một đối tượng cụ thể có thể được truy xuất bằng phương pháp

function Student(){
  this.title = "Mr.";
  this.name = "Steve";
  this.gender = "Male";
  this.sayHi = function(){    
    alert('Hi');
  }
}
var student1 = new Student();

Object.keys(student1);

Object.getOwnPropertyDescriptor(object, 'property name')

Phương thức GetOwnPropertyDescriptor trả về một mô tả thuộc tính cho một thuộc tính được xác định trực tiếp trong đối tượng được chỉ định nhưng không được kế thừa từ Prototytpe của Object.

Ví dụ sau đây hiển thị mô tả thuộc tính cho bảng điều khiển.

var person = {
  firstName:'Steve',
  lastName:'Jobs'
};

function Student(){
  this.name = "John";
  this.gender = "Male";
  this.sayHi = function(){
    alert('Hi');
  }
}

var student1 = new Student();

console.log(Object.getOwnPropertyDescriptor(person,'firstName'));
console.log(Object.getOwnPropertyDescriptor(student1,'name'));
console.log(Object.getOwnPropertyDescriptor(student1,'sayHi'));

Object {value: "Steve", writable: true, enumerable: true, configurable: true}
Object {value: "John", writable: true, enumerable: true, configurable: true}
Object {value: function, writable: true, enumerable: true, configurable: true}

Như bạn có thể thấy trong đầu ra ở trên, bộ mô tả thuộc tính bao gồm 4 thuộc tính quan trọng sau đây.

Object.defineProperty()

Phương thức đối tượng.defineProperty () xác định một thuộc tính mới trên đối tượng được chỉ định hoặc sửa đổi một mô tả thuộc tính hoặc thuộc tính hiện có.

Object.defineProperty(object, 'property name', descriptor)

Ví dụ sau đây cho thấy sửa đổi mô tả thuộc tính.

'use strict'

function Student(){
  this.name = "Steve";
  this.gender = "Male";

}

var student1 = new Student();

Object.defineProperty(student1,'name', { writable:false} );

try
{
    student1.name = "James";
    console.log(student1.name);
}
catch(ex)
{
    console.log(ex.message);
}

Ví dụ trên, nó sửa đổi thuộc tính có thể ghi của thuộc tính

["title", "name", "gender", "sayHi"]

function Student(){
  this.title = "Mr.";
  this.name = "Steve";
  this.gender = "Male";
  this.sayHi = function(){    
    alert('Hi');
  }
}
var student1 = new Student();

Object.keys(student1);

["title", "name", "gender", "sayHi"]

["title", "name", "gender", "sayHi"]

["title", "name", "gender", "sayHi"]

Theo cách tương tự, bạn có thể thay đổi bộ mô tả thuộc tính Enumable như được hiển thị bên dưới.

function Student(){
  this.name = "Steve";
  this.gender = "Male";
}

var student1 = new Student();

//enumerate properties of student1
for(var prop in student1){
  console.log(prop);
}

//edit enumerable attributes of name property to false
Object.defineProperty(student1,'name',{ enumerable:false });

console.log('After setting enumerable to false:');

for(var prop in student1){
  console.log(prop);
}

function Student(){
  this.title = "Mr.";
  this.name = "Steve";
  this.gender = "Male";
  this.sayHi = function(){    
    alert('Hi');
  }
}
var student1 = new Student();

Object.keys(student1);

Trong ví dụ trên, nó hiển thị tất cả các thuộc tính sử dụng vòng lặp cho trong. Nhưng, một khi bạn thay đổi thuộc tính Enumable thành FALSE thì nó sẽ không hiển thị thuộc tính

["title", "name", "gender", "sayHi"]

Phương thức Object.defineProperty () cũng có thể được sử dụng để sửa đổi thuộc tính có thể định cấu hình của một thuộc tính hạn chế thay đổi bất kỳ thuộc tính mô tả thuộc tính nào hơn nữa.

Ví dụ sau đây cho thấy thay đổi thuộc tính có thể định cấu hình.

function Student(){
  this.title = "Mr.";
  this.name = "Steve";
  this.gender = "Male";
  this.sayHi = function(){    
    alert('Hi');
  }
}
var student1 = new Student();

Object.keys(student1);

Trong ví dụ trên,

["title", "name", "gender", "sayHi"]

["title", "name", "gender", "sayHi"]

Xác định tài sản mới

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

function Student(){
  this.title = "Mr.";
  this.name = "Steve";
  this.gender = "Male";
  this.sayHi = function(){    
    alert('Hi');
  }
}
var student1 = new Student();

Object.keys(student1);