JavaScript高级之对象、类、构造函数和原型

骑猪看日落 2023-02-14 15:56 45阅读 0赞

### JavaScript高级之对象、类、构造函数和原型 ###

*  JavaScript高级之对象、类、构造函数和原型
 *   *  1 面向过程与面向对象
     *  2 对象与类的创建与使用
     *   *  2.1 创建对象的方式
         *  2.2 创建类与通过类创建对象
         *  2.3 类创建添加属性和方法
         *  2.4 类的继承
     *  3 构造函数和原型
     *   *  3.1 静态成员和实例成员
         *  3.2 构造函数原型prototype
         *  3.3 对象原型属性\_\_proto\_\_
         *  3.4 constructor构造函数
         *  3.5 原型链
         *   *  3.5.1 原型链介绍
             *  3.5.2 构造函数实例和原型对象三角关系
             *  3.5.3 原型链和成员的查找机制
             *  3.5.4 原型对象中this指向
             *  3.5.5 通过原型为数组扩展内置方法

# JavaScript高级之对象、类、构造函数和原型 #

## 1 面向过程与面向对象 ##

*  **面向过程**就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。
 *  **面向对象**是把事务分解成为一个个对象，然后由对象之间分工与合作。

## 2 对象与类的创建与使用 ##

### 2.1 创建对象的方式 ###

对象是由属性和方法组成的：是一个无序键值对的集合,指的是一个具体的事物。

1.  字面量方式

var ldh = { 
        name: '刘德华',
        age: 18
    }
    console.log(ldh);

1.  new关键字

var obj = new Object();

1.  构造函数方式

function Person(name,age){ 
       this.name = name;
       this.age = age;
     }
     var obj = new Person('zs',12);

### 2.2 创建类与通过类创建对象 ###

在 ES6 中新增加了类的概念，可以使用 class 关键字声明一个类，之后以这个类来实例化对象。  
类抽象了对象的公共部分，它泛指某一大类（class）对象特指某一个，通过类实例化一个具体的对象。  
代码如下：

### 2.3 类创建添加属性和方法 ###

**注意：**  
(1) 通过class 关键字创建类, 类名我们还是习惯性定义首字母大写  
(2) 类里面有个constructor 函数,可以接受传递过来的参数,同时返回实例对象  
(3) constructor 函数 只要 new 生成实例时,就会自动调用这个函数, 如果我们不写这个函数,类也会自动生成这个函数  
(4) 生成实例 new 不能省略  
(5) 最后注意语法规范, 创建类 类名后面不要加小括号,生成实例 类名后面加小括号, 构造函数不需要加function

### 2.4 类的继承 ###

1.用法如下：

**注意:**

1.  继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的。
2.  继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这个方法(就近原则)。
3.  如果子类想要继承父类的方法,同时在自己内部扩展自己的方法,利用super 调用父类的构造函数,super 必须在子类this之前调用。
4.  时刻注意this的指向问题,类里面的共有的属性和方法一定要加this使用：

-	 1.constructor中的this指向的是new出来的实例对象；
     -	 2.自定义的方法,一般也指向的new出来的实例对象；
     -	 3.绑定事件之后this指向的就是触发事件的事件源。

## 3 构造函数和原型 ##

1.构造函数定义：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center]  
2.构造函数造成的资源浪费：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70]

### 3.1 静态成员和实例成员 ###

**实例成员**：就是构造函数内部通过this添加的成员，实例成员只能通过实例化的对象来访问。  
**静态成员**：在构造函数本身上添加的成员，静态成员只能通过构造函数来访问。

### 3.2 构造函数原型prototype ###

JavaScript 规定，每一个构造函数都有一个prototype 属性，指向另一个对象。注意这个prototype就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有。  
我们可以把那些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可以共享这些方法。

### 3.3 对象原型属性\_\_proto\_\_ ###

对象都会有一个属性 **proto** 指向构造函数的 prototype 原型对象，之所以我们对象可以使用构造函数 prototype 原型对象的属性和方法，就是因为对象有 **proto** 原型的存在。  
\_\_proto\_\_对象原型的意义就在于为对象的查找机制提供一个方向，或者说一条路线，但是它是一个非标准属性，因此实际开发中，不可以使用这个属性，它只是内部指向原型对象 prototype。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70 1]  
**注意**：\_\_proto\_\_对象原型和原型对象 prototype 是等价的。

// 对象身上系统自己添加一个 __proto__ 指向我们构造函数的原型对象 prototype
     console.log(ldh.__proto__ === Star.prototype);
     // 方法的查找规则: 首先先看ldh 对象身上是否有 sing 方法,如果有就执行这个对象上的sing
     // 如果么有sing 这个方法,因为有__proto__ 的存在,就去构造函数原型对象prototype身上去查找sing这个方法

### 3.4 constructor构造函数 ###

对象原型（ **proto**）和构造函数（prototype）原型对象里面都有一个属性 constructor 属性 ，constructor 我们称为构造函数，因为它指回构造函数本身。  
constructor 主要用于记录该对象引用于哪个构造函数，它可以让原型对象重新指向原来的构造函数。

### 3.5 原型链 ###

#### 3.5.1 原型链介绍 ####

每一个实例对象又有一个proto属性，指向的构造函数的原型对象，构造函数的原型对象也是一个对象，也有proto属性，这样一层一层往上找就形成了原型链。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70 2]

#### 3.5.2 构造函数实例和原型对象三角关系 ####

1.构造函数的prototype属性指向了构造函数原型对象  
2.实例对象是由构造函数创建的,实例对象的\_\_proto\_\_属性指向了构造函数的原型对象  
3.构造函数的原型对象的constructor属性指向了构造函数,实例对象的原型的constructor属性也指向了构造函数  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70 3]

#### 3.5.3 原型链和成员的查找机制 ####

1.当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性。如果没有就查找它的原型（也就是 \_\_proto\_\_指向的 prototype 原型对象）。  
2.如果还没有就查找原型对象的原型（Object的原型对象）。依此类推一直找到 Object 为止（null）。  
3.\_\_proto\_\_对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线。

#### 3.5.4 原型对象中this指向 ####

构造函数中的this和原型对象的this,都指向我们new出来的实例对象。

#### 3.5.5 通过原型为数组扩展内置方法 ####

Array.prototype.sum = function() { 
       var sum = 0;
       for (var i = 0; i < this.length; i++) { 
       sum += this[i];
       }
       return sum;
     };
     //此时数组对象中已经存在sum()方法了 可以始终 数组.sum()进行数据的求

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200604091445789.JPG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200604091932332.JPG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200604093642774.JPG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020060409361412.JPG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200604093703550.JPG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx,size_16,color_FFFFFF,t_70