发帖
翼度科技»论坛 › 编程开发 › JavaScript › 查看内容

JavaScript之Object.defineProperty()

荆炜

6

主题

6

帖子

18

积分

新手上路

Rank: 1

积分
18
显示全部楼层
1. 对象的定义与赋值

经常使用的定义与赋值方法obj.prop =value或者obj['prop']=value
  1. let Person = {};
  2. Person.name = "Jack";
  3. Person["gender"] = "female";
  4. console.log(Person.name); // Jack
  5. console.log(Person.gender); // female
  6. console.log(Person); // {name: 'Jack', gender: 'female'}
复制代码
2. Object.defineProperty()语法说明

Object.defineProperty()的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性
  1. Object.defineProperty(obj, prop, desc)
复制代码

  • obj 需要定义属性的当前对象
  • prop 当前需要定义的属性名
  • desc 属性描述符
一般通过为对象的属性赋值的情况下，对象的属性可以修改也可以删除，但是通过Object.defineProperty()定义属性，通过描述符的设置可以进行更精准的控制对象属性。
3. 属性的特性以及内部属性

javacript 有三种类型的属性

  • 命名数据属性：拥有一个确定的值的属性。这也是最常见的属性
  • 命名访问器属性：通过getter和setter进行读取和赋值的属性
  • 内部属性：由JavaScript引擎内部使用的属性，不能通过JavaScript代码直接访问到，不过可以通过一些方法间接的读取和设置。比如，每个对象都有一个内部属性[[Prototype]]，你不能直接访问这个属性，但可以通过Object.getPrototypeOf()方法间接的读取到它的值。虽然内部属性通常用一个双吕括号包围的名称来表示，但实际上这并不是它们的名字，它们是一种抽象操作，是不可见的，根本没有上面两种属性有的那种字符串类型的属性
4. 属性描述符

通过Object.defineProperty()为对象定义属性，有两种形式，且不能混合使用，分别为数据描述符，存取描述符，下面分别描述下两者的区别：
1. 数据描述符 --特有的两个属性（value,writable）

注意：当使用了writable和value属性，不允许使用getter或setter这两个方法


  • writable: 描述对象是否可写(是否只读)

    • 当我们之间在一个对象上定义某个属性时, writable默认为true
    • 当我们通过属性描述符定义一个属性时,  writable默认为false

  1. let Person = {}
  2. Object.defineProperty(Person, 'name', {
  3.    value: 'jack',
  4.    writable: true // 是否可以改变
  5. })
复制代码
  1. let Person = {};
  2. Object.defineProperty(Person, "name", {
  3.     value: "Jack",
  4.     // writable默认值是false, 不能改变属性的值
  5. });
  6. Person.name = "rose";
  7. console.log(Person.name); // Jack
  8. -------------------------------------------------------------------------------------------
  9. let Person = {};
  10. Object.defineProperty(Person, "name", {
  11.     value: "Jack",
  12.     writable: true, // 可以改变value值
  13. });
  14. Person.name = "rose";
  15. console.log(Person.name); // rose
复制代码
注意，如果描述符中的某些属性被省略，会使用以下默认规则：
属性名默认值valueundefinedgetundefinedsetundefinedwritablefalseenumerablefalseconfigurablefalse2. 存取描述符 --是由一对 getter、setter 函数功能来描述的属性

注意：当使用了getter或setter方法，不允许使用writable和value这两个属性
get：一个给属性提供getter的方法，如果没有getter则为undefined。该方法返回值被用作属性值。默认为undefined。
set：一个给属性提供setter的方法，如果没有setter则为undefined。该方法将接受唯一参数，并将该参数的新值分配给该属性。默认值为undefined。
  1. let Person = {}
  2. let temp = null
  3. Object.defineProperty(Person, 'name', {
  4.   get: function () {
  5.     return temp
  6.   },
  7.   set: function (val) {
  8.     temp = val
  9.   }
  10. })
复制代码
  1. let Person = {};
  2. let temp = null;
  3. Object.defineProperty(Person, "name", {
  4.     get: function () {
  5.         return temp;
  6.     },
  7.     set: function (val) {
  8.         temp = val;
  9.     },
  10. });
  12. Person.name = "Jack";
  13. console.log(Person.name, temp); // Jack Jack
  15. temp = "rose";
  16. console.log(Person.name, temp); // rose rose
复制代码
3. 存取器描述

当使用存取器描述属性的特性的时候，允许设置以下特性属性：
  1. var obj = {};
  2. Object.defineProperty(obj, "newKey", {
  3.     get: function () {} | undefined,
  4.     set: function (value) {} | undefined,
  5.     configurable: true | false,
  6.     enumerable: true | false,
  7. });
复制代码
getter/setter:
当设置或获取对象的某个属性的值的时候，可以提供getter/setter方法。

  • getter 是一种获得属性值的方法
  • setter是一种设置属性值的方法。
在特性中使用get/set属性来定义对应的方法。
  1. var obj = {};
  2. var initValue = "hello";
  3. Object.defineProperty(obj, "key", {
  4.     get: function () {
  5.         //当获取值的时候触发的函数
  6.         return initValue;
  7.     },
  8.     set: function (value) {
  9.         //当设置值的时候触发的函数,设置的新值通过参数value拿到
  10.         initValue = value;
  11.     },
  12. });
  13. //获取值
  14. console.log(obj.key); //hello
  16. //设置值
  17. obj.key = "change value";
  19. console.log(obj.key); //change value
复制代码
注意：get或set不是必须成对出现，任写其一就可以。如果不设置方法，则get和set的默认值为undefined
4. 数据描述符和存取描述均具有以下描述符


  • configrable 描述属性是否配置，以及可否可以通过delete删除(是否可配置)

    • 当我们之间在一个对象上定义某个属性时, configrable默认为true
    • 当我们通过属性描述符定义一个属性时,  configrable默认为false

  • enumerable 描述属性是否会出现在for in 或者 Object.keys()的遍历中(是否枚举)

    • 当我们之间在一个对象上定义某个属性时, enumerable默认为true
    • 当我们通过属性描述符定义一个属性时,  enumerable默认为false

1. configrable 代码片段分析

configurable:false不能删除属性:
  1. let Person = {};
  2. Object.defineProperty(Person, "name", {
  3.     value: "Jack",
  4.     configurable: false,
  5. });
  7. console.log(delete Person.name); // Cannot delete property 'name' of #<Object>
复制代码
configurable:false不能重新定义属性:
  1. let Person = {};
  2. Object.defineProperty(Person, "name", {
  3.     value: "Jack",
  4.     configurable: false,
  5. });
  7. Object.defineProperty(Person, "name", {
  8.     value: "rose", // Cannot redefine property: name
  9. });
复制代码
在configurable:false但writable为true`的情况下可以修改属性值:
  1. let Person = {};
  2. Object.defineProperty(Person, "name", {
  3.     value: "Jack",
  4.     configurable: false,
  5.     writable: true,
  6. });
  8. // 通过属性定义的形式可以修改name的值
  9. Object.defineProperty(Person, "name", {
  10.     value: "rose",
  11. });
  13. console.log(Person.name); // rose
  15. // 通过赋值的形式可以修改name的值
  16. Person.name = 'zgc'
  17. console.log(Person.name);
复制代码
在configurable:true但writable为false的情况下可以通过属性定义的形式可以修改name的值:
  1. let Person = {};
  2. Object.defineProperty(Person, "name", {
  3.     value: "Jack",
  4.     configurable: true,
  5.     writable: false,
  6. });
  8. // 通过属性定义的形式可以修改name的值
  9. Object.defineProperty(Person, "name", {
  10.     value: "rose",
  11. });
  13. console.log(Person.name); // rose
  15. // 通过赋值的形式不可以修改, 因为writable为flse
  16. Person.name = "zgc";
  17. console.log(Person.name);
复制代码
2. enumerable 代码片段分析
  1. let Person = {};
  2. Object.defineProperty(Person, "name", {
  3.     value: "Jack",
  4.     configurable: false,
  5.     writable: false, // 默认值
  6. });
  8. Person.gender = "male";
  10. Object.defineProperty(Person, "age", {
  11.     value: 24,
  12.     enumerable: true,
  13. });
  15. console.log(Object.keys(Person)); // ['gender', 'age']
  16. for (let k in Person) {
  17.     console.log(k); // gender, age
  18. }
复制代码
注意：以下二种区别
  1. let Person = {};
  2. Person.gender = "male";
  3. // 等价于
  4. Object.defineProperty(Person, "gender", {
  5.     value: "male",
  6.     configurable: true,
  7.     enumerable: true,
  8.     writable: true,
  9. });
  11. Object.defineProperty(Person, "age", {
  12.     value: 24,
  13. });
  14. // 等价于
  15. Object.defineProperty(Person, "age", {
  16.     value: 24,
  17.     configurable: false,
  18.     enumerable: false,
  19.     writable: false,
  20. });
复制代码
来源:https://www.cnblogs.com/pigke/p/17487536.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！

上一篇: JavaScript 数组展平方法： flat() 和 flatMap()

下一篇: JavaScript的数学计算库：decimal.js

发表于 2023-6-17 16:09:28

举报 回复 使用道具

返回列表 发新帖

Archiver|手机版|小黑屋|翼度科技

Copyright © 2001-2020, Tencent Cloud.　Powered by Discuz! X3.4