Getters và Setters trong JavaScript
Tổng quat
Getter và setter trong JavaScript được sử dụng để xác định tính chất tính , hoặc accessors . Thuộc tính được tính là một thuộc tính sử dụng hàm để lấy hoặc đặt giá trị đối tượng. Lý thuyết cơ bản là làm một cái gì đó như thế này:
var user = { /* ... object with getters and setters ... */ };
user.phone = '+1 (123) 456-7890'; // updates a database
console.log( user.areaCode ); // displays '123'
console.log( user.area ); // displays 'Anytown, USA'
Điều này hữu ích để tự động thực hiện những điều phía sau hậu trường khi một thuộc tính được truy cập, như giữ các số trong phạm vi, định dạng lại chuỗi, kích hoạt các sự kiện thay đổi giá trị, cập nhật dữ liệu quan hệ, cung cấp quyền truy cập vào các thuộc tính riêng tư, v.v.
Các ví dụ dưới đây cho thấy cú pháp cơ bản, mặc dù chúng chỉ đơn giản nhận và đặt giá trị đối tượng bên trong mà không làm gì đặc biệt. Trong trường hợp thực tế, bạn sẽ sửa đổi giá trị đầu vào và / hoặc đầu ra cho phù hợp với nhu cầu của bạn, như đã lưu ý ở trên.
lấy / đặt từ khóa
ECMAScript 5 hỗ trợ getvà settừ khóa để xác định các thuộc tính được tính toán. Chúng hoạt động với tất cả các trình duyệt hiện đại trừ IE 8 trở xuống.
var foo = {
bar : 123,
get bar(){ return bar; },
set bar( value ){ this.bar = value; }
};
foo.bar = 456;
var gaz = foo.bar;
Getters và Setters tùy chỉnh
getvà setkhông dành riêng các từ, vì vậy chúng có thể bị quá tải để tạo các chức năng thuộc tính được tính toán trên nhiều trình duyệt tùy chỉnh của riêng bạn. Điều này sẽ làm việc trong bất kỳ trình duyệt.
var foo = {
_bar : 123,
get : function( name ){ return this[ '_' + name ]; },
set : function( name, value ){ this[ '_' + name ] = value; }
};
foo.set( 'bar', 456 );
var gaz = foo.get( 'bar' );
Hoặc đối với một cách tiếp cận nhỏ gọn hơn, một chức năng duy nhất có thể được sử dụng.
var foo = {
_bar : 123,
value : function( name /*, value */ ){
if( arguments.length < 2 ){ return this[ '_' + name ]; }
this[ '_' + name ] = value;
}
};
foo.value( 'bar', 456 );
var gaz = foo.value( 'bar' );
Tránh làm một cái gì đó như thế này, có thể dẫn đến phình mã.
var foo = {
_a : 123, _b : 456, _c : 789,
getA : function(){ return this._a; },
getB : ..., getC : ..., setA : ..., setB : ..., setC : ...
};
Đối với các ví dụ trên, tên thuộc tính nội bộ được trừu tượng hóa bằng dấu gạch dưới để không khuyến khích người dùng thực hiện đơn giản foo.barso với foo.get( 'bar' )và nhận giá trị "chưa được xử lý". Bạn có thể sử dụng mã có điều kiện để làm những việc khác nhau tùy thuộc vào tên của tài sản được truy cập (thông qua nametham số).
Object.defineProperty ()
Sử dụng Object.defineProperty()là một cách khác để thêm getters và setters và có thể được sử dụng trên các đối tượng sau khi chúng được xác định. Nó cũng có thể được sử dụng để thiết lập các hành vi có thể cấu hình và vô số. Cú pháp này cũng hoạt động với IE 8, nhưng không may chỉ trên các đối tượng DOM.
var foo = { _bar : 123 };
Object.defineProperty( foo, 'bar', {
get : function(){ return this._bar; },
set : function( value ){ this._bar = value; }
} );
foo.bar = 456;
var gaz = foo.bar;
__defineGetter __ ()
Cuối cùng, __defineGetter__()là một lựa chọn khác. Nó không được dùng nữa, nhưng vẫn được sử dụng rộng rãi trên web và do đó khó có thể biến mất bất cứ lúc nào sớm. Nó hoạt động trên tất cả các trình duyệt trừ IE 10 trở xuống. Mặc dù các tùy chọn khác cũng hoạt động tốt trên non-IE, vì vậy tùy chọn này không hữu ích.
var foo = { _bar : 123; }
foo.__defineGetter__( 'bar', function(){ return this._bar; } );
foo.__defineSetter__( 'bar', function( value ){ this._bar = value; } );
Cũng đáng chú ý là trong các ví dụ sau, tên nội bộ phải khác với tên người truy cập để tránh đệ quy (nghĩa là foo.bargọi foo.get(bar)cuộc foo.bargọi gọi foo.get(bar)...).
Xem thêm
MDN nhận , thiết lập ,
Object.defineProperty () , __defineGetter __ () , __defineSetter __ () Hỗ trợ Getter
MSDN
IE8