day16 初识面向对象编程

1. 面向对象和面向过程的区别

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

分析:围棋程序

面向过程:

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

面向对象:

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

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

2. 类与对象的概念

类: 是具有相同属性和行为的对象的集合(模板)。

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

类:定义了对象的属性和方法,通过类可以实例化多个该类的对象,每个对象的属性值不同,可以说类好比设计图纸,而对象好比根据图纸建设出来的多栋楼房。

举例:

​ 类: 学生

​ 对象: 小明 老王 大黄

思考:

​ 类: 水果

​ 对象 : 苹果 西瓜 芒果(对象得更具体,比如这个苹果,小明手里的苹果等)

面向对象:

面向对象的思想已经不仅仅是编程思想,已经扩展到设计、测试等各个方面;

面向对象指的是以对象为基本单位去分析、设计以及实现系统;

3. ES5 构造方法

<!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>

4. ES6 构造方法

类的定义:

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>

5. 类与类的关系

1)组合关系

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

即“有”的关系:”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>

2) 依赖关系

依赖关系(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>

shasha
28 声望7 粉丝

« 上一篇
day15 DOM运动
下一篇 »
day 30 jQuery