• 极客重学前端3 - JavaScript对象:面向对象还是基于对象?


    开篇问题

    1. 为什么 JavaScript(直到 ES6)有对象的概念,但是却没有像其他的语言那样,有类的概念呢?
      (当然,现在是有类的—— class,但是菜鸟还是感觉用到得不多!建议看看这篇文章:应该在JavaScript中使用Class吗?,菜鸟感觉大部分情况下都不必使用class,只有在程序设计偏向于面向对象(OOP)时,可以考虑将class使用进去!)

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

    带着问题一起接下来的学习吧!

    什么是面向对象?

    我们应该认识到,对象并不是计算机领域凭空造出来的概念,它是顺着人类思维模式产生的一种抽象(于是面向对象编程也被认为是:更接近人类思维模式的一种编程范式)。

    这里只是winter的说法,菜鸟还是上面问题一时的看法,并不是说OOP就一定好或者不好,要分情况和语言而定 !这里winter实在是太自以为是了。

    在《面向对象分析与设计》这本书中,Grady Booch 替我们做了总结,他认为,从人类的认知角度来说,对象应该是下列事物之一:

    1. 一个可以触摸或者可以看见的东西
    2. 人的智力可以理解的东西
    3. 可以指导思考或行动(进行想象或施加动作)的东西

    有了对象的自然定义后,就可以描述编程语言中的对象了。在不同的编程语言中,设计者也利用各种不同的语言特性来抽象描述对象,最为成功的流派是使用“类”的方式来描述对象,这诞生了诸如 C++、Java 等流行的编程语言。

    而 JavaScript 早年却选择了一个更为冷门的方式:原型(关于原型,winter说后面的文章会重点介绍,这里留个印象就可以了)。

    菜鸟个人认为: 原型链之前可能确实是冷门,但是放在JavaScript上,似乎又绽放了新的生命,虽然原型链确实难以理解,但是又不得不说JavaScript的创造者将其融入得很好。

    (这里后面介绍到,菜鸟会过来给个链接!)

    然而很不幸,因为一些公司政治原因,JavaScript 推出之时受管理层之命被要求模仿Java,所以,JavaScript 创始人 Brendan Eich 在“原型运行时”的基础上引入了 new、this 等语言特性,使之“看起来更像 Java“。

    菜鸟个人认为:如果JavaScript的创造者没有这个限制,可能现在JavaScript就是排名前三的语言,当然也有可能没有这些,JavaScript就不再灵活,从而不受欢迎,反正应该是有利有弊!毕竟三人行必有我师,从好的语言中得到好的思想,才能创造js的辉煌!

    在 ES6 出现之前,大量的 JavaScript 程序员试图在原型体系的基础上,把 JavaScript 变得更像是基于类的编程,进而产生了很多所谓的“框架”,比如 PrototypeJS、Dojo。事实上,它们成为了某种 JavaScript 的古怪方言,甚至产生了一系列互不相容的社群,显然这样做的损失是远远大于收益的。

    JavaScript 对象的特征

    不论我们使用什么样的编程语言,我们都先应该去理解对象的本质特征(参考Grandy Booch《面向对象分析与设计》)。总结来看,对象有如下几个特点。

    • 对象具有唯一标识性:即使完全相同的两个对象,也并非同一个对象
    • 对象有状态:对象具有状态,同一对象可能处于不同状态之下
    • 对象具有行为:即对象的状态,可能因为它的行为产生变迁

    其实学过Java的就很容易理解,其实就是封装、继承、多态

    先来看第一个特征,对象具有唯一标识性。一般而言,各种语言的对象唯一标识性都是用内存地址来体现的, 对象具有唯一标识的内存地址,所以具有唯一的标识。

    这里可以看看菜鸟的: js基本类型和引用类型的区别

    所以,JavaScript 程序员都知道,任何不同的 JavaScript 对象其实是互不相等的,可以看下面的代码,o1 和 o2 初看是两个一模一样的对象,但是打印出来的结果却是 false。
    在这里插入图片描述
    关于对象的第二个和第三个特征“状态和行为”,不同语言会使用不同的术语来抽象描述它们,比如 :C++ 中称它们为“成员变量”和“成员函数”,Java 中则称它们为“属性”和“方法”。在 JavaScript 中,将状态和行为统一抽象为“属性”,考虑到 JavaScript 中将函数设计成一种特殊对象(关于这点,winter会在后面的文章中详细讲解,此处先不用细究),所以JavaScript 中的行为和状态都能用属性来抽象

    (这里后面介绍到,菜鸟会过来给个链接!)

    下面这段代码其实就展示了普通属性和函数作为属性的一个例子,其中 o 是对象,d 是一个属性,而函数 f 也是一个属性,尽管写法不太相同,但是对 JavaScript 来说,d 和 f 就是两个普通属性。
    在这里插入图片描述
    所以,总结一句话来看,在 JavaScript 中,对象的状态和行为其实都被抽象为了属性

    在实现了对象基本特征的基础上, JavaScript 中对象独有的特色是:对象具有高度的动态性,这是因为 JavaScript 赋予了使用者在运行时为对象添改状态和行为的能力。

    我来举个例子,比如:JavaScript 允许运行时向对象添加属性,这就跟绝大多数基于类的、静态的对象设计完全不同。如果你用过 Java 或者其它别的语言,肯定会产生跟我一样的感受。

    下面这段代码就展示了运行时如何向一个对象添加属性,一开始我定义了一个对象 o,定义完成之后,再添加它的属性 b,这样操作是完全没问题的:
    在这里插入图片描述
    为了提高抽象能力,JavaScript 的属性被设计成比别的语言更加复杂的形式,它提供了数据属性和访问器属性(getter/setter)两类。

    JavaScript 对象的两类属性

    对 JavaScript 来说,属性并非只是简单的名称和值,JavaScript 用一组特征(attribute)来描述属性(property)。

    先来说第一类属性,数据属性。它比较接近于其它语言的属性概念。数据属性具有四个特征:

    • value:就是属性的值
    • writable:决定属性能否被赋值
    • enumerable:决定 for in 能否枚举该属性
    • configurable:决定该属性能否被删除或者改变特征值

    在大多数情况下,我们只关心数据属性的值即可。

    第二类属性是访问器(getter/setter)属性,它也有四个特征:

    • getter:函数或 undefined,在取属性值时被调用
    • setter:函数或 undefined,在设置属性值时被调用
    • enumerable:决定 for in 能否枚举该属性
    • configurable:决定该属性能否被删除或者改变特征值

    访问器属性使得属性在读和写时执行代码,它允许使用者在写和读属性时,得到完全不同的值,它可以视为一种函数的语法糖

    菜鸟感觉java也有getter/setter属性,但是对Java不是很了解,所以不清楚!我让老王来评论区回答看看( ̄▽ ̄)*

    我们通常用于定义属性的代码会产生数据属性,其中的 writable、enumerable、configurable 都默认为 true。我们可以使用内置函数 Object.getOwnPropertyDescripter 来查看,如以下代码所示:

    var o = { a: 1 };
    o.b = 2; //a 和 b 皆为数据属性
    Object.getOwnPropertyDescriptor(o,"a") // {value: 1, writable: true, enumerable: true, configurable: true}
    Object.getOwnPropertyDescriptor(o,"b") // {value: 2, writable: true, enumerable: true, configurable: true}
    
    • 1
    • 2
    • 3
    • 4

    如果我们要想改变属性的特征,或者定义访问器属性,我们可以使用Object.defineProperty,示例如下:

    var o = { a: 1 };
    Object.defineProperty(o, "b", {value: 2, writable: false, enumerable: false, configurable: true})
    //a 和 b 都是数据属性,但特征值变化了
    Object.getOwnPropertyDescriptor(o,"a");
    Object.getOwnPropertyDescriptor(o,"b");
    o.b = 3;
    console.log(o.b); // 2
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    这里我们使用了 Object.defineProperty 来定义属性,这样定义属性可以改变属性的writable 和 enumerable。我们同样用 Object.getOwnPropertyDescriptor 来查看,发现确实改变了 writable 和enumerable 特征。因为 writable 特征为 false,所以我们重新对 b 赋值,b 的值不会发生变化。

    在创建对象时,也可以使用 get 和 set 关键字来创建访问器属性,代码如下所示:

    var o = { get a() { return 1 } };
    console.log(o.a); // 1
    
    • 1
    • 2

    访问器属性跟数据属性不同,每次访问属性都会执行 getter 或者 setter 函数。 这里我们的getter 函数返回了 1,所以 o.a 每次都得到 1。

    (其实并不理解!!!)
    这样,我们就理解了,实际上 JavaScript 对象的 运行时是一个“属性的集合” ,属性以字符串或者 Symbol 为 key,以数据属性特征值或者访问器属性特征值为 value。对象是一个属性的索引结构(索引结构是一类常见的数据结构,我们可以把它理解为一个能够以比较快的速度用 key 来查找 value 的字典)。我们以上面的对象 o 为例,你可以想象一下“a”是 key。{writable:true,value:1,configurable:true,enumerable:true}是 value。我们在前面的类型课程中,已经介绍了 Symbol 类型,能够以 Symbol 为属性名,这是JavaScript 对象的一个特色。

    其实完全没有感觉winter讲的和问题有什么关系,直接搬了!感觉很没用!!!
    在这里插入图片描述
    感觉比较像菜鸟总结的!!!就文章开头菜鸟说的两个!!!菜鸟看了winter这篇文章底下的评论,有的说讲得好有的和菜鸟一样,感觉讲得不是很清楚,反正一万个人就有一万个哈默雷特,所以看读者的感觉吧。

    还有就是winter一直强调运行时,菜鸟建议把运行时当成第一篇文章的这个
    在这里插入图片描述
    也就是执行过程+数据结构 !

    第一篇文章链接:极客重学前端1 - 构建知识体系

    好了,今天的分享就到这里了,希望读者可以跟着菜鸟一起学习!!!

  • 相关阅读:
    EL表达式 Jstl (附上代码理解)
    【Spring】BeanName 的自动生成原理
    第八天:gec6818arm开发板和Ubuntu中安装并且编译移植mysql驱动连接QT执行程序
    Mallox勒索病毒:了解最新变种mallab,以及如何保护您的数据
    基础类型变量声明
    如何确定神经网络的参数 使得fx=tanhx
    JavaScript实现字体大小调整
    元素跟随鼠标移动
    【C语言】模拟实现strlen
    Mac和VScode配置fortran
  • 原文地址:https://blog.csdn.net/langwang_100/article/details/126001424