（javascript）（基础知识+实例） 18.实现类的功能

本文链接：https://blog.youkuaiyun.com/sj1877288470/article/details/126845008

面向对象

是一门编程思想
核心思想：利用自定义构造函数创建对象，利用this来给对象添加属性，利用构造函数prototype来添加对象的方向，利用创建出来的对象解决开发问题
创建对象给对象添加属性和方法
- 字面量和内置构造函数
  - 优点：简单
  - 缺点：代码冗余不方便维护
- 工厂函数
  - 封装一个函数，这个函数首先创建了一个空对象，给这个空对象添加属性添加方法，返回这个创建的对象
  - 只要调用这个函数一次得到一个对象
  - 优点：代码简洁有利于维护
  - 缺点：
    1. 需要手动创建并且返回对象
    2. 所有创建出来的对象方法使用的不是同一份
- 自定义构造函数
  - 只要把属性和方法添加到这个this上面
  - 优点：不需要手动创建并返回对象
  - 缺点: 所有创建出来的对象方法使用的不是同一份
- 原型
  - 每一个函数都有一个属性叫做prototype
  - 每一个对象都有一个属性叫做__proto__
  - 每一个实例对象的__proto__和它的构造函数prototype是同一个地址
- 利用原型添加方法
  - 把所有的方法添加到构造函数的prototype就相当于给每一个实例的__proto__添加了方法
  - 实例直接访问这个方法也是可以的这是原型链访问原则
- 原型链
  - 一个对象访问属性和方法会优先在自身查找自身有就使用自身
  - 自身没有就自动往它的__proto__找
new干了几件事
- 在构造函数内部创建了一个空对象
- 将构造函数内部this指向到这个创建出来的空对象
- 在构造函数结束的时候返回了这个空对象

class 类

es6新增的
新增的目的是为了替换es5里面构造函数+原型的写法
什么是类？
- 将某些具有相同特性的对象进行概括
在编程里面是用类来创建具有某些特性的对象
在es5里面使用原型+构造函数来实现类的功能
在es6里面新增了class的语法，这个语法仅仅只是一个语法糖，仅仅只是一种写法，底层还是由原型+构造函数实现的

class的语法

    class 类名{
        constructor(参数,参数){
            this.属性名 = 参数
            this.属性名 = 参数
        }
        方法名(){

        }
        方法名(){

        }
    }

es6 Module语法模块语法

模块：每一个js文件都是一个独立的模块
模块化管理：在一个js里面导入另一个js
项目里面有很多js文件，可以按照依赖的顺序引入文件
导入
- import ‘路径’ 只是引入了某个文件将这个文件执行了，另外一个文件无法使用导入文件里面的变量和方法
- import {数据, 数据} from ‘路径’ 单个导入
- import 变量名 from ‘路径’ 默认导入
导出
- 某个文件需要被别的文件导入，需要将这个文件里面的变量和方法暴露出来
- 单个导出 export {数据,数据…}
- 默认导出 export default 数据
注意事项：
- 一旦某个js文件使用module语法，导入这个文件的时候需要在script标签上面加上type=“module”，这样浏览器就能识别你导入的文件使用了module语法
- 一旦引入的js使用了module方法，需要这个js在服务器环境打开，不能本地打开（打开路径协议不能是file://）,必须是http或者https协议
- vscode里面可以安装一个插件live server

思路

实现地图类
- 可能需要不同大小的地图

实例

（以下代码均为课程实例）

（1）es5里面实现类的功能

    <script>
        // 定义了一个类 添加属性 添加方法
        // 构造函数
        function Person(username, cardNo){
            this.username = username
            this.cardNo = cardNo
        }
        // 原型
        Person.prototype.say = function(){
            console.log('说话')
        }
        Person.prototype.walk = function(){
            console.log('直立行走')
        }
    
        // 实例化类 得到一个对象
        // 凡是由这个Person类实例得到的对象都会有类的属性和方法
        var p1 = new Person('张三', '102222')
        var p2 = new Person('李四', '10211122')
        console.log(p1)
        console.log(p2)
    </script>

（2）es6里面实现类的功能

    <script>
        class Person{
            // 每一个类里面都自带一个constructor的构造函数，这个构造函数会在实例化这个类的时候自动调用一次
            // 可以在constructor里面接收传过来的参数
            constructor(username, cardNo){
                // console.log('调用了')
                // console.log(username, cardNo)
                // 可以在此处利用this来添加属性
                this.username = username
                this.cardNo = cardNo
            }
            
            // 只要在类里面直接写这个方法就可以 会自动将这个方法添加到构造函数原型上面
            say(){
                console.log('说话')
            }

            walk(){
                console.log('直立行走')
            }
        }
        // 可以利用这个类来创建对象 
        var p1 = new Person('张三','312312312312312') // 实例化类
        var p2 = new Person('李四', '34645323412312') // 实例化类
        console.log(p1)
        console.log(p2)
    </script>