中引用对象属性的语法格式正确的为_如何正确理解JavaScript面向对象？

￡神魔★判官ぃ 2022-11-19 11:19 187阅读 0赞

**![634ed109d4b2ff6921faabab601e5ba6.png][]**

**后台回复【****福利****】领取JavaScript零基础入门课程**

**JavaScript的面向对象编程**，一直都是很多前端小白学习JavaScript的时候很纠结的地方。JavaScript不同于JAVA这种语法严格的编程语言，虽然也是面向对象编程，但是JavaScript是基于对象的语言，运用的是模拟面向对象的思想。

那我们应该如何正确的理解JavaScript面向对象呢？一起来看看李老师是怎么讲的。

![7de85c192a45021aa80eb61243b15c8a.png][]

## **什么是面向对象编程？** ##

面向对象编程，OOP(Object Oriented Programming)，是我们做计算机编程的一种编程架构，OOP的原则是计算机是由子程序作用的单个或者多个对象组成的，包含属性和方法的对象是类的实例，但是在JavaScript中，是没有类的概念的，是直接使用对象来实现编程。

*  面向过程：凡事亲力亲为，每件事的具体过程都要知道，注重过程
 *  面向对象：根据需求寻找对象，所有的事都用对象来做，注重结果
 *  面向对象特性：封装、继承、多态(抽象性)
 *  js是一门基于对象的语言：js不是面向对象的语言，但是可以模拟面向对象的思想

之前在知乎上有个很好的比喻回答，给大家分享下，方便理解：

面向对象：狗.吃(屎)

面向过程：吃.(狗,屎)

还不懂？那具体的实现我们看一下最经典的“把大象放冰箱”这个问题

**面向过程的解决方法**

在面向过程的编程方式中实现“把大象放冰箱”这个问题答案是耳熟能详的，一共分三步：

开门(冰箱)；

装进(冰箱，大象)；

关门(冰箱)。

**面向对象的解决方法**

冰箱.开门()

冰箱.装进(大象)

冰箱.关门()

可以看出来面向对象和面向过程的侧重点是不同的，面向过程是以动词为主，完成一个事件就是将不同的动作函数按顺序调用。

面向对象是以主谓为主。将主谓看成一个一个的对象，然后对象有自己的属性和方法。比如说，冰箱有自己的id属性，有开门的方法。然后就可以直接调用冰箱的开门方法给其传入一个参数大象就可以了。

两个简单的例子，不过面向对象和面向过程的好处还不是很明显。

### **万物皆对象** ###

现实世界中客观存在的任何事物都可以看作对象

对象：用来描述客观事物的一个实体，由一组属性和方法构成

**封装：(****encapsulation)**

就是把一个事物包装起来，尽可能的隐藏细节

**类：**类为它的全部对象给出了一个统一的定义，而它的每一个对象则是这一定义的一个实体

即：类和对象的关系就是抽象和具体的关系；

**属性：**对象所拥有的静态特征在类中的表示时称为类的属性， “有”什么东西

**方法：**对象执行的操作称为类方法，事物的行为， 事物用“能”

**对象：**类的实例，真实存在的

举个例子：

跑车-

属性：发动机，方向盘

方法：发动，加速，刹车

对象:具体到是兰博基尼，还是保时捷，还是野马，布加迪。

## **如何创建对象** ##

**创建对象有多种实现方式：**

**1.利用构造函数创建对象**

**方法：**

![cf1b82478b79a8772c9e9b1b4dbc71bb.png][]

这与通过类创建对象有本质的区别。通过该方法创建对象时，会自动执行该函数。这点类似于php通过创建对像时，会自动调用构造函数，因此该方法称为通过"构造函数“方式创建对象

![4bc44a2a2159de8b823f480608fc609c.png][]

*  构造函数的方法和工厂方法一样，会为每个对象创建独享的函数对象。
 *  当然也可以将这些函数对象定义在构造函数外面，这样有了对象和方法相互独立的问题。
 *  使用构造函数存在的最大问题就是每个实例都会将所有的属性创建一次。这个对于数值属性来说可以接受，但是如果函数方法每个实例都要创建一遍，则不合理。
 *  自定义构造函数:  没有var、没有返回值、用this代替当前对象
 *   要创建Person()的新实例，必须使用new操作符。
 *  构造函数和函数的区别：**构造函数的名字首字母一般大写**
 *  自定义构造函数创建对象做了四件事：

1.  在内存中开辟(申请)空间，存储新的对象
2.  把this设置新的对象
3.  设置对象的属性和方法的值
4.  把this这个对象返回

**2.Object 创建对象**

**方法**：先通过object构造器new一个对象，再往里丰富成员信息。

![51dac96e3e5686146654587692a977f3.png][]

![ad9ca4ad69bd9ca447ff59b27d008676.png][]

*  这种方法通过new关键字生成一个对象，然后根据JavaScript是动态语言的特性来添加属性和方法，构造一个对象。
 *  在当前的对象的方法中，可以使用this代替当前对象
 *  这种方法的问题在于：如果我们需要多次创建对象，那么就需要重复代码多次，不利于代码的复用

**3.字面量创建对象(和json数据创建比较相似)**

方法：将成员信息写到\{\}中，并赋值给一个变量，此时这个变量就是一个对象。

![6402d292da5d2ae1f3e246545dcb4bcc.png][]

如果{}中为空，则将创建一个空对象：

![d46ff8d850a85647584f1c5613a3f064.png][]

![9d15b71c3fffe83a4d0b18eeaf24c2eb.png][]

**·Json数据**

*  json格式的数据，一般都是成对的，键值对的形式
 *  json也是一个对象，数据无论是键还是值都是用双引号括起来的

![8fe87ab376b86d9e934ec2ed91d4c55d.png][]

**4.结合构造函数和object 来创建(工厂模式)**

### **一次性创建多个对象可以使用工厂模式创建对象：利用函数封装起来，后面调用。** ###

## **销毁JavaScript对象** ##

作用：释放内存空间，节省有效资源。

**JavaScript回收空间**

**自动回收：**js有自己的回收机制，对象不用后，会自动销毁，空间会自动释放

对于javascript 语言，其拥有无用存储单元收集程序，意味着我们可以不必专门销毁对象来释放内存。如果再没有对对象的引用时，当运行无用存储单元收集程序时，即可销毁所有的对象。

**手动：**释放固定的对象

但作为一个良好的习惯，把对象的所有引用都设置为 null，可以强制性地废除对象。例如：hero=null;当对象变量 hero 设置为 null 后，对第一个创建的对象的引用就不存在了。这意味着下次运行无用存储单元收集程序时，该对象将被销毁。

注意：废除对象的所有引用时要当心。如果一个对象有两个或更多引用，则要正确废除该对象，必须将其所有引用都设置为 null

**销毁对象优势：**

1.      释放空间 ，节省资源

2.      避免程序错误的出现

3.      旧的浏览器： 没有对象回收机制，对象不能回收， 重启或关闭计算机，对象才会被回收变量、数组、对象，所有关于变量相关的内容，都应该释放；

简单理解好JavaScript面向对象编程，对于大家理解好插件、类库的逻辑原理和快速上手前端框架都很重要。

![f6dfa8e2db18756b812ee48e265c7ca9.png][]

[634ed109d4b2ff6921faabab601e5ba6.png]: /images/20221119/bd79d291f001436baff608c8f8a266ee.png
[7de85c192a45021aa80eb61243b15c8a.png]: /images/20221119/87a4afb626bc4fd5bf3b27caf0d4ed46.png
[cf1b82478b79a8772c9e9b1b4dbc71bb.png]: /images/20221119/ccf8462494ad492bbcea6a56dc68fc28.png
[4bc44a2a2159de8b823f480608fc609c.png]: /images/20221119/2eacb140fe0d41f592e503e90d78394d.png
[51dac96e3e5686146654587692a977f3.png]: /images/20221119/05d8cc04f92946b3ba94cbadf578e10b.png
[ad9ca4ad69bd9ca447ff59b27d008676.png]: /images/20221119/5b262a123f9b4a709cb4a25d526043cf.png
[6402d292da5d2ae1f3e246545dcb4bcc.png]: /images/20221119/da19edbfcad44b369ee545a7de1563bf.png
[d46ff8d850a85647584f1c5613a3f064.png]: /images/20221119/7aae520444224ffc88b713e2a99f7f3e.png
[9d15b71c3fffe83a4d0b18eeaf24c2eb.png]: /images/20221119/c6416c8aa0eb4086ae65ef5d8bb61cb0.png
[8fe87ab376b86d9e934ec2ed91d4c55d.png]: /images/20221119/d9ce4a363dc94046a9711f810651c3e3.png
[f6dfa8e2db18756b812ee48e265c7ca9.png]: /images/20221119/1a79f577365f44b09bc3c905d29c8d17.png