19. 面向对象

JS 中的面向对象

JS 中的面向对象,是基于原型的面向对象。JS 中的对象(Object)是依靠构造器(constructor)和原型(prototype)构造出来的。

另外,在ES6中,新引入了 类(Class)和继承(Extends)来实现面向对象。

对象:类的实例化,真实存在的 类:拥有相同属性和行为的对象集合,它
且唯一 是一个模板,不是真实存在的

程序 = 算法 + 语法;
算法:强调的是步骤,一步接一步
缺陷:1.随着问题规模的增加,代码变得逐渐难以控制
2.复用性较差,只能复用函数

五子棋 围棋
a.绘制棋盘 重写
b.黑棋落子
c.判断输赢
d.白棋落子
c.判断输赢

万物皆为对象,先找对象
程序 = 对象 + 对象 + ... + 对象

五子棋 围棋
a.棋子
b.棋盘
c.规则 新的规则对象
d.悔棋

如果有新的需求,则直接添加新的对象即可

面向对象的编程思想,核心问题在于优先分析对象,
(步骤肯定也需要,但是并不会优先考虑)

披着面向对象语法的面向过程代码

ES5方法创建类

通过函数模拟类
// 被当做类的函数也称为构造函数,通过该函数来创建对象

// this的作用:
//1.与事件体连用,代表触发给事件的元素本身
//2.与普通方法连用(不是事件体和构造方法),代表调用该函数的对象
//3.与构造方法连用,代表new出来的对象
//4.与箭头函数连用,代表其父元素的前缀
//类的定义(创建)
    function Student(name,id,score){
        //成员属性
        this.name = name;
        this.id = id;
        this.score = score;

        //成员方法
        this.sleep = function(){
            console.log("sleep");
            console.log(this.id);
        }

        this.eat = function(){
            console.log("eat");
        }

        //在一个成员方法中要使用其他的成员,
        //必须加this前缀
        this.showValue = function(x){
            console.log(this.name,this.id,this.score);
            this.sleep();
            this.eat();
            console.log(x);
        }
    }

    //对象的创建
    //new是和构造函数连用的关键字
    //作用为在堆上开辟该类型的对象存储空间
    let s1 = new Student("武僧佩佩",9527,100);

    //对象的使用
    //对象.属性名
    // console.log(s1.name);
    // console.log(s1.id);
    // console.log(s1.score);
    // s1.eat();
    // s1.sleep();
    s1.showValue(123123);

    // let s2 = new Student("凢凢",111,13);
    // console.log(s2.name);
    // console.log(s2.id);
    // console.log(s2.score);
    // s2.eat();
    // s2.sleep();

    // let json = {
    //     a:123,
    //     // fun:function(){
    //     //     console.log(this);
    //     // }
    //     fun:()=>{
    //         console.log(this);
    //     }
    // }

    // json.fun();

ES6方法创建类

// 语法糖:底层不变,上层换了个写法忽悠你,还是那么挫

    // class 类名{
    //     // 构造方法:定义成员属性
    //     constructor(){

    //     }

    //     // 普通方法:去掉function关键字的成员方法
    // }

    // 类
    class Student{
        constructor(name,id,score){
            this.name = name;
            this.id = id;
            this.score = score;
        }

        sleep(){
            console.log("sleep");
        }

        eat(){
            console.log("eat");
        }

        showValue(){
            console.log(this.name,this.id,this.score);
            this.sleep();
            this.eat();
        }
    }

    let s1 = new Student("老王",1111,9999);

    s1.showValue();

image-20221206195753345

类的组合

 // 组合:一个类的对象是另一个对象的成员。
    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,id,score,bir){
            this.name = name;
            this.id = id;
            this.score = score;
            this.bir = bir;
        }

        showValue(){
            console.log(this.name,this.id,this.score);
            this.bir.showValue();
        }
    }

    let bir = new Birthday(1990,12,29);
    let s = new Student("凢凢",9527,100,bir);

    s.showValue();
posted @ 2022-12-10 09:33  千帆qf  阅读(50)  评论(0)    收藏  举报