面向对象编程详解：概念、特性与实战应用-优快云博客

本文链接：https://blog.youkuaiyun.com/ww_Filling_it/article/details/125285877

概念
- 什么是“对象” 不了解内部结构，只知道表面的操作
- 什么是“面向对象” 不了解原理的情况下，会使用功能
- 面向对象是一种思想，生活中处处都可以应用，万事万物都是对象
面向对象
- 特点
  - 封装
    - 不考虑内部实现，只考虑功能使用
    - 人的因素
      - 用对象的人
      - 写对象的人用封装把一堆属性和方法集合在一起
  - 继承
    - 目的：最大限度重用代码
    - 多重继承慎用
    - 遗传，龙生龙凤生凤，老鼠的儿子会打洞
  - 多态表现的形式太弱
  - 抽象抓住核心问题抽：抓
- 组成
  - 属性变量：就是同一个东西，场景不同，称呼不同
  - 方法函数，阐述同上
- 恶心点
  - this该方法指向谁（属于）谁
  - this占了95%
- js中常见对象
  - Array 数组用来存储数据
  - Date 日期
  - RegExp 正则，用以字符串验证
  - Object 可以理解为空对象，啥都没有，没意味着啥都可以往上添加没有功能
怎么写对象
- 使用Object
- 字面量创建/json
- 工厂模式
- 构造函数创建对象（推荐）
  - 是一种构造函数
  - 构造函数就是用来创建对象的
  - 为了与其他的函数进行区分，将函数名首字母大写
- 原型prototype
  - 什么是原型
    - 公共汽车
    - js中表示该组对象公用的
  - 类与对象
    - 什么是类
      - 模型
        月饼模子
        
        Array
        
        Date
      - 成品
    - 什么是对象
      - 产品，实例
        月饼
        
        arr = [1,2,3]
        
        date
  - 原型是往类(模型/构造函数)上添加的
    - Array.prototype.sum = function(){}
  - 开发常用模式
    - 构造函数加属性，原型加方法
    - 也就是4+原型
系统对象
- 本地（非静态）
  - Object
  - Array
  - Date
  - Number
  - Boolean
  - String
  - Function
  - RegExp
  - Error
- 内置（静态）
  - Math
- 宿主
  - DOM/BOM
  - 浏览器提供的
三大特性
- 封装
  - 目的：将信息隐藏以上的行为都属于隐藏
  - 共有、私有
    - 略略略
- 继承
  - 目的：找到共性，精简代码，提高重用性
    - 属性继承：call(),apply()
      - 改变父级构造函数内部的this
    - 原型继承：B.prototype = A.prototype
      - 这里有引用的问题
      - 修改A就会修改B，修改B就会修改A
    - 原型继承（推荐）
      - for(var x in A.prototype){
      - B.prototype[x] = A.prototype[x];
      - }
    - 子级对象原型指向父级对象实例
      - B.prototype = new A();
      - B.prototype.constructor = B;
- 多态（在js中存在感很弱）
  - 目的：使语言具有动态性，具有更好的通用性
特征
- 封装，将一堆方法和属性放在一起
- 继承，最大限度重复代码
- 多态，不同类的同名方法
- 抽象，抓住核心问题
构造函数与析构函数
- 构造函数：开辟内存空间
- 析构函数：释放内存空间
this指向实例对象本身
原型：该类的公共存储空间，用于节省内存
原型链：当访问对象的某个属性或方法时，现在自己的构造函数中寻找，如果没有，就在自己的原型中找，如果还没有，就找原型的原型，一直找到Object的原型，这样形成的一个链条称之为原型链
我们使用call和apply方式实现构造函数的继承
call和apply的作用：改变this的指向

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿微信朋友圈</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        html {
            font-size: 62.5%;
        }

        .container {
            width: 320px;
            height: 568px;
            box-shadow: 1px 1px 3px gray;
            margin: 0 auto;
            overflow: scroll;
        }

        ul {
            background-color: #e5e5e5;
        }

        li {
            background-color: #fff;
            margin-bottom: 1px;
            font-size: 1.6rem;
        }

        li>img {
            width: 56px;
            height: 56px;
            border-radius: 4px;
            float: left;
            margin: 10px;
        }

        li>div {
            width: 236px;
            float: left;
            margin-top: 10px;
        }

        li>div .nick {
            color: #546589;
        }

        li>div .words {
            line-height: 20px;
        }

        li>div .pics {
            overflow: hidden;
        }

        li>div .pics img {
            width: 75px;
            height: 75px;
            float: left;
            margin-right: 1px;
            margin-top: 1px;
        }

        li>div .link {
            display: block;
            height: 50px;
            background-color: lightgrey;
            margin: 10px 0;
        }

        li>div .link img {
            float: left;
            width: 50px;
            height: 50px;
        }

        li>div .link p {
            float: left;
            width: 180px;
            overflow: hidden;
            line-height: 50px;
            margin-left: 3px;
            color: black;
        }

        li>div .videoImg {
            display: block;
            width: 220px;
            height: 160px;
            margin: 10px 0;
        }

        li>div .adLink {
            display: block;
            width: 180px;
            height: 200px;
            margin: 10px 0;
        }

        li>div .adLink img {
            display: block;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="container">
        <ul>
            <!-- info -->
            <!-- <li>
                <img src="" alt="">
                <div>
                    <p class="nick">张三</p>
                    <p class="words">床前明月光，疑是地上霜！床前明月光，疑是地上霜！床前明月光，疑是地上霜！</p>
                    <div class="pics">
                        <img src="" alt="">
                    </div>
                    <p class="time">1小时前</p>
                </div>
            </li> -->
            <!-- link -->
            <!-- <li>
                <img src="" alt="">
                <div>
                    <p class="nick">张三</p>
                    <p class="words">床前明月光，疑是地上霜！床前明月光，疑是地上霜！床前明月光，疑是地上霜！</p>
                    <a href="###" class="link">
                        <img src="" alt="">
                        <p>这是个链接</p>
                    </a>
                    <p class="time">1小时前</p>
                </div>
            </li> -->
            <!-- video -->
            <!-- <li>
                <img src="" alt="">
                <div>
                    <p class="nick">张三</p>
                    <p class="words">床前明月光，疑是地上霜！床前明月光，疑是地上霜！床前明月光，疑是地上霜！</p>
                    <img class="videoImg" src="" alt="">
                    <p class="time">1小时前</p>
                </div>
            </li> -->
            <!-- ad -->
            <!-- <li>
                <img src="" alt="">
                <div>
                    <p class="nick">张三</p>
                    <p class="words">床前明月光，疑是地上霜！床前明月光，疑是地上霜！床前明月光，疑是地上霜！</p>
                    <a class="adLink" href="###">
                        <img src="" alt="">
                    </a>
                    <p class="time">1小时前</p>
                </div>
            </li> -->
        </ul>
    </div>
</body>
<script src="js/data.js"></script>
<script src="js/model.js"></script>
<script src="js/view.js"></script>
<script>
    data.forEach(function (obj) {
        var model = createModel(obj);
        var view = createView(model);
        document.querySelector('ul').appendChild(view);
    })
</script>

</html>


<!-- MVC:
1. 解释他是什么
是一种设计理念,将代码进行逻辑分离，
分离成控制层、视图层及数据层三层

2. 有什么作用
降低了耦合度，提高了代码的扩展性，易修改性

3. 我在哪用过解决了什么问题 -->

面向对象及OOP