当前位置：Gxlcms > JavaScript > js中面向对象以及Object类型的简单介绍（附代码）

js中面向对象以及Object类型的简单介绍（附代码）

时间：2021-07-01 10:21:17 帮助过：13人阅读

本篇文章给大家带来的内容是关于js中面向对象以及Object类型的简单介绍（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

面向对象

面向对象编程的全称为Object Oriented Programming,简称OOP。面向对象编程是用抽象方式创建基于现实世界模型的一种编程方式。
面向对象编程可以看做是使用一系列对象相互协作的软件设计。面向对象编程的三个主要特征是：封装、继承、多态。

封装

所谓封装就是按照要求使用并得到对应的结果，而不需要知道真实的执行原理。
封装主要用于阐述对象中包含的（封装的）内容，通常有两部分组成

  • 相关的数据（用于存储属性）

  • 基于这些数据所能做的事

继承继承通常是指类与类之间的关系。如果两个类有相同的属性或方法，那么可以让一个类继承另一个类，就不需要再次定义相同的属性或方法。
创建一个或多个类的专门版本类方式称为继承（JavaScript只支持单体继承）。创建的专门版本的类通常叫做子类，另外的类通常叫做父类。

多态

不同的对象可以定义相同名称的方法，方法作用于所在的对象中。这种不同对象通过相同方法的调用实现各自行为的能力，被称之为多态。

构造函数

构造函数又被称为构造器或对象模板，是对象的一个方法，在实例化时构造器被调用。在JavaScript中函数就可以作为构造器使用。

  1. /*  创建构造函数->用于创建对象
  2. *    function 构造函数名称()｛
  3. *       this.属性名 = 属性值
  4. *       this.方法名 = function()｛
  5. *           方法体
  6. *           ｝
  7. *     ｝
  8.       this关键字指代利用当前构造函数创建的对象*/
  9. function Dog() {//这是构造函数，构造函数的属性和方法使用this关键字
  10.     this.name=function () {
  11.         console.log('哈士奇')
  12.     }
  13. }
  14. /*   利用构造函数创建对象*/
  15. var dog = new Dog();
  16. console.log(dog);

Object类型

属性描述符

JavaScript提供了一个内部数据结构，用于描述对象的值，控制其行为，例如该属性是否可写，是否可配置，是否可删除，是否可枚举等，这个内部数据结构被称为属性描述符。
对象里目前存在的属性描述符主要有两种形式：数据描述符和存取描述符。

数据描述符

数据描述符是一个具有值的属性，该值可能是可写的，也可能是不可写的。数据描述符具有以下可选键值：

  • value：该属性对应的值。可以是任何有效的JavaScript值。默认为undefined、

  • writable：当且仅当属性的writable为true时，value才能被赋值运算符改变。默认为false。

  • configurable：当且仅当该属性的configurable为true时，该属性描述符才能被改变，同时该属性也能从对应的对象上被删除。默认为false。

  • enumerable：当且仅当该属性的enumerable为true时，该属性才能够出现在对象的枚举属性中，默认为false。

存取描述符

存取描述符是由getter-setter函数对描述的属性。有以下可选键值

  • get：给属性提供getter的方法，如果没有getter则为undefined。当访问该属性时，该方法会被执行，方法执行时没有参数传入，但是会传入this对象。

  • set：给属性提供setter的方法，如果没有setter则为undefined。当属性修改时，触发执行该方法。该方法接受唯一参数，即改属性新的参数值。

  • configurable：当且仅当该属性的configurable为true时，该属性描述符才能被改变，同时该属性也能从对应的对象上被删除。默认为false。

  • enumerable：当且仅当该属性的enumerable为true时，该属性才能够出现在对象的枚举属性中，默认为false。

获取属性描述符

Object.getOwnPropentyDescriptor()方法返回指定对象上一个自有属性对应的属性描述符

  1. var obj = {
  2.     name : '哈士奇'
  3. }
  4. /*
  5.     使用Object.getOwnPropertyDescriptor()方法获取指定属性的描述符
  6.     Object.getOwnPropertyDescriptor(obj,prop)
  7.     * obj - 表示指定属性对应的目标对象
  8.     * prop - 表示获取描述符的目标属性名称
  9.     * 返回值 - 其属性描述符对象
  10.     * 如果
  11.   */
  12. var v =Object.getOwnPropertyDescriptor(obj,'name');
  13. console.log(v)

设置属性描述符可选键值value

  • Object.deginepropety()方法为对象定义新属性或修改现有属性，并返回该对象。

  1. var obj ={//定义对象时定义的属性是可以修改、删除、枚举的
  2.     name : '阿拉斯加'
  3. }
  4. /*
  5.     Object.defineProperty(obj, prop, descriptor)方法
  6.     * 作用
  7.       * 用于定义目标对象的新属性
  8.       * 用于修改目标对象的已存在属性
  9.     * 参数
  10.       * obj - 表示目标对象
  11.       * prop - 表示目标对象的目标属性名称
  12.       * descriptor - 表示属性描述符，必须是对象格式
  13.         {
  14.             value : 值
  15.         }
  16.     * 返回值 - 返回传递的对象
  17.  */
  18. //修改name属性
  19. Object.defineProperty(obj, 'name',{
  20.     value:'哈士奇'
  21. } );
  22. console.log(obj.name);//哈士奇
  23. /*
  24.     同样都是为对象新增属性
  25.     1.如果直接使用 "对象名.属性名 = 值" -> 可修改、可删除以及可枚举的
  26.     2.如果使用Object.defineProperty()方法新增属性
  27.       * 该新属性是不可修改、不可删除以及不可枚举的
  28.  */
  29. //新增age属性//用该方法新增的属性默认是不可以修改、删除、枚举的
  30. Object.defineProperty(obj,'age',{
  31.     value : 2
  32. });

  • Object.degineproperties()方法为对象定义一个或多个新属性或修改现有属性，并返回该值。

设置属性描述符可选键值weitable

  1. var obj = {
  2.     // 定义对象的同时定义了该属性以及值(可修改、可删除以及可枚举的)
  3.     name : '张无忌'
  4. }
  5. // 修改现有属性
  6. Object.defineProperty(obj, 'name', {
  7.     value : '周芷若',
  8.     writable : false // 不可修改
  9. });
  10. console.log(obj.name);// 周芷若
  11. // 修改name属性值
  12. obj.name = '赵敏';
  13. console.log(obj.name);// 周芷若
  14. Object.defineProperty(obj, 'age', {
  15.    value : 18,
  16.    writable : true
  17. });
  18. console.log(obj.age);// 18
  19. // 修改age属性值
  20. obj.age = 80;
  21. console.log(obj.age);// 80

设置属性描述符可选键值configuarble

  1. var obj = {
  2.     // 定义对象的同时定义了该属性以及值(可修改、可删除以及可枚举的)
  3.     name : '张无忌'
  4. }
  5. // 修改现有属性
  6. Object.defineProperty(obj, 'name', {
  7.     value : '周芷若',
  8.     writable : true, // 控制当前属性是否可被修改
  9.     configurable : true // 控制当前属性是否可被删除
  10. });
  11. console.log(obj.name);// 周芷若
  12. // 修改name属性值
  13. obj.name = '赵敏';
  14. console.log(obj.name);// 赵敏
  15. // 删除name属性值
  16. delete obj.name;undefined
  17. console.log(obj.name);// undefined

设置属性描述符enumerable

  1. var obj = {
  2.     // 定义对象的同时定义了该属性以及值(可修改、可删除以及可枚举的)
  3.     name : '张无忌'
  4. }
  5. Object.defineProperty(obj, 'name', {
  6.     value : '周芷若',
  7.     enumerable : false
  8. });
  9. console.log(obj.name);// 周芷若
  10. /*
  11.     属性描述符enumerable - 控制当前属性是否可被枚举(遍历)
  12.     * 仅能循环遍历对象中可被枚举的属性
  13.       * for...in语句
  14.       * keys()方法
  15.     * 可以循环遍历对象中可被枚举和不可被枚举的属性
  16.       * getOwnPropertyNames()方法
  17.  */
  18. for (var i in obj) {
  19.     console.log(i);
  20. }
  21. var result1 = Object.keys(obj);
  22. console.log(result1);
  23. var result2 = Object.getOwnPropertyNames(obj);
  24. console.log(result2);

设置属性描述符存取器

对象中的属性除了可以直接定义外，还可以用存取器进行定义。setter为取值函数，使用属性描述符中的set；getter为取值函数，使用属性描述符中的get。

  1. var value;
  2. var obj = {
  3.     // 存取描述符中的get
  4.     get attr() {// 表示当前目标属性名称
  5.         return value;
  6.     },
  7.     // 存取描述符中的set
  8.     set attr(newValue) {// 表示当前目标属性名称
  9.         console.log('setter: ' + newValue);
  10.         value = newValue;
  11.     }
  12. }
  13. console.log(obj.attr);// undefined
  14. obj.attr = 100;// "setter: 100"

防篡改对象

定义的对象默认在任何时候任何位置都可以随意修改，所以添加了防止篡改的机制分为三个级别

  • 禁止扩展：禁止为对象扩展新的属性和方法

  • 密封对象：只允许读写属性的值

  • 冻结对象：禁止任何操作

禁止扩展

  • Object.preventExtensions()设置指定对象不可扩展

  • Object.isExtensible()判断一个对象是否可以扩展

密封对象

  • Objet.seal()方法用于密封一个对象，防止添加新属性并将现有属性标记为不可配置，当前属性的值可写。

  • Object.Sealead()判断对象是否被密封

冻结对象

  • Object.freeze()用于冻结一个对象，无法对这个对象进行任何操作，只可读

  • Object.isFrozen()判断对象是否被冻结

相关推荐：

Javascript 面向对象 对象(Object)_js面向对象

JS中Object对象的原型的使用方法

JavaScript面向对象-简单对象的创建和JSON对象

以上就是js中面向对象以及Object类型的简单介绍（附代码）的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！