Getter setter lớp JavaScript

Phạm vi của Điều khoản

Trong bài này chúng ta sẽ tìm hiểu

• Cách truy cập các thuộc tính của đối tượng javascript
• Các thuộc tính bên trong của các đối tượng javascript và giá trị của chúng ảnh hưởng như thế nào đến đầu ra của chúng tôi
• Sự khác biệt giữa hàm thông thường và bộ truy cập đối tượng trong javascript

Trình mô tả truy cập

Hãy tưởng tượng bạn phải làm thẻ ID cho 100 sinh viên của một chi nhánh. Tất cả các thẻ này sẽ có các trường giống nhau tôi. e. tên, lớp, rollNo, v.v. Mỗi CMND sẽ có một giá trị khác nhau cho các trường này

Nếu chúng ta chuẩn bị thực hiện tác vụ trên bằng Lập trình hướng đối tượng, thì "Thẻ" có thể là một lớp và các ID riêng lẻ có thể là đối tượng của nó. Bây giờ câu hỏi là, "Làm cách nào để chúng tôi gán giá trị cho các trường này? Hoặc Làm cách nào để chúng tôi truy cập các trường này?"

Bộ mô tả thuộc tính là một đối tượng JavaScript đơn giản được liên kết với từng thuộc tính của đối tượng chứa thông tin về thuộc tính đó, chẳng hạn như giá trị của nó và siêu dữ liệu khác. Bộ mô tả thuộc tính có trong các đối tượng có hai hương vị chính. bộ mô tả dữ liệu và bộ mô tả truy cập. Bộ mô tả dữ liệu là thuộc tính có giá trị, có thể ghi hoặc không

Accessor Descriptors trong Javascript là các thuộc tính được mô tả bởi một cặp hàm getter-setter. Các thuộc tính của bộ truy cập không có giá trị và không thể ghi được, mà thay vào đó, chúng phải nhận và đặt các hàm

Ghi chú. Bộ mô tả truy cập là các đối tượng

Một Accessor Descriptor có thể có

• được. Nó là một chức năng không có đối số. Các phương thức getter Javascript được sử dụng để truy cập các thuộc tính của một đối tượng
• bố trí. một chức năng với một đối số. Các phương thức setter Javascript được sử dụng để thay đổi giá trị của một đối tượng
• đếm được. Nó xác định các thuộc tính có thể được xem nếu nó được lặp lại bằng cách sử dụng vòng lặp for…in hoặc một Đối tượng
• có thể định cấu hình. Nó kiểm soát xem một thuộc tính có thể bị xóa khỏi đối tượng hay không hoặc liệu các thuộc tính của nó có thể được thay đổi hay không

JavaScript Getter [Từ khóa get]

Cú pháp get trong Javascript liên kết một thuộc tính đối tượng với một hàm sẽ được gọi khi thuộc tính đó được tra cứu

Theo thuật ngữ của giáo dân, trình thu thập Javascript cung cấp cho chúng tôi một cách để xác định thuộc tính của Đối tượng. Các phương thức getter Javascript chủ yếu được sử dụng để truy cập các thuộc tính của một đối tượng

Ghi chú. Giá trị thuộc tính của đối tượng không được tính cho đến khi nó được truy cập

cú pháp

{get prop[] { … } }
{get [expression][] { … } }
chỗ dựa. Đó là tên của thuộc tính được sử dụng để liên kết với hàm được cung cấp
sự diễn đạt. Chúng ta cũng có thể sử dụng các biểu thức cho tên thuộc tính được tính toán để liên kết với hàm đã cho. Nó là một bổ sung ES6
Thí dụ
//Declaring a class Person
class Person{
    
    // Construct to assign the name attribute
    constructor[name]{
        this.name = name;
    }
    
    // accessing name attribute using getter
    get name[]{
        return this.name;
    }
}

JavaScript Setter [Bộ từ khóa]

Cú pháp thiết lập liên kết một thuộc tính đối tượng với một hàm sẽ được gọi khi có nỗ lực thiết lập thuộc tính đó

Bộ Javascript thực thi bất cứ khi nào một thuộc tính cụ thể bị thay đổi. Nói chung, Setters trong javascript được sử dụng tương ứng với getters để tạo một loại thuộc tính giả. Các phương thức setter Javascript được sử dụng để thay đổi giá trị của một đối tượng

cú pháp

{set prop[val] { . . . }}
{set [expression][val] { . . . }}
chỗ dựa. Tên của thuộc tính để liên kết với hàm đã cho
val. Bí danh cho biến chứa giá trị đã cố gắng gán cho prop
sự diễn đạt. Từ ECMAScript 2015 trở đi, chúng ta cũng có thể sử dụng các biểu thức cho tên thuộc tính được tính toán để liên kết với hàm đã cho
Thí dụ
// Declaring a class Person
class Person{
    constructor[name]{
        console.log[`construtor is called`];
    }
    
    // Setter to assign value to the name attribute
    set name[name]{
        this.name = name;
    }
}

đếm được

Một đối tượng JavaScript về cơ bản là một danh sách các cặp khóa-giá trị không có thứ tự. Vì vậy cho. trong các vòng lặp thường được sử dụng để truy cập các thuộc tính của các đối tượng

Thuộc tính liệt kê trong javascript được sử dụng để xác định xem một thuộc tính có thể truy cập được hay không khi các thuộc tính của đối tượng được liệt kê bởi lệnh for. trong vòng lặp

Ghi chú. Theo mặc định, tất cả các thuộc tính đối tượng được tạo bởi trình khởi tạo hoặc phép gán được liệt kê

Thí dụ

//Creating an object named 'student'
const student = {
    firstName: 'Peter',
    lastName: 'Parker'
};

//assigning a new property 'age' to student object
student.age = 22;

//iterating through the 'student' object
for [const key in student] {
    console.log[key];
}
đầu ra
Giải thích ví dụ
Trong ví dụ trên, các thuộc tính firstName, lastName được tạo bởi bộ khởi tạo và thuộc tính age được tạo bởi phép gán. Do đó, cả ba sẽ được liệt kê và do đó sẽ có thể truy cập được bằng khóa trong for. trong vòng lặp
Làm cách nào để thay đổi thuộc tính đếm được của một thuộc tính?
Thuộc tính liệt kê bên trong của một thuộc tính có thể được thay đổi bằng cách sử dụng Object. phương thứcdefineProperty[]

Ghi chú. đối tượng. defineProperty[] đã được thảo luận chi tiết trong phần tiếp theo

Thí dụ

//Creating an object named 'student'
const student = {
    firstName: 'Peter',
    lastName: 'Parker'
};

//assigning a new property 'age' to student object
student.age = 22;

//Setting the 'enumerable' property for the 'lastName' false.
Object.defineProperty[student, 'lastName', {
    enumerable: false
}];

//iterating through the 'student' object
for [const key in student] {
    console.log[key];
}
đầu ra

  

Giải thích ví dụ
Trong ví dụ trên, định nghĩa đối tượng tương tự như định nghĩa của đối tượng trước nhưng trong ví dụ này, thuộc tính 'lastName' được tạo với cờ liệt kê được đặt thành false, do đó nó không hiển thị trong for. trong vòng lặp

cấu hình

Thuộc tính có thể định cấu hình trong javascript có thể sửa đổi hành vi của các thuộc tính của đối tượng. Nó có thể làm cho chúng không thể đếm được, không thể ghi hoặc thậm chí không thể định cấu hình. Các thuộc tính có thể định cấu hình là những thuộc tính duy nhất có thể bị xóa bằng toán tử xóa. Theo mặc định, giá trị của nó là true

Các thuộc tính của đối tượng Javascript chỉ có thể bị xóa hoặc sửa đổi nếu thuộc tính có thể định cấu hình cho đối tượng là đúng, nếu không, chúng ta không thể thay đổi các thuộc tính của đối tượng

Thí dụ

//Creating 'student' object
const student = {
    firstName: 'Peter',
    lastName: 'Parker'
};

student.age = 22;

//Setting 'configurable' attribute for 'lastName' of the student false.
Object.defineProperty[student, 'lastName', {
    configurable: false
}];

//Deleting 'lastName' of the student object. It will return an error as the 'configurable' attribute is set to be false.
delete student.lastName;
đầu ra
Giải thích ví dụ
Trong ví dụ trên, thuộc tính có thể định cấu hình của 'lastName' được đặt thành false, do đó khi sử dụng từ khóa xóa trên thuộc tính, nó sẽ trả về lỗi

Chức năng so với Getters

Sự khác biệt cơ bản giữa hàm và getters là trong lệnh gọi hàm, chúng tôi đang truy cập hàm trong khi trong lệnh gọi getter, chúng tôi đang truy cập thuộc tính. Do đó, cú pháp getter trở nên đơn giản và dễ đọc hơn hàm

Thí dụ

Truy cập thuộc tính đối tượng bằng chức năng

đầu ra

Truy cập thuộc tính đối tượng bằng getter

//Creating Student object
const Student = {
   firstName   : "Peter",
   lastName    : "Parker",
   rollNo      : 10,
    
   //displaying name using function 
   get displayName : function[] {
       return this.firstName+" "+this.lastName;
   }
};

console.log[player.myFunc];
đầu ra
Giải thích ví dụ
Trong ví dụ trên, chúng ta đã tạo một đối tượng Student với các thuộc tính như firstName, lastName, rollNo. Bây giờ trong 'phương thức displayName' và 'bộ thu thập tên hiển thị' tương ứng được sử dụng để truy cập tên của sinh viên. Chúng ta có thể quan sát thấy rằng 'phương thức displayName' đang trả lại trình phát. myFunc[] là một chức năng trong khi 'displayName getter' đang trả về trình phát. myFunc có thể được sử dụng làm tài sản

Chất lượng dữ liệu khi sử dụng Getters và Setters

Getters và Setters được sử dụng để đảm bảo chất lượng dữ liệu tốt hơn. Các phương thức getter và setter trong javascript cung cấp quyền kiểm soát tập trung về cách một trường nhất định được khởi tạo và cung cấp cho người dùng, do đó giúp xác minh và gỡ lỗi dễ dàng hơn

Thí dụ

//creating javascript 'person' object 
var person = {
    language : "JavaScript",
              
    //accessing 'laguage' property using get. The 'toLowerCase[]' method is used to make the value of 'language' into lowercase.
    get lang[] {
     return this.language.toLowerCase[];
  }
};
          
console.log[person.lang];
đầu ra

  

Mục tiêu. định nghĩaProperty[] trong JavaScript

đối tượng. Phương thứcdefineProperty[] trong javascript được sử dụng để xác định một thuộc tính mới trực tiếp trên một đối tượng. đối tượng. defineProperty[] trả về một đối tượng. Nó thường được sử dụng để thay đổi cờ của các thuộc tính

cú pháp

//Declaring a class Person
class Person{
    
    // Construct to assign the name attribute
    constructor[name]{
        this.name = name;
    }
    
    // accessing name attribute using getter
    get name[]{
        return this.name;
    }
}
0
phản đối. Đó là Đối tượng mà thuộc tính được xác định
Chống đỡ. Đó là tên của một thuộc tính được xác định hoặc sửa đổi
mô tả. Nó là bộ mô tả cho thuộc tính được xác định hoặc sửa đổi
Thí dụ
//Declaring a class Person
class Person{
    
    // Construct to assign the name attribute
    constructor[name]{
        this.name = name;
    }
    
    // accessing name attribute using getter
    get name[]{
        return this.name;
    }
}
1
đầu ra
Giải thích ví dụ
Trong ví dụ trên, chúng tôi đang xác định một thuộc tính mới ' thành phố ' bằng cách sử dụng Object. defineProperty có giá trị được đặt là ' California. Do đó, khi gán thuộc tính bằng cách sử dụng ' student. city' đối tượng sẽ được gán thuộc tính

Lý do nên sử dụng Getters và Setters

• Các phương thức Accessor và Mutator đóng gói các lớp của chúng ta, giữ an toàn cho chúng bằng cách ẩn các chi tiết triển khai không cần thiết và chỉ sửa đổi các giá trị nhất định
• Các phương thức Get và Set có cú pháp đơn giản hơn một chút và cũng cho phép chúng tôi nhận ra mục đích của chúng trong nháy mắt
• Cú pháp của getters và setters tương tự như cú pháp của phương thức javascript nên rất dễ học

Getters/Setters thông minh hơn

Getter và setter trong Javascript có thể được sử dụng làm trình bao bọc trên các giá trị thuộc tính “thực”. Điều này được thực hiện để có thêm quyền kiểm soát đối với các hoạt động với chúng bằng cách sử dụng mà chúng tôi có thể thêm các ràng buộc, v.v.

Ví dụ: chúng tôi có thể hạn chế người dùng giữ tên quá ngắn cho thuộc tính tên trong ví dụ đã thảo luận ở trên

Thí dụ

//Declaring a class Person
class Person{
    
    // Construct to assign the name attribute
    constructor[name]{
        this.name = name;
    }
    
    // accessing name attribute using getter
    get name[]{
        return this.name;
    }
}
2
đầu ra
//Declaring a class Person
class Person{
    
    // Construct to assign the name attribute
    constructor[name]{
        this.name = name;
    }
    
    // accessing name attribute using getter
    get name[]{
        return this.name;
    }
}
3
Giải thích ví dụ
Trong ví dụ trên, chúng tôi đã đặt setter với một ràng buộc rằng nếu độ dài của giá trị được truyền cho nó nhỏ hơn 4 thì nó sẽ nhắc cảnh báo. Như vậy khi người dùng. tên được gán 'p' nó báo tin nhắn. người sử dụng. name = "Peter" hoạt động tốt vì độ dài của nó lớn hơn 4

Ghi chú

Về mặt kỹ thuật, mã bên ngoài có thể truy cập tên trực tiếp bằng cách sử dụng người dùng. Tên. Nhưng có một quy ước được biết đến rộng rãi rằng các thuộc tính bắt đầu bằng dấu gạch dưới "" là thuộc tính bên trong và không được chạm vào từ bên ngoài đối tượng

Sử dụng cho khả năng tương thích

Getter và Setter trong Javascript có thể được sử dụng để cho phép kiểm soát thuộc tính dữ liệu "thông thường" bất cứ lúc nào. Nó được thực hiện bằng cách thay thế thuộc tính dữ liệu thông thường bằng getter và setter và thay đổi hành vi của nó

Thí dụ

Giả sử rằng chúng ta đang tạo các đối tượng Người dùng với các thuộc tính tên và tuổi

//Declaring a class Person
class Person{
    
    // Construct to assign the name attribute
    constructor[name]{
        this.name = name;
    }
    
    // accessing name attribute using getter
    get name[]{
        return this.name;
    }
}
4
Nhưng vì một số lý do, chúng tôi đã quyết định sử dụng ngày sinh thay vì tuổi
Bây giờ, chúng ta sẽ làm gì với thuộc tính age đã được sử dụng trong các đoạn mã trước đó? . Nhưng điều này sẽ mất rất nhiều thời gian
 

			
getter và setter trong lớp JavaScript là gì?
			
Các phương thức Javascript  getter được sử dụng để truy cập các thuộc tính của một đối tượng . bố trí. một chức năng với một đối số. Các phương thức setter Javascript được sử dụng để thay đổi giá trị của một đối tượng. đếm được. Nó xác định các thuộc tính có thể được xem nếu nó được lặp lại bằng cách sử dụng vòng lặp for…in hoặc một Đối tượng. 
		
			
Làm cách nào để đặt getter và setter trong JavaScript?
			
Trình lấy và đặt JavaScript . 
 
Ghi chú. Để tạo phương thức getter, từ khóa get được sử dụng
 
Ghi chú. Để tạo một phương thức setter, từ khóa set được sử dụng
 
Ghi chú. Setter phải có chính xác một tham số chính thức
 
		
			
Có getters và setters trong JavaScript không?
			
Trình truy cập JavaScript [Getters và Setters]
 . Getters và setters cho phép bạn xác định Bộ truy cập đối tượng [Thuộc tính được tính toán]. ECMAScript 5 [ES5 2009] introduced Getter and Setters. Getters and setters allow you to define Object Accessors [Computed Properties].
		
			
Làm cách nào để gọi phương thức getter trong JavaScript?
			
Bản trình diễn JavaScript. Hàm Getter . 
 
const obj = {
 
đăng nhập. ['a', 'b', 'c'],
 
nhận sớm nhất[] {
 
trả lại cái này. nhật ký [cái này. đăng nhập. chiều dài - 1];
 
bảng điều khiển. nhật ký [obj. muộn nhất];
 
// đầu ra dự kiến. "c"