【javascript】深入理解对象

    今天学习的主题是 JavaScript对象。

    要创建一个JavaScript对象大家应该都觉得很简单,直接写上一行 var obj = {} 就ok了。有时我们也会在网上看到一些什么创建对象的xxx种设计模式。在这里我就抽三种最基础的设计模式跟大家分享一下。

    第一种:工厂模式

    【javascript】深入理解对象

    工厂模式,顾名思义,你无需知道你想要的东西在工厂中是如何生产出来的。你只需要通过一个工厂将成本生产出来交给你即可。

    第二种:构建函数

    【javascript】深入理解对象

   学习过java或其他语言的朋友应该很容易理解。像第一种工厂模式,是通过调用生产对象的函数去创建对象。第二种是通过 new 创造一个对象的实例。

    第三种:原型模式

    【javascript】深入理解对象

    我们创建的对象一般都会继承JavaScript的内置对象。说的通俗一点,JavaScript的内置对象是爸爸,我们创建的对象是儿子,爸爸对象里的方法,我们儿子对象里也有,但这些方法都包含在原型链中。上面代码42行的打印结果如下:

    【javascript】深入理解对象

    我们通过原型链prototype添加的任何属性或者方法都包含在对象的__proto__属性中。在打印时JavaScript不会将原型链中的属性与方法直接暴露出来,只会暴露我们自己定义的属性与方法。所以打印结果第一行的{}括号里是空,并没有name属性。

    剩下的一些对象设计模式基本是以上述三种模式为基础去展开,这里就不多提,感兴趣的同学可以自行百度。说完了对象,我们再聊一聊对象的属性,当我们创建好一个对象后,可以通过以下方法对它的属性进行修改或者删除。

    【javascript】深入理解对象

    打印结果:

    【javascript】深入理解对象

    这里为大家介绍另一种修改对象属性的方法

    【javascript】深入理解对象

    打印结果:

    【javascript】深入理解对象

    通过with方式去批量修改属性是不是觉得更方便一些呢!

    在项目中我们会创建一些全局对象,其中的一些属性我们不允许修改的时候该怎么做呢?下面就为大家介绍一番。

    【javascript】深入理解对象

    通过Object.defineProperty(obj,key,{})方法就可以为对象的某一属性设定一些权限。该方法中的三个参数,第一个参数是我们创建好的对象,第二个参数是我们要配置的该对象中的 其中一个属性,第三个参数是一个json对象,其中的键值对指的是我们要为该属性配置的一些权限信息。

    writeable: 值为true or  false 。表示该属性是否允许被修改,true为允许修改,false为不允许修改;

    【javascript】深入理解对象

    打印结果

    【javascript】深入理解对象

    【javascript】深入理解对象

    打印结果:

    【javascript】深入理解对象

    

    enumerable:值为true or false。表示该属性是否允许通过for in 进行枚举,true表示允许枚举,false表示不允许。

    【javascript】深入理解对象

    打印结果:

    【javascript】深入理解对象

    【javascript】深入理解对象

    打印结果:

    【javascript】深入理解对象

    configurable:true or false。表示该属性是否允许被删除。true为允许删除,false为不允许删除。

    【javascript】深入理解对象

    打印结果:

    【javascript】深入理解对象

    【javascript】深入理解对象

    打印结果:

    【javascript】深入理解对象

    value:重新为该属性赋值.

    【javascript】深入理解对象

    【javascript】深入理解对象

    get方法:表示该属性只能通过get方法去获取,在获取属性的时候我们可以加上其他的逻辑。这里属性的写法要做一点变化,请注意。

    【javascript】深入理解对象

    打印结果:

    【javascript】深入理解对象

    当我们要为对象中的属性配置get方法的时候,要在该属性前方加上 ‘_’ 符号,如图

    【javascript】深入理解对象

    打印结果:

    【javascript】深入理解对象

    set方法:配置set方法,可以让我们在给对象属性赋值的时候加上其他的业务逻辑。

    【javascript】深入理解对象

    打印结果:

    【javascript】深入理解对象

      这里我们可以发现,当只配置了set方法的时候打印对象myObj时,name属性没有被打印出来。

        【javascript】深入理解对象

    打印结果:

    【javascript】深入理解对象

    到这里,Object.defineProperty方法的每个配置参数都介绍完了。有的小朋友就会问了,这个方法每次都只能为对象的一个属性进行操作,我要是想同时对多个属性进行配置,有没有其他办法?答案当然是有的!

    【javascript】深入理解对象

 

    最后最后,我们如果想知道对象中的属性做了哪些配置,查看的方法如下:

    【javascript】深入理解对象

    打印结果:

    【javascript】深入理解对象

    ok,这次的JavaScript对象深入理解到此结束,遛啦遛啦!!!

转载于:https://my.oschina.net/cc4zj/blog/1593077