javascript中的面向对象详解

Myth丶恋晨 2023-07-10 08:47 3阅读 0赞

#### 什么是面向对象 ####

*  用对象的思想去写代码，就是面向对象棉城

#### 面向对象的特点 ####

*  抽象： 抓住核心问题
 *  封装：只能通过对象来访问方法
 *  继承：从已有对象上继承出新的对象
 *  多态：多对象的不同形态

#### 对象的组成 ####

*  方法：对象下面的函数叫做对象的方法
 *  属性：对象下面的变量，就叫做对象的属性

#### 构造函数 ####

*  一个函数被new 调用了之后，那这个函数就是一个构造函数
 *  **当new去调用一个函数的时候，那这个函数体中的this就是创建出来的对象，而且这个函数的返回值就是this（隐式返回）**

function createPerson(name) { 
      this.name = name;
      this.showName = function () { 
        console.log(this.name)
      }
      // 这里的this就是指p这个对象，并将其返回
    }
    // 现在这个createPerson这个函数没有return但是这里隐式返回了p这个对象
    var p = new createPerson('小明');
    p.showName();

#### 对象的引用 ####

*  基本类型  
    赋值的时候就是值得复制
 *  对象类型  
    不仅是值得复制，还包括地址的引用

var a = [1,2,3];
    var b = a; // 将a的值赋值给b，并将a的地址（住的地方）给b
    b.push(4); // 修改b: 在b的末尾添加4
    console.log(b); // [1,2,3,4]
    console.log(a); // [1,2,3,4]
    
    var a = [1,2,3];
    var b = a; // 将a的值赋值给b，并将a的地址（住的地方）给b
    b = [1,2,3,4]; // 重新给b赋值，相当于在内存中重新生成了一个新的对象，和a对象没有关系了
    console.log(b); // [1,2,3]
    console.log(a); // [1,2,3,4]

**只要在程序中赋值，那必然会在内存中重新生成，相当于将原来的值给删除了，在申明并赋值**

#### 原型 prototype ####

*  **prototype原型对象**： 默认每个函数对象都有prototype属性，prototype对象中默认有一个constructor
 *  **\_\_proto\_\_原型属性**：默认每个对象都有\_\_proto\_\_ 属性，改属性默认指向创建对象对应的构造函数中的prototype
 *  js中的对象都是基于原型的对象，使用prototype的目的就是资源共享  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTY4NjcxMw_size_16_color_FFFFFF_t_70]
 *  对象属性调用：  
    先在自身空间中查找，如果有就直接使用，没有就在原型中查找； 如果原型不存在，就在原型的原型中查找（这种链式的关系称之为原型链），如果一直不存在，最终会找到原型链的终点（Object.prototype）,如果在终点中还没有找到，待调用改属性，则返回undefined  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTY4NjcxMw_size_16_color_FFFFFF_t_70 1]

#### 对象的继承 ####

*  构造函数的的继承
    
    缺点：不能继承父类原型的方法

*  原型连继承
    
    缺点： 当你在子类的原型添加新的方法的时候，在父类的原型上也会有这个方法, 并且父类和子类的constructor都指向父类

*  组合继承

那种通过这种方式就可以完美的解决问题了面向对象的继承的问题

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTY4NjcxMw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200301214123103.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTY4NjcxMw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTY4NjcxMw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200302102147653.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTY4NjcxMw==,size_16,color_FFFFFF,t_70