Consultez ce code. Il s'agit d'un objet JavaScript très simple qui est implémenté à l'aide de Modèle de module (et vous pouvez voir l'exemple en direct à cette adresse de violon)

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);

Cependant, IE8 ne prend pas en charge les mots clés JavaScript get et set. Vous pouvez à la fois le tester et voir le MDN.

Que dois-je faire pour que ce script soit également compatible avec IE8?

12
Saeed Neamati 17 oct. 2011 à 12:39

4 réponses

Meilleure réponse

Que dois-je faire pour que ce script soit également compatible avec IE8?

Changez-le complètement. Par exemple, au lieu d'utiliser des propriétés d'accesseur, utilisez une combinaison de propriétés et de fonctions normales:

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

Quelqu'un d'autre a suggéré d'utiliser un objet DOM dans IE et d'ajouter les propriétés à l'aide de Object.defineProperty(). Bien que cela puisse fonctionner, je recommande fortement cette approche pour plusieurs raisons, un exemple étant que le code que vous écrivez peut ne pas être compatible avec tous les navigateurs:

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

Cela vaut au moins pour Chrome. Quoi qu'il en soit, il est plus sûr et plus facile d'écrire du code qui fonctionne sur tous les navigateurs que vous souhaitez prendre en charge. Toute commodité que vous gagnez à pouvoir écrire du code pour tirer parti des getters et setters a été perdue sur le code supplémentaire que vous avez écrit, ciblant spécifiquement Internet Explorer 8.

Ceci, bien sûr, en plus de la réduction des performances, du fait que vous ne pourrez pas utiliser une boucle for...in sur l'objet et de la confusion potentielle qui s'ensuit lorsque vous utilisez une propriété que vous pensiez avoir définie mais qui était préexistant sur l'objet DOM.

23
Andy E 18 mars 2014 à 10:06

Vérifiez-le sur http: / /robertnyman.com/2009/05/28/getters-and-setters-with-javascript-code-samples-and-demos/

L'avenir, et la manière normalisée ECMAScript, d'étendre les objets de toutes sortes de manières se font par Object.defineProperty. C'est ainsi qu'Internet Explorer a choisi d'implémenter les getters et les setters, mais il n'est malheureusement disponible jusqu'à présent que dans Internet Explorer 8, et dans aucun autre navigateur Web. En outre, IE 8 ne le prend en charge que sur les nœuds DOM, mais les futures versions sont également prévues pour le prendre en charge sur les objets JavaScript.

Vous pouvez trouver les cas de test sur le même site à 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";

Résultat:

document.body.description = "Content container"
4
Bob Yang 1 déc. 2014 à 09:33

Vous ne pouvez pas ( comme Andy a répondu )

L’alternative la plus proche serait

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());

Démo sur http://jsfiddle.net/gaby/WYjqB/2/

8
Community 23 mai 2017 à 12:09

IE8 prend en charge les getters et setters sur les nœuds DOM, donc si vous voulez vraiment avoir des getters et setters, vous pouvez le faire:

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);

Notez que cela vous donne un impact sur les performances quelque peu significatif, donc je n'utiliserais pas cette technique si vous avez besoin de créer des milliers d'objets comme celui-ci. Mais si vous n'êtes pas préoccupé par les performances de cet objet particulier, cela vous submergera. Et si vous ne vous souciez pas des performances de ie8 et que vous voulez simplement que cela fonctionne, utilisez cette technique pour ie8 uniquement et vous êtes en or:)

5
B T 8 juil. 2013 à 22:17
7791267