JS面向对象编程（OOP）

怼烎@ 2023-05-28 15:46 269阅读 0赞

# 面向对象编程 OOP #

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

面向过程 POP

分析问题所需要的步骤

面向对象OOP

以功能对象划分问题

二者比较：

<table> 
 <thead> 
  <tr> 
   <th align="center"></th> 
   <th align="center">面向对象</th> 
   <th align="center">面向过程</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">优</td> 
   <td align="center">灵活 复用 维护</td> 
   <td align="center">性能高</td> 
  </tr> 
  <tr> 
   <td align="center">缺</td> 
   <td align="center">性能比面向过程低</td> 
   <td align="center">没有面向对象灵活、复用、维护</td> 
  </tr> 
 </tbody> 
</table>

## 2 类和对象 ##

笔记本 　　　泛指 　　 类  
mac笔记本 　具体　　实例

动物 猫

### 2.1 面向对象思维特点 ： ###

1.  抽取对象共用的属性和行为组织成一个类
2.  对类进行实例化

### 2.2 对象 ###

属性：事物的特征 名词

方法：事物的行为 动词

#### 2.2.1 创建对象 ####

// 对象直接量
    var zs = { 
        name: 'zhangsan',
        age: 18
    };
    // new Object() 通过构造函数创建 new Array()
    var obj = new Object();
    console.log(obj);
    
    // 自定义构造函数
    function Cat() { 
        this.color = 'black';
    }
    var c1 = new Cat(); // 类的实例 根据类创建一个具体对象

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

构造函数是一种特殊的函数，主要用来创建对象，总是与new一起  
使用（通过new调用）

### 3.1 new 构造函数 ###

1.  在内存中创建一个新的空对象 \{\}
2.  让函数中的this指向空对象 this === \{\}
3.  开始执行函数体 \{age: 22, xueli: ‘benke’\}
4.  返回该对象 (构造函数中不需要写return)

function Girl() { 
        console.log(this);
        this.age = 22;
        this.xueli = 'benke';
    }
    var girl1 = new Girl(); // {age: 22, xueli: 'benke'}
    var girl2 = new Girl();
    console.log(girl1);
    console.log(girl1 === girl2); // false

### 3.2 构造函数说明 ###

构造函数添加：

1 构造函数内部this添加——**实例成员** 访问实例成员 **对象.成员**

2 在构造函数本身添加的成员——**静态成员** 只能通过**构造函数**去访问 一般用于创建公共属性

### 3.3 原型 ###

#### 3.3.1 原型定义的函数是**可共享**(将来构造函数的实例都可以共享) ####

每一个构造函数都有一个prototype属性，指向一个对象，假如该对象定义了属性和方法 这些都会被构造函数拥有。

#### 3.3.2 对象属性( \_\_ proto \_\_) ####

**对象**都会有一个属性\_\_ proto \_\_(非标准属性，开发不要使用)，指向构造函数的prototype原型对象。

图解：

![在这里插入图片描述][10bc5d4f39f1f144a82cc5b24c27030c.png]

#### 3.3.3 构造函数原型prototype属性 constructor ####

构造函数原型prototype属性 constructor，它的值指向构造函数。

Student -----------> Student.prototype

Student < ----------- Student.prototype.constructor

// 构造函数
    function Student(name, age) { 
        this.name = name;
        this.age = age;
    }
    /* Student.prototype.study = function() { console.log('good good study'); } Student.prototype.run = function() { console.log('running'); } */
    Student.prototype = { 
        constructor: Student, // 千万别忘记，不然会被重新赋值，丢失此属性
        study: function() { 
            console.log('good good study');
        },
        run: function() { 
            console.log('running');
        }
    }
    var zs = new Student('zs', 18); // 实例对象
    var lisi = new Student('lisi', 22);
    zs.study();
    zs.run();
    console.log(Student.prototype);
    
    /* 原型对象 对象原型 console.log(Student.prototype === zs.__proto__); console.log(Student.prototype.constructor); console.log(zs.constructor === Student); console.log(zs.constructor === zs.__proto__.constructor); console.log(zs.constructor === Student.prototype.constructor); */

#### 3.3.4 原型链 ####

JS成员查找机制-**原型链查找机制**：

当我们访问一个对象的成员(方法或属性) 首先看自己有没有 ，假如没有就查找它的原型(也就是它的\_\_ proto \_\_)，假如还没有，查找原型对象的原型(Object的原型对象)，依次类推最终，找到Object。

图解：

![在这里插入图片描述][c7fd8f2ca064a6816f122cd0932a273f.png]

### 推荐 ###

在最后也推荐几篇我认为写得非常好的关于面向对象的文章:

*  [Javascript 面向对象编程（一）：封装][Javascript]
 *  [Javascript面向对象编程（二）：构造函数的继承][Javascript 1]
 *  [Javascript面向对象编程（三）：非构造函数的继承][Javascript 2]

[10bc5d4f39f1f144a82cc5b24c27030c.png]: /images/20230528/6ba7627e91644f118846d168f4aa95fe.png
[c7fd8f2ca064a6816f122cd0932a273f.png]: /images/20230528/0b078dd4d4f04ab4a4b777d4c74c9614.png
[Javascript]: http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html
[Javascript 1]: http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html
[Javascript 2]: http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance_continued.html