资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/重学前端学习笔记（七）--JavaScript对象：面向对象还是基于对象？

重学前端学习笔记（七）--JavaScript对象：面向对象还是基于对象？

yy736044583 / 1717人阅读

摘要：对象有状态对象具有状态，同一对象可能处于不同状态之下。中对象独有的特色对象具有高度的动态性，这是因为赋予了使用者在运行时为对象添改状态和行为的能力。小结由于的对象设计跟目前主流基于类的面向对象差异非常大，导致有不是面向对象这样的说法。

笔记说明 
</>复制代码 
  1. 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音】，如有侵权请联系我，邮箱：kaimo313@foxmail.com。
1、学习JavaScript面向对象时是否有这样的疑惑？

为什么 JavaScript（直到 ES6）有对象的概念，但是却没有像其他的语言那样，有类的概念呢？

为什么在 JavaScript 对象里可以自由添加属性，而其他的语言却不能呢？

2、什么是面向对象？ 2.1、JavaScript 对象的特征 2.1.1、对象的特征（来自《面向对象分析与设计》一书）

对象具有唯一标识性：即使完全相同的两个对象，也并非同一个对象。

对象有状态：对象具有状态，同一对象可能处于不同状态之下。

对象具有行为：即对象的状态，可能因为它的行为产生变迁。

关于第一点：

</>复制代码 
  1. var a1 = { a: 1 };
  2. var a2 = { a: 1 };
  3. console.log(a1 == a2); // false

关于第二、三点:

c++中称"状态和行为"为成员变量和成员函数

java中则称它们为属性和方法

javaScript中将状态和行为统一抽象为属性

winter举了个例子，代码如下：

</>复制代码 
  1. var o = {
  2.     d: 1,
  3.     f() {
  4.         console.log(this.d);
  5.     }
  6. };

上面代码中，o是对象，d是一个属性，而函数f也是一个属性，只是写法不一样，总结来说，在JavaScript中，对象的状态和行为其实都被抽象为了属性。

2.1.2、JavaScript 中对象独有的特色 
</>复制代码 
  1. 对象具有高度的动态性，这是因为 JavaScript 赋予了使用者在运行时为对象添改状态和行为的能力。

举例说明运行时如何向一个对象添加属性：

</>复制代码 
  1. var o = { a: 1 };
  2. o.b = 2;
  3. console.log(o.a, o.b); //1 2

为了提高抽象能力，JavaScript的属性被设计成比别的语言更加复杂的形式，它提供了数据属性和访问器属性（getter/setter）两类。

2.2、JavaScript 对象的两类属性 2.2.1、数据属性

4个特征：

value：就是属性的值.

writable：决定属性能否被赋值.

enumerable：决定 for in 能否枚举该属性.

configurable：决定该属性能否被删除或者改变特征值.

2.2.2、访问器（getter/setter）属性

2.2.2.1、4个特征：

getter：函数或 undefined，在取属性值时被调用.

setter：函数或 undefined，在设置属性值时被调用.

enumerable：决定 for in 能否枚举该属性.

configurable：决定该属性能否被删除或者改变特征值.

2.2.2.2、Object.getOwnPropertyDescripter 和 Object​.define​Property()

</>复制代码 
  1. var o, d;
  2. o = { get foo() { return 17; } };
  3. d = Object.getOwnPropertyDescriptor(o, "foo");
  4. // d {
  5. //   configurable: true,
  6. //   enumerable: true,
  7. //   get: /*the getter function*/,
  8. //   set: undefined
  9. // }
  10. o = { bar: 42 };
  11. d = Object.getOwnPropertyDescriptor(o, "bar");
  12. // d {
  13. //   configurable: true,
  14. //   enumerable: true,
  15. //   value: 42,
  16. //   writable: true
  17. // }
  18. o = {};
  19. Object.defineProperty(o, "baz", {
  20.   value: 8675309,
  21.   writable: false,
  22.   enumerable: false
  23. });
  24. d = Object.getOwnPropertyDescriptor(o, "baz");
  25. // d {
  26. //   value: 8675309,
  27. //   writable: false,
  28. //   enumerable: false,
  29. //   configurable: false
  30. // }

实际上 JavaScript 对象的运行时是一个“属性的集合”，属性以字符串或者 Symbol 为 key，以数据属性特征值或者访问器属性特征值为 value。

2.3、小结

由于 JavaScript 的对象设计跟目前主流基于类的面向对象差异非常大，导致有“JavaScript 不是面向对象”这样的说法。

JavaScript 语言标准也已经明确说明，JavaScript 是一门面向对象的语言，跟JavaScript 的高度动态性的对象系统密不可分。

个人总结

看完winter的这篇文章深感自己的基础之薄弱，越模糊的东西越要清楚其本质，才能保持对事物的正确判断。

GPU云服务器 云服务器 javascript面向对象 javascript 面向对象 javascript面向对象编程 javascript面向对象编程指南

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114571.html

相关文章

  • 重学前端学习笔记（七）--JavaScript对象：面向对象还是基于对象？

    摘要：对象有状态对象具有状态，同一对象可能处于不同状态之下。中对象独有的特色对象具有高度的动态性，这是因为赋予了使用者在运行时为对象添改状态和行为的能力。小结由于的对象设计跟目前主流基于类的面向对象差异非常大，导致有不是面向对象这样的说法。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些...

    mayaohua 评论0 收藏0

  • 重学前端学习笔记（七）--JavaScript对象：面向对象还是基于对象？

    摘要：对象有状态对象具有状态，同一对象可能处于不同状态之下。中对象独有的特色对象具有高度的动态性，这是因为赋予了使用者在运行时为对象添改状态和行为的能力。小结由于的对象设计跟目前主流基于类的面向对象差异非常大，导致有不是面向对象这样的说法。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些...

    xingpingz 评论0 收藏0

  • 重学前端学习笔记（八）--JavaScript中的原型和类

    摘要：用构造器模拟类的两种方法在构造器中修改，给添加属性修改构造器的属性指向的对象，它是从这个构造器构造出来的所有对象的原型。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音】，如有侵权请联系我，邮箱：kai...

    nanfeiyan 评论0 收藏0

发表评论

登陆后可评论

0条评论

yy736044583

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<