Trình duyệt chéo Getter và Setter

Question

Tính năng này hoạt động trong Chrome/Firefox/Opera hiện đại nhưng không hoạt động trong IE8. Đã không thử nó trong IE9. Làm thế nào tôi có thể làm cho trình duyệt chéo này tương thích, bao gồm IE7 +? (Fiddle here.)

var foo = { 
    get test(){ return 'Works'; } 
}; 

// foo.test should be 'Works' 

Tôi đã nhìn thấy một số sử dụng với __defineGetter__ nhưng điều đó đã ném một lỗi 'phương pháp không được công nhận' trong IE8.

Answer 1

Tôi không tin rằng bạn có thể.

Trong IE8 và thấp hơn, quyền truy cập tài sản chỉ là quyền truy cập tài sản. Không có cách nào để chạy mã chức năng mà không cần gọi hàm một cách rõ ràng.

Tôi nghĩ rằng trong IE8 bạn có thể có với các phần tử DOM, nhưng tôi không tin nó hoạt động cho các đối tượng gốc thông thường.

Answer 2

Bạn không thể, cú pháp không được hỗ trợ trong các trình duyệt không triển khai nó. Nó sẽ được khá một lúc trước khi bạn sẽ có thể sử dụng cú pháp mà không có vấn đề CBC. Hãy biết ơn IE6 là khá nhiều người chết ở Bắc Mỹ.

Answer 3

Có phương thức "definePropery" về cơ bản sẽ cho phép bạn tạo phương thức accessor (getters/setters) trên Objects mà không cần gọi hàm như setProp()/getProp().

Cú pháp hơi kỳ lạ nhưng tôi đã có thể làm việc này trên Firefox, Chrome, Safari và IE9.

Giả sử tôi có đối tượng JavaScript được gọi là "Người".

function Person() 
{ 
// set a default value // 
    this.__name = 'John'; 
// add getter & setter methods // 
    Object.defineProperty(this, "name", { 
     get: function() { 
     // additional getter logic 
      return this.__name; 
     }, 
     set: function(val) { 
      this.__name = val; 
     // additional setter logic 
     } 
    }); 
} 

var p = new Person(); 
console.log(p.name); // 'John' 
p.name = 'Stephen'; 
console.log(p.name); // 'Stephen' 

Thông tin thêm trên trang web của Mozilla here.

Answer 4

Đây là workaround cho IE6/7/8. Tôi đã thực hiện bài kiểm tra và nó hoạt động rất tốt!

Cập nhật: Các liên kết bị hỏng, bạn sẽ nhìn thấy mã số từ thử nghiệm của tôi ở đây:

// Super amazing, cross browser property function, based on http://thewikies.com/ 
function addProperty(obj, name, onGet, onSet) { 

    // wrapper functions 
    var 
     oldValue = obj[name], 
     getFn = function() { 
      return onGet.apply(obj, [oldValue]); 
     }, 
     setFn = function (newValue) { 
      return oldValue = onSet.apply(obj, [newValue]); 
     }; 

    // Modern browsers, IE9+, and IE8 (must be a DOM object), 
    if (Object.defineProperty) { 

     Object.defineProperty(obj, name, { 
      get: getFn, 
      set: setFn 
     }); 

    // Older Mozilla 
    } else if (obj.__defineGetter__) { 

     obj.__defineGetter__(name, getFn); 
     obj.__defineSetter__(name, setFn); 

    // IE6-7 
    // must be a real DOM object (to have attachEvent) and must be attached to document (for onpropertychange to fire) 
    } else { 

     var onPropertyChange = function (e) { 

      if (event.propertyName == name) { 
       // temporarily remove the event so it doesn't fire again and create a loop 
       obj.detachEvent("onpropertychange", onPropertyChange); 

       // get the changed value, run it through the set function 
       var newValue = setFn(obj[name]); 

       // restore the get function 
       obj[name] = getFn; 
       obj[name].toString = getFn; 

       // restore the event 
       obj.attachEvent("onpropertychange", onPropertyChange); 
      } 
     }; 

     obj[name] = getFn; 
     obj[name].toString = getFn; 

     obj.attachEvent("onpropertychange", onPropertyChange); 

    } 
}