面试题：JavaScript属性特性兼容性与ES5/ES6差异

Question

在ES5和ES6环境下，对象属性特性的兼容性存在哪些显著差异？举例说明如何在代码中优雅地处理这些差异，以确保代码在不同版本JavaScript环境中正常运行，尤其是在处理getter和setter与属性特性的交互时。

Answer 1

ES5 和 ES6 环境下对象属性特性兼容性差异

1. 定义方式
   • ES5：通过 Object.defineProperty 方法定义对象属性特性，包括 value、writable、enumerable 和 configurable 等。例如：

var obj = {};
Object.defineProperty(obj, 'prop', {
    value: 42,
    writable: false,
    enumerable: true,
    configurable: false
});

- **ES6**：除了 `Object.defineProperty`，还可以使用简洁的对象字面量语法来定义属性，对于 `getter` 和 `setter` 有更简洁的写法。例如：

let obj = {
    _prop: 42,
    get prop() {
        return this._prop;
    },
    set prop(value) {
        this._prop = value;
    }
};

2. 兼容性
   • ES5：不支持直接在对象字面量中定义 getter 和 setter，只能通过 Object.defineProperty 来定义。
   • ES6：全面支持对象字面量中定义 getter 和 setter，但在旧环境（如不支持 ES6 的浏览器）中会报错。

优雅处理差异的方法

1. 特性检测
   • 使用 typeof 检测是否支持对象字面量的 getter 和 setter 语法。例如：

if (typeof Object.defineProperty === 'function') {
    // ES5 兼容代码
    var obj = {};
    Object.defineProperty(obj, 'prop', {
        get: function() {
            return this._prop;
        },
        set: function(value) {
            this._prop = value;
        },
        enumerable: true,
        configurable: true
    });
} else {
    // 不支持 ES5 特性，采用其他兼容方案（如使用闭包模拟）
    function createObj() {
        let _prop = 42;
        return {
            get prop() {
                return _prop;
            },
            set prop(value) {
                _prop = value;
            }
        };
    }
    var obj = createObj();
}

2. 使用 Babel 等转译工具
   • 配置 Babel 将 ES6 代码转译为 ES5 代码，确保在旧环境中也能正常运行。例如，对于以下 ES6 代码：

let obj = {
    _prop: 42,
    get prop() {
        return this._prop;
    },
    set prop(value) {
        this._prop = value;
    }
};

- Babel 转译后会生成类似 ES5 的代码：

var obj = {
    _prop: 42
};
Object.defineProperty(obj, 'prop', {
    get: function() {
        return this._prop;
    },
    set: function(value) {
        this._prop = value;
    },
    enumerable: true,
    configurable: true
});

通过以上方法，可以有效处理 ES5 和 ES6 在对象属性特性兼容性上的差异，确保代码在不同版本 JavaScript 环境中正常运行。