ES6 中的对象方法 Object.defineProperty 的使用方法及示例-JavaScript中文网-JavaScript教程资源分享门户

ES6 中的对象方法 Object.defineProperty 的使用方法及示例

可能你在开发中需要用到 JavaScript 对象的属性描述符，比如属性是否可枚举，是否可更改或者是否可被删除。Object.defineProperty() 这个方法为开发者提供了一个统一的方式来定义或修改对象属性的描述符，这使得我们可以轻松地规范和控制对象属性的访问和修改。

Object.defineProperty() 的语法如下：

Object.defineProperty(obj, prop, descriptor)

obj：需要定义属性的对象
prop：需要定义或修改的对象属性名字
descriptor：属性描述符

descriptor 参数是一个对象，它包含以下几个可选属性：

configurable：表示对象属性是否可以被删除，默认为 false
enumerable：表示对象属性是否可以被 for-in 循环枚举，默认为 false
value：表示对象属性的值，默认为 undefined
writable：表示对象属性的值是否可以被修改，默认为 false
get：表示该属性的 getter 函数
set：表示该属性的 setter 函数

现在我们来看一个具体的使用实例，一个银行账户的例子。

// javascriptcn.com 代码示例
let account = {}

Object.defineProperty(account, 'name', {
    configurable: false, // 不允许删除属性
    enumerable: true, // 允许枚举属性
    get: function () {
        return this._name
    },
    set: function (value) {
        if (!value) {
            console.log('请输入账户名')
            return
        }
        this._name = value
    }
})

Object.defineProperty(account, 'balance', {
    configurable: false, // 不允许删除属性
    enumerable: true, // 允许枚举属性
    get: function () {
        return this._balance
    },
    set: function (value) {
        if (isNaN(value)) {
            console.log('请输入数字')
            return
        }
        this._balance = value
    }
})

在这个例子中，我们使用了 Object.defineProperty() 来定义银行账户的 name 和 balance 两个属性。这两个属性都不允许被删除，允许被枚举。同时，我们也为这两个属性分别定义了 getter 和 setter 函数。

现在，我们可以用以下代码来测试这个银行账户对象：

account.name = '小明' // 设置账户名
account.balance = 2000 // 存入 2000 元
console.log(`${account.name} 的账户余额为：${account.balance} 元`)

当我们运行测试代码时，我们可以看到以下输出：

小明 的账户余额为：2000 元

因此，我们成功的使用 Object.defineProperty() 对象方法定义了银行账户对象的属性，并且有效的控制了银行账户的属性访问和修改。

总结

Object.defineProperty() 是一个非常有用的方法，它为开发者提供了一种更灵活和严谨的方式来定义和修改对象属性的描述符。在开发中，我们可以使用这个方法来规范和控制对象属性的访问和修改。通过本文的学习，相信你已经学会了 Object.defineProperty() 的使用方法和相关注意事项，希望对你的前端开发工作有所帮助！

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6530d5d97d4982a6eb265f77