Поддержка JavaScript getter в IE8

Проверьте этот код. Это очень простой объект JavaScript, который реализуется с помощью Module Pattern (и вы можете увидеть живой пример в этот адрес скрипта)

var human = function() {
    var _firstName = '';
    var _lastName = ''
    return {
        get firstName() {
            return _firstName;
        }, get lastName() {
            return _lastName;
        }, set firstName(name) {
            _firstName = name;
        }, set lastName(name) {
            _lastName = name;
        }, get fullName() {
            return _firstName + ' ' + _lastName;
        }
    }
}();
human.firstName = 'Saeed';
human.lastName = 'Neamati';
alert(human.fullName);

Однако IE8 не поддерживает ключевые слова JavaScript get и set. Вы можете проверить и посмотреть MDN.

Что мне делать, чтобы сделать этот script совместимым с IE8?

Ответы

Ответ 1

Что мне делать, чтобы сделать этот script совместимым с IE8?

Измените его полностью. Например, вместо использования свойств доступа используйте комбинацию нормальных свойств и функций:

human.firstName = 'Saeed';
human.lastName  = 'Neamati';
alert(human.getFullName());

Кто-то еще предложил использовать объект DOM в IE и добавить свойства с помощью Object.defineProperty(). Хотя это может сработать, я бы настоятельно рекомендовал против этого подхода по нескольким причинам, примером чего является то, что код, который вы пишете, может быть несовместим во всех браузерах:

var human = document.createElement('div');
Object.defineProperty(human, 'firstName', { ... });
Object.defineProperty(human, 'lastName',  { ... });
Object.defineProperty(human, 'children',  { value: 2 });

alert(human.children);
//-> "[object HTMLCollection]", not 2

Это относится как минимум к Chrome. В любом случае это безопаснее и проще писать код, который работает во всех браузерах, которые вы хотите поддерживать. Любое удобство, которое вы получаете от возможности писать код, чтобы использовать преимущества getters и seters, было потеряно в дополнительном коде, который вы написали специально для Internet Explorer 8.

Это, конечно, в дополнение к снижению производительности, тот факт, что вы не сможете использовать цикл for...in для объекта и потенциальную путаницу, возникающую при использовании свойства, которое, по вашему мнению, вы определили, но ранее существовала на объекте DOM.

Ответ 2

Вы не можете (как ответил Энди)

Ближайшей альтернативой будет

var human = function() {
    var _firstName = '';
    var _lastName = '';

    return {
        firstName: function() {
            if (arguments.length === 1) {
                _firstName = arguments[0];
            }
            else {
                return _firstName;
            }
        },
        lastName: function() {
            if (arguments.length === 1) {
                _lastName = arguments[0];
            }
            else {
                return _lastName;
            }
        },
        fullName: function() {
            return _firstName + ' ' + _lastName;
        }
    };
}();

human.firstName('Saeed');
human.lastName('Neamati');

alert(human.fullName());

Демо на http://jsfiddle.net/gaby/WYjqB/2/

Ответ 3

IE8 поддерживает геттеры и сеттеры на узлах DOM, поэтому, если вы действительно хотите иметь геттеры и сеттеры, вы можете сделать это:

var objectForIe8 = $("<div></div>")[0];    
Object.defineProperty(objectForIe8, "querySelector", {
    get: function() {
        return this.name;
    },
    set: function(val) {
        this.name = val+", buddy";  
    }
});
// notice you can overwrite dom properties when you want to use that property name
objectForIe8.querySelector = "I'm not your guy"; 

alert(objectForIe8.querySelector);

Обратите внимание, что это дает вам несколько значительную производительность, поэтому я не буду использовать эту технику, если вам нужно создать тысячи таких объектов. Но если вы не беспокоитесь о производительности этого конкретного объекта, он вас собьет. И если вам не все равно, о производительности, и просто хочу, чтобы она работала, используйте эту технику только для ie8, и вы золотой:)

Ответ 4

Проверьте это на http://robertnyman.com/2009/05/28/getters-and-setters-with-javascript-code-samples-and-demos/

Будущее, и стандартизованный способ ECMAScript, расширения объектов в всевозможные способы - через Object.defineProperty. Вот как Internet Explorer решил внедрить геттеры и сеттеры, но это к сожалению, пока доступно только в Internet Explorer 8, а не в любой другой веб-браузер. Кроме того, IE 8 поддерживает его только на узлах DOM, но будущие версии планируется поддерживать на объектах JavaScript как хорошо.

Вы можете найти тестовые примеры на том же сайте http://robertnyman.com/javascript/javascript-getters-setters.html#object-defineproperty

Object.defineProperty(document.body, "description", {
    get : function () {
        return this.desc;
    },
    set : function (val) {
        this.desc = val;
    }
});
document.body.description = "Content container";

Результат:

document.body.description = "Content container"