关于javascript:day16-初识面向对象编程

6次阅读

共计 2694 个字符，预计需要花费 7 分钟才能阅读完成。

面向过程: 强调过程步骤
面向对象: 强调对象

剖析：围棋程序

面向过程:

1. 黑棋落子 2. 绘制棋盘 3. 判断输赢 4. 白棋落子 5. 绘制棋盘 6. 判断输赢 7. 黑棋落子

面向对象：

1. 棋子 2. 棋盘 3. 规定

对象 (初步概念)：你看到的，你想到的，无形的，有形的事物，都是对象。概括来说就是：万物皆为对象。

类: 是具备雷同属性和行为的对象的汇合（模板）。

对象: 依据类的属性和行为创立的实例化。

类: 定义了对象的属性和办法，通过类能够实例化多个该类的对象，每个对象的属性值不同，能够说类好比设计图纸，而对象好比依据图纸建设进去的多栋楼房。

举例：

类：学生

对象：小明老王大黄

思考：

类：水果

对象：苹果西瓜芒果（对象得更具体，比方这个苹果，小明手里的苹果等）

面向对象：

面向对象的思维曾经不仅仅是编程思维，曾经扩大到设计、测试等各个方面；

面向对象指的是以对象为根本单位去剖析、设计以及实现零碎；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        
    </body>
</html>
<script type="text/javascript">
    
    // ES5 定义类的办法
    // 通过函数来模仿类 <-> 构造方法：只能和 new 关键词连用，创建对象
    function Student(name,age,score){
        // this 代表 new 进去的对象自身
        this.name = name;//this.name 相当于给 this 增加自定义属性
        this.age = age;
        this.score = score;
            
        this.eat = function(){console.log('eat()');
        }
        this.study = function(){console.log('study()');
        }
        this.showValue = function(){
        // 在类的办法里如果想要应用类的其余办法或属性，须要加 this 前缀
        // 这个 this 代表调用该办法的对象自身
            console.log(this.name,this.age,this.score);
            this.eat();
            this.study();}
    }
    
    // new 在堆上依照 Student 的模板开拓空间, 返回该空间的地址;
    // 与 new 连贯的函数, 称为构造函数
    let s1 = new Student('王国文',18,100);
    
    console.log(s1.name);
    s1.eat();
    s1.showValue();    
</script>

类的定义：

class 类名 {
    类体;
    // 构造方法中通过 this 增加属性
    // 一般办法间接写，不要加 this
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
</html>
<script type="text/javascript">
    class Student{
        // 构造方法中通过 this 增加属性
        constructor(name,age,score) {
            this.name = name;
            this.age = age;
            this.score = score;
        }
        eat(){console.log('eat()');
        }
        sleep(){console.log('sleep()');
        }
        showValue(){console.log(this.name, this.age,this.score);
            this.eat();
            this.sleep();}
    }
    let s = new Student('王国文',18,100);
    s.eat();
    s.showValue();
</script>

在面向对象中，关联关系的代码表现形式为一个类的对象做为另一个类的属性类型存在。

即“有”的关系：”has-a”。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
</html>
<script type="text/javascript">
    class Birthday{constructor(y,m,d) {
            this.y = y;
            this.m = m;
            this.d = d;
        }
        showValue(){console.log(this.y,this.m,this.d);
        }
    }
    class Student{constructor(name,score,bir){
            this.name = name;
            this.score = score;
            this.bir = bir;
        }
        showValue(){console.log(this.name,this.score);
            this.bir.showValue();}
    }
    let bir = new Birthday(2021,1,18);
    let s = new Student('迪迦',100,bir);
    console.log(s.bir.y, s.bir.m, s.bir.d);//2021 1 18
    s.showValue();
    
</script>

依赖关系 (use-a)：指一个类 A 应用到了另一个类 B；一个类的函数的参数，是另一个类的对象

依赖关系的个性：这种关系是具备必然性的、临时性的、十分弱的，然而类 B 的变动会影响到类 A。

1. 剖析问题, 找出该类有几个对象
2. 依据对象形象出形象出对象的办法和属性，设计类
3. 各个对象各司其职 (按顺序调用各个对象)

有一辆小汽车行驶在一条公路上，计算这量小汽车以 60KM/ 小时的速度，行驶 1000KM 须要多久。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
</html>
<script type="text/javascript">
    class Car{constructor(speed) {this.speed = speed;}
        // 将 Road 类的某个对象传进来
        time(r){return r.len/this.speed;}
    }
    class Road{constructor(length) {this.len = length;}
    }
    let c = new Car(60);
    let r = new Road(1000);
    
    console.log(c.time(r));
</script>

正文完