Truy cập đối tượng trong JavaScript

Truy cập器 (Getter và Setter) trong JavaScript

ECMAScript 5 (2009) đã giới thiệu Getter và Setter.

Getter và Setter cho phép bạn định nghĩa bộ truy cập đối tượng (thuộc tính được tính toán).

JavaScript Getter (ký tự từ khóa get)

Ví dụ này sử dụng lang Thuộc tính để lấy language Giá trị thuộc tính.

thực thể

// Tạo đối tượng:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "en",
  get lang() {
    return this.language;
  }
};
// Sử dụng getter để hiển thị dữ liệu từ đối tượng:
document.getElementById("demo").innerHTML = person.lang;

Thử ngay

JavaScript Setter (ký tự từ khóa set)

Ví dụ này sử dụng lang Thuộc tính để đặt language Giá trị thuộc tính.

thực thể

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "",
  set lang(lang) {
    this.language = lang;
  }
};
// Sử dụng setter để đặt thuộc tính đối tượng:
person.lang = "en";
// Hiển thị dữ liệu từ đối tượng:
document.getElementById("demo").innerHTML = person.language;

Thử ngay

Hàm JavaScript hay Getter?

Sự khác biệt giữa hai ví dụ dưới đây là gì?

Ví dụ 1

var person = {
  firstName: "Bill",
  lastName : "Gates",
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
// Sử dụng phương pháp để hiển thị dữ liệu từ đối tượng:
document.getElementById("demo").innerHTML = person.fullName();

Thử ngay

Ví dụ 2

var person = {
  firstName: "Bill",
  lastName : "Gates",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
};
// Sử dụng getter để hiển thị dữ liệu từ đối tượng:
document.getElementById("demo").innerHTML = person.fullName;

Thử ngay

Ví dụ 1 truy cập fullName dưới dạng hàm: person.fullName().

Ví dụ 2 truy cập thuộc tính fullName: person.fullName.

Ví dụ thứ hai cung cấp ngữ pháp đơn giản hơn.

Chất lượng dữ liệu

Khi sử dụng getter và setter, JavaScript có thể đảm bảo chất lượng dữ liệu tốt hơn.

Trong ví dụ này, sử dụng lang Thuộc tính được trả về dưới dạng chữ hoa language Giá trị thuộc tính:

thực thể

// Tạo đối tượng:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "en",
  get lang() {
    return this.language.toUpperCase();
  }
};
// Sử dụng getter để hiển thị dữ liệu từ đối tượng:
document.getElementById("demo").innerHTML = person.lang;

Thử ngay

Trong ví dụ này, sử dụng lang thuộc tính sẽ lưu trữ giá trị in hoa trong language trong thuộc tính:

thực thể

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "",
  set lang(lang) {
    this.language = lang.toUpperCase();
  }
};
// Sử dụng setter để đặt thuộc tính đối tượng:
person.lang = "en";
// Hiển thị dữ liệu từ đối tượng:
document.getElementById("demo").innerHTML = person.language;

Thử ngay

Tại sao sử dụng Getter và Setter?

  • Nó cung cấp ngữ pháp ngắn gọn hơn
  • Nó cho phép ngữ pháp thuộc tính và phương pháp giống nhau
  • Nó có thể đảm bảo chất lượng dữ liệu tốt hơn
  • hữu ích cho công việc nền

một thực thể bộ đếm

thực thể

var obj = {
  counter : 0,
  get reset() {
    this.counter = 0;
  },
  get increment() {
    this.counter++;
  },
  get decrement() {
    this.counter--;
  },
  set add(value) {
    this.counter += value;
  },
  set subtract(value) {
    this.counter -= value;
  }
};
// Thao tác bộ đếm:
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;
Object.defineProperty()

Thử ngay

Object.defineProperty() cách này cũng có thể được sử dụng để thêm Getter và Setter:

thực thể

// 定义对象
var obj = {counter : 0};
// 定义 setters
Object.defineProperty(obj, "reset", {
  get : function () {this.counter = 0;}
});
Object.defineProperty(obj, "increment", {
  get : function () {this.counter++;}
});
Object.defineProperty(obj, "decrement", {
  get : function () {this.counter--;}
});
Object.defineProperty(obj, "add", {
  set : function (value) {this.counter += value;}
});
Object.defineProperty(obj, "subtract", {
  set : function (value) {this.counter -= value;}
});
// Thao tác bộ đếm:
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;

Thử ngay

Hỗ trợ trình duyệt

Internet Explorer 8 hoặc các phiên bản trước không hỗ trợ Getter và Setter:

Có 9.0 Có Có Có