经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JSJS库框架 » JavaScript » 查看文章
深入了解Object.defineProperty
来源:cnblogs  作者:一步一步向上爬  时间:2018/9/28 17:22:16  对本文有异议

  原来写文章都是一次写两三个小时写完,偶尔看到一个人的博客了解到还有草稿箱这个功能,所以以后写文章的时候就舒服多了哈哈,可以存起来再发,不需要一口气写完了

  最近一直在看JavaScript高级程序设计,看到defineProperty的时候感受挺深的,因为大名鼎鼎的Vue的双向数据绑定的原理就是根据这个东西来的,所以看到这里的时候长了见识

  要说起Object.defineProperty的话,需要先来介绍一下JavaScript中的对象。

JavaScript中的对象

  面向对象的语言有一个标志,那就是他们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象。ECMAScript中没有类的概念,因此它的对象也与基于类的语言中的对象有所不同。

  JavaScript中的对象定义: 无序属性的集合,其属性可以包含基本值、对象或者函数。严格来讲,这就相当于说对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字,而每个名字都映射到一个值。正因为这样,可以把对象想象成散列表,就是一个键值对,其中的值可以是任意的(数据,函数,对象,数组~~)

  前面balabala一堆概念,真心感觉如果可以理解挺重要的 

 

创建对象

  可以使用构造函数,创建一个Object的实例,然后为其添加属性和方法

  1. var person = new Object();
  2. person.name = 'zhang';
  3. person.age = 123;
  4. person.job = "SoftWare Engineer";
  5. person.sayName = function () {
  6. alert(this.name);
  7. };
  8.  
  9. person.sayName();

   这个例子创建了一个名为person的对象,并为其添加了三个属性(name、age、和job)和一个方法(sayName),其中sayName()方法用于显示this.name 这个会被解析为person.name和值。

  不过现在创建这种对象大都是通过字面量的方式来创建了

  1. var person = {
  2. name: 'zhang',
  3. age: 18,
  4. job: 'SoftWare Engineer',
  5. sayName: function () {
  6. alert(this.name);
  7. }
  8. };
  9.  
  10. person.sayName();

 这种写法的结果和上面的那一种是一样的,这种写法如果你要拓展功能的话就不能再赋值了,也是用到了上面的写法

  1. person.home = 'hebei';
  2. person.showHome = function () {
  3. alert(this.home);
  4. };

这个样子去拓展它。

 

属性类型

    ES5定义只有内部采用的特性时,描述了属性的各种特征。定义这些特性时为了实现JavaScript引擎用的,因此在JavaScript中不能直接访问它们。为了表示特征是内部值,该规范把它们放在了两对儿方括号中,例如[[Enumerable]]

    前面例子中的name,age,job,home,showHome都是属性,引号后面的东西是值,说一下属性的一些东西。

    ECMAScript中有两种属性: 数据属性和访问器属性

数据属性

  数据属性包含一个数据值的位置。在这个位置可以读取和写入值。数据属性有4个描述其行为的特性。

  [[Configurable]] 表示能否通过delete删除属性从而重新定义属性,能够通过属性的特性,或者能否把属性修改为访问器属性,像前面的例子中那样直接在对象上定义的属性,它们的这个特性默认值为true。

  [[Enumerable]] 表示能否通过for-in循环返回属性。像前面例子中那样直接在对象上定义的属性,他们的这个特性默认值为true

  [[Writable]] 表示能够修改属性的值。像前面例子中那样直接在对象上定义的属性,他们的这个特性默认值为true 

  [[Value]] 包含这个属性的数据值。读取属性值的时候,从这个位置读;写入属性值的时候,把新值保存在这个位置。这个特性的默认值为undefined

例子

  1. var person = {
  2. name: 'zhang'
  3. };
  4.  
  5. for(var key in person){
  6. console.log(key);
  7. }
  8. // 他这个属性的value值就是他在上面所定义的那一些,对这个值的任何修改都反映在这个位置
  9. console.log(person.name);
  10.  
  11. person.name = 'goudan';
  12. // 在这里也可以修改,因为[[Writable]]属性默认为true
  13. console.log(person.name);
  14.  
  15. // [[Configurable]] 这个东西为true 表示也可以删除它
  16. delete person.name;
  17. console.log(person.name); // undefined 因为删除之后这个属性就不存在了 [[Value]]特性的默认值为undefined

 重点来了

Object.defineProperty()

  如果要修改 属性默认的特性 就必要要使用ES5的Object。defineProperty()方法。这个方法接收三个参数。

  属性所在的对象、 属性的名字、 一个描述符对象 (其中描述符对象的属性必须是: configurable、enumerable、writeable、和value)设置其中一个或多个值,可以修改对应的特性值

  下面去演示这些例子了,希望你也可以试着去尝试一遍,我举得例子写法可能比较啰嗦,希望没有尝试过的可以试着练习一下

  提示:我后面 // 注释后面的东西 是输出打印的东西,如有错误可以自己具体情况分析一下

writable的情况演示

  1. var person = {
  2. name: 'zhang',
  3. age: 12
  4. };
  5. Object.defineProperty(person,"name",{
  6. writable: false
  7. });
  8. // 读取person.name
  9. console.log(person.name); // zhang
  10. console.log(person.age); //12
  11. // 修改person.name
  12. person.name = 'wang';
  13. person.age = 14;
  14. console.log(person.name); // zhang ?????? 咋没变
  15. console.log(person.age); // 14
  16. // 原因: 那个配置里面也说了的[[Writable]]默认是true,但是改为false之后 就是这个属性不可写,没有写进去的也可以看到是可以正常修改的

  

enumerable的情况演示

  1. var person = {
  2. name: 'zhang',
  3. baba: '1',
  4. job: 'Software Engineer'
  5. };
  6.  
  7. for(var key in person){
  8. console.log(key); // name, baba, job
  9. }
  10. // 三个属性都可以正常的打印出来
    // 配置一下 enumerable
  11. Object.defineProperty(person,'baba',{
  12. enumerable: false
  13. });
  14.  
  15. for(var key1 in person){
  16. console.log(key1); // name job
  17. }
  18. // ??? baba去哪了? 我告诉你去哪了 因为配置了 enumerable: false
  19. console.log(person.baba); // 1 不会影响输出

  

Configurable 的演示

  1. var person = {
  2. name: 'zhang',
  3. age: 12
  4. };
  5.  
  6. Object.defineProperty(person,'name',{
  7. configurable: false
  8. });
  9.  
  10. console.log(person.name); // zhang
  11. console.log(person.age); // 12
  12.  
  13. delete person.name;
  14. console.log(person.name); // zhang
  15. // 刚才删除不是undefined吗 configurable: false就不允许删除了
  16. // 如果声明是严格模式的话 那一句 delete person.name 还会报错
  17. person.name = 'wang'
  18. console.log(person.name); // wang

注意:这个配置有一点需要注意一下

  1. var person = {
  2. name: 'zhang'
  3. };
  4. Object.defineProperty(person,'name',{
  5. configurable: false
  6. });
  7. // 如果以后你有需求你还想删除他的话 你会想到
  8. Object.defineProperty(person,'name',{
  9. configurable: true
  10. });
  11. // 控制台打印错误消息: Uncaught TypeError: Cannot redefine property: name at Function.defineProperty (<anonymous>)
  12. // 这个东西一旦被配置为 false,以后在也不可以把他变为true了 会报错

 

Value的演示

  1. var person = {
  2. name: 'zhang'
  3. };
  4. console.log(person.name); // zhang
  5. Object.defineProperty(person,'name',{
  6. value: 'wang'
  7. });
  8. console.log(person.name); // wang
  9. // 你小子怎么改姓了
  10. person.name = 'zhang'; // 给我改回来
  11. console.log(person.name); //zhang 又是我老张家的孩子了,这个是可以修改回来的

当然了上面的属性只是单独演示的, 这四个属性可以结合起来使用,比如我要定义一个永远都无法改变它的值

  1. var person = {
  2. name: 'zhang'
  3. };
  4. console.log(person.name); // zhang
  5. Object.defineProperty(person,'name',{
  6. writable: false,
  7. value: 'wang'
  8. });
  9.  
  10. console.log(person.name); // wang
  11. // 卧槽你个小兔崽子又改姓了 给我改回来
  12. person.name = 'zhang';
  13. console.log(person.name); // wang
  14. // 你会发现 有些事情发生了就是发生了,永远也回不来了
  15. person.name = 'zhang1';
  16. console.log(person.name); // wang

  注意 在调用 Object.defineProperty()方法时,如果不指定,configurable、enumerable和writable特性的默认值都是true。

  你给我演示这一堆东西到底有啥意思,能干啥。我想告诉你多数情况下可能都没有必要利用Object.defineProperty()方法提供的这些高级功能。不过,理解这些概念对理解JavaScript对象却非常有用

 

访问器属性

  访问器属性不包含数据值;他们包含一对儿getter和setter函数(不过这两个函数都不是必须的)在读取访问器属性时,会调用getter函数,这个函数负责返回有效的值;在写入访问器属性时,会调用setter函数并传入新值,这个函数负责决定如何处理数据。访问器属性有如下4个特性  

[[Configurable]] : 能否修改属性的特性,或者能否把属性修改为数据属性。像前面的例子中那样直接在对象上定义的属性,它们的这个特性默认值为true

[[Enumerable]] : 能否通过for-in循环 *********和上面的一样
[[Get]]: 在读取属性的时候调用。 默认值 undefined
[[Set]]: 在写入属性的时候调用 默认值 undefined

前面两个属性大同小异,几乎是一样的,同样的访问器属性不能直接定义,必须使用Object.defineProperty()来定义.

get和set的演示,

  这个重要

  1. var book = {
  2. _year: 2018,
  3. edition: 1
  4. };
  5.  
  6. Object.defineProperty(book,'year',{
  7. get: function () {
  8. console.log(`获取的时候触发函数`); // 每次获取的时候都会触发这个函数
  9. console.log(this === book); // true 这里面的this就是book的引用 也就是book对象
  10. return this._year;
  11. },
  12. set: function (newValue) {
  13. console.log('修改值的时候触发函数');
  14. // newValue ----- 这里的newValue就是你设置的修改后的值
  15. if(newValue> 2018){
  16. this._year = newValue;
  17. this.edition = newValue - 2018;
  18. }
  19. }
  20. });
  21.  
  22. console.log(book.year);
  23. // 2018 他的值也就是我们返回的值 book._year
  24. // 如果get函数不写返回值就是undefined
  25.  
  26. book.year = 2020; // 修改值的时候触发函数
  27. console.log(book); // {_year: 2019, edition: 2};

  vue双向数据绑定就是这个,当我们在修改数据的时候,会触发set那个函数,就在set函数中执行我们的逻辑,去修改数据,以后我会写一个大概的双向数据绑定的那个代码,会发出来,网上也有好多类似的代码。

上面的代码创建了一个book对象,并给他定义两个默认的属性: _year和edition。

  而访问器属性year则包含一个getter函数和一个setter函数。 getter函数返回_year的值,setter函数修改了_year和edition。这是使用访问器属性的常见方式,即设置一个属性的值会导致其他属性发生变化。

  不一定非要同时制定getter和setter。只指定getter意味着属性是不能写,尝试写入属性会被忽略。在严格模式下,尝试写入至指定了getter函数的属性会抛出错误。类似的,只指定setter函数的属性也不能读,否则在非严格模式下回返回undefined,而在严格模式下会抛出错误。

 

  同时定义多个属性的写法由于未对象定义多个属性的可能性很大,ES5又定义了一个Object.defineProperties()方法利用这个方法可以通过描述符一次定义多个属性。

  这个方法接收两个对象参数:第一个对象是哟啊添加和修改其属性的对象,第二个对象的属性与第一个对象中要添加或修改的属性一一对应。

同时定义多个属性的写法

  1. var book = {};
  2.  
  3. Object.defineProperties(book,{
  4. _year: {
  5. value: 2018
  6. },
  7. edition: {
  8. value: 1
  9. },
  10. year: {
  11. get: function () {
  12. return this._year;
  13. },
  14. set: function (newValue) {
  15. console.log('修改函数触发触发了吗');
  16. if(newValue>2018){
  17. this._year = newValue;
  18. this.edition += newValue - 2018;
  19. }
  20. }
  21. }
  22. });
  23.  
  24. console.log(book.year);
  25.  
  26. book.year = 2020;
  27. console.log(book); //{_year: 2018, edition: 1}
  28. // ???? 我前面不是触发了修改的函数了吗为什么没有改呢 上一个分开写的都修改成功了

  

别着急,下面来看一个新的API

Object.getOwnPropertyDescriptor()  

  读取属性的特性

使用Es5的Object.getOwnPropertyDescription() 方法,可以取得给定属性描述符。这个方法接收两个参数: 属性所在的对象和要读取其描述符的属性名称。返回值是一个对象,如果是访问器属性,这个对象的属性有 configurable enumerable writable 和value

  1. var descriptor1 = Object.getOwnPropertyDescriptor(book,"_year");
  2. var descriptor2 = Object.getOwnPropertyDescriptor(book,"edition");
  3. console.log(descriptor1);
  4. /*
  5. {configurable: false,
  6. enumerable: false,
  7. value: 2018,
  8. writable: false}
  9. */
  10. console.log(descriptor2);
  11. /*
  12. {
  13. configurable: false,
  14. enumerable: false,
  15. value: 1,
  16. writable: false}
  17. */
  18. */
  19. // 前面分开写可以成功的原因可以用这个东西去获取一下,可以看到他们是true的,这个是false,所以
  20. // 虽然你修改了,但是他是不生效的

  在JavaScript中,可以针对任何对象------包括DOM和BOM对象,使用Object.getOwnPropertyDescriptor()方法。

  如果你阅读了本文章有了一些收获,我会感到非常开心,由于能力有限,文章有的部分解释的不到位,希望在以后的日子里能慢慢提高自己能力,如果不足之处,还望指正。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号