面向对象和面向过程 ES6-class类

面向对象和面向过程

    // 从面向过程,改造成面向对象
    // 1,获取的数据,标签对象,要以参数的形式,定义给构造函数和实例化对象
    //   获取标签对象时,一般获取父级,传参父级,在构造函数中,通过父级标签,获取子级标签独享
    // 2,必须非常非常非常注意,this的指向,一般在面向对象中,都是使用箭头函数
    //   如果万一不能清楚地知道this指向,可以先输出 this
    // 3,其他步骤和思路基本相同,没有区别

    // 总结:
    // 1,改不改箭头函数,看内部是否需要 指向实例化对象的this 
    //   如果需要,可以改箭头函数,或者是提前存储this指向
    //   如果不许需要,改不改箭头函数都行
    //   一切以实现程序为最终需求,程序能执行就可以
    // 2,之前面向过程的是参数,数据等,
    //   现在是面向对象编程,要在对象的属性中,定义参数数据
    //   也就是通过 构造函数 this.属性 = 属性值 语法来定义需要获取的参数数据
    // 3,定义在构造函数方法中的一些变量数据,并不是定义在实例化对象中的属性
    //   没有必须写成 this.属性 = 属性值 的形式
    //   只要写成普通的变量定义即可 
    //   使用时,也是直接使用变量,不需要添加this
    // 4,在构造函数的方法中,调用其他的函数方法
    //   语法形式 应该是 实例化对象.函数方法名称()
    //   在构造函数中,使用this来指向实例化对象,写成 this.函数方法名称()

ES6 class类

 <script>
    // ES5的构造函数有一些问题
    // 最大的问题,就是定义 prototype 是在函数之外定义的
    // 调用构造函数,生成实例化对象,一定要在定义 prototype 之后
    // 否则生成的实例化对象,只有属性没有函数方法

    // ES6中,新增语法形式 class 类
    // 是一种新的定义构造函数的语法
    // 作用和原理与ES5语法完全相同
    // 只是语法格式和书写方式,不同
   
   
   
    // 如果先调用构造函数,只有属性没有方法
    // 因为定义方法的步骤还没执行呢
    const obj1 = new Fun('张三');
    // obj1.f()  // 执行结果是报错的

    function Fun(name){
        this.name = name;
    }
    // 在定义函数外,定义prototype
    Fun.prototype.f = function(){
        console.log(this.name)
    }


    const obj2 = new Fun('李四');
    obj2.f();

</script>
<script>
    // ES5和ES6语法的对比

    // 1,ES5语法
    function Fun1(name,age){
        this.name  = name;
        this.age = age;
    }
    Fun1.prototype.f1 = function(){
        console.log(this.name , this.age);
    }

    

    // 2,ES6语法  class
    class Fun2{
        constructor(name,age){
            this.name = name;
            this.age = age;
        }

        f2(){
            console.log(this.name , this.age);
        }
    }

    const obj1 = new Fun1('张三',18);
    const obj2 = new Fun2('李四',20);

    console.log(obj1);
    console.log(obj2);
</script>