• 【javaScript面向对象-模块化-面相关对象编程——行走的方块案例】

    什么是对象

    其实就是一种类型，即引用类型。而对象的值就是引用类型的实例。
    在ECMAScript中引用类型是一种数据结构。用于将数据和功能组织在一起，它也常被称做为类，但ECMAScript中却没有这种东西。虽然ECMAScript是一门面向对象的语言。却不具备传统面向对象语言所拥有的类和接口等基本结构。

    万物皆对象，除了数字，字符，布尔这种绝对值以外的所有部分都是对象， 对象是类的实例化体现，类是对象的抽象体现。

    对象是一个个体，他具备自身类的所有属性和方法。

    通过一个类创建一个实例对象：var obj=new Object();

    类，基类，超类，子类，父类，实例化
    面向对象的三要素：封装，继承，多态
    类： 具有相同特征，相同表现，相同方法的集合抽象体

    实例化:类的具象化表现 new 类()
    var obj=new Object();

    class 男朋友{
    // 实例化属性
    name="";
    age=18;
    constructor(_name){
        // 构造函数 真实的名称就是男朋友
        this.name=_name;
        // 这里的this指向new 产生的实例化对象
    }
    // 实例化方法
    编程(){
        console.log(this.name+"编程！");
    }
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 在这 new 的时候就会执行男朋友类的constructor函数
    • 声明实例化（即类里面定义各种）属性后，这个new出的实例化对象就必然有这个实例属性
    • 实例化方法中和构造函数中this的指向都是你new出的实例化对象
    • 在构造函数中不能使用return 返回一个值，可以使用return跳出

    实例化方法必须使用new出来的实例化对象调用
    实例化方法是为了让每个独立的实例化对象完成自身所需要运行方法
    实例化方法中和构造函数中this的指向都是new出的实例化对象

    var arr=new Array();
console.log(arr.constructor===Array)

class Array{
    static LEN=3;
    constructor(){
        console.log(this)
    }
    push(){
        console.log(this)
    }
    unshift(){

    }
    pop(){

    }
    shift(){
  		在实例化方法中可以通过类名调用到静态方法，不能使用this访问静态方法
  		 Array.isArray()
    }
    static isArray(){
        Array.from();
        // 不能在静态方法中直接通过this调用实例化方法
    }
    static from(){
       
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 静态属性须使用类名调用，不需要实例化对象，在任何位置导入类后，都可以直接通过类名调用，这个静态属性，相当于一个全局的对象属性
    • 静态方法 静态方法必须使用类名调用
    • 静态方法是为了处理这一类别相关的内容，并不是针对某个实例化的对象
    • 静态方法中的this，因为静态方法是直接通过类来调用，所以this指向类名
    • 为了不和实例化的this发生混乱，在静态方法中不建议大家使用this，直接使用类名即可

    extends 继承

    class Box{
    a=1;
    name="";
    constructor(_name){
        this.name=_name;
    }
    play(){
        console.log("play");
    }
    jump(){
        console.log("jump");
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 继承后必须在构造函数中使用super方法来调用执行超类的构造函数
    • 参数和临时属性尽量使用_起头
    • 全部重写
    • 部分重写——super.jump();调用超类中原有jump方法，然后再重写新添加的内容
    class Ball extends Box{
    age=20
    // 参数和临时属性尽量使用_起头
    constructor(_name,_age){
        // 继承后必须在构造函数中使用super方法来调用执行超类的构造函数
        // 必须在第一行中使用super方法调用 ，super()可以理解为执行了超类的构造函数
        super(_name);
        this.age=_age;
    }
    run(){
        console.log("run")
    }
    // 重写  override
    play(){
        console.log("plays")
    }
    jump(){
        super.jump();//调用超类中原有jump方法
        // 然后再重写新添加的内容
        console.log("jump123")
    }
}

var b=new Ball("bBall",26);
b.play();
b.run();
b.jump();
console.log(b)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    模块化

    使用模块化，必须使用type=module属性
    必须使用web服务方式打开

     <script type="module">
 </script>

    • 1
    • 2

    导入

    从a.js导入这个类，赋值给A

    import A from "./js/A.js";
var ab=new A();
ab.play();

    • 1
    • 2
    • 3
    import B from "./js/B.js";
new B();
import obj from "./js/C.js";
console.log(obj);

    • 1
    • 2
    • 3
    • 4

    多个导入

    Identifier 'obj' has already been declared 导出的obj与这个变量同名
    同一文件下不可重名

    导出时的名字必须和这里名称统一
as 就是起别名obj1
import {obj as obj1,ab,D,arr} from "./js/D.js";

    • 1
    • 2
    • 3
    var obj={c:1,d:2};
console.log(obj);
console.log(obj1)
ab();
var d=new D();
console.log(d);
console.log(arr);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    混合导入

    import E,{obj,ab} from "./js/E.js";

console.log(obj);
ab();

var e=new E();
console.log(e);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    导出

    • 使用export default后面不能直接使用var let const定义
    export default class A{
    constructor(){

    }
    play(){
        console.log("play")
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    export 导出多个时，没有default，这个时候必须使用var定义的变量，必须在导出function定义函数的名字

    export var obj={
    a:1,b:2
}
export function ab(){
    console.log("ab")
}
export class D{

}
export var arr=[1,2,3,4];
那么导入的时候就是：
import {obj as obj1,ab,D,arr} from "./js/D.js";

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    行走的方块案例

    在这里插入图片描述

    <!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>Document</title>
</head>
<body>
    <script>
        class Rect{
            // 注意属性初值的添加
            elem;
            bool= false;
            x=0;
            static list = new Set();
            constructor(){
                // 创建一个div给实例对象的elem属性
                this.elem = document.createElement('div');
                // 给这个div添加样式
                Object.assign(this.elem.style,{
                    width:"50px",
                    height:"50px",
                    backgroundColor:'red',
                    position:"relative",
                    left:0,
                })
                // 在实例化后，将实例化的对象存在全局list属性列表中，静态方法的调用
                Rect.list.add(this);
                // 将this.elem添加到body之后
                document.body.appendChild(this.elem);
                // 给每个this.elem侦听；箭头函数this指向函数外
                this.elem.addEventListener('click',e=>this.clickhandler(e));
                console.log('aas');

            }
            /* 点击之后是将布尔值互转 */
            clickhandler(e){
                this.bool = !this.bool;
            }
            /* 刚开始条件限制不执行 */
            update(){
                if(!this.bool) return;
                this.x++;
                this.elem.style.left = this.x+'px';
            }
            /* 将得到的实例全部放在静态set集合中，遍历执行实例方法 */
            static upDate(){
                for(var item of Rect.list){
					  // 执行每一个实例的update方法
                    item.update();
                }
            }

        }
        for(var i=0;i<5;i++){
            new Rect();
        }
        /* 每16微秒执行一次静态方法 */
        setInterval(function(){
            Rect.upDate()
        },16)
        

    </script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
  • 相关阅读:
    MFC项目添加CUDA支持
    Linux 命令（202）—— traceroute 命令
    lumina电源维修CCPF-1700-1.5P-SYS美容仪器电源维修注意事项
    ROS自学笔记十八：ModuleNotFoundError： No module named ‘serial‘
    无人机航迹规划：五种最新智能优化算法（COA、SWO、KOA、GRO、LO）求解无人机路径规划MATLAB
    跨链桥：用零知识证明桥接多链宇宙
    【算法分析与设计】回溯法（下）
    AI智能电话机器人实用吗
    Jenkins Jenkinsfile管理 Pipeline script from SCM
    EdrawMax思维导图,EdrawMax组织结构图
  • 原文地址：https://blog.csdn.net/m0_46672781/article/details/126028493