JS高级 学习(1)--类和对象

目标:

什么是面向对象

类和对象的关系

使用class创建自定义类

能够说出什么是继承

面向对象的编程介绍

面向过程POP: 就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了;
面向对象OOP: 把事物分解成一个一个对象，然后由对象之间分工与合作;
1.面向对象程序开发思想中，每一个对象都是功能中心，具有明确分工;
2.面向对象编程具有灵活，代码可复用，容易维护和开发的优点，更适合多人合作的大型软件项目;
3.面向对象的特性:封装性，继承性，多态性

ES6中的类和对象

类 class

class 关键字声明一个类，之后以这个类来实例化对象;
1.类抽象了对象的公共部分，它泛指某一个大类（class）;
2.对象特指某一个，通过类实例化一个具体的对象;

创建类和生成实例

    
            <script>
            // 1.用class创建一个明星类
            class Star{
                constructor(uname,age){
                    this.uname=uname;
                    this.age=age;
                }
            }
            // 2.利用类创建对象 new
            let ldh = new Star('刘德华',18)
            let syz = new Star('孙燕姿',16)
            console.log(ldh.uname)
            console.log(syz.age)
            </script>
    
    (1)通过class 关键字创建类，类名我们还是习惯性定义首字母大写;
    (2)类里面有哥constructor 函数，可以接受传递过来的参数，同时返回实例对象
    (3)constructor 函数，只要 new 生成实例时，就会自动调用这个函数，如果我们不写这个函数，类也会自动生成这个函数
    (4)生成实例new 不能省略
    (5)注意语法规范，创建类，类名后面不要加小括号，生成实例，类名后面加小括号，构造函数不需要加function

类中添加方法

    
        <script>
            // 1.用class创建一个明星类
            class Star{
                constructor(uname,age){
                    this.uname=uname;
                    this.age=age;
                }
                sing(song){
                    console.log(this.uname+'唱'+song)
                }
            }
            // 2.利用类创建对象 new
            let ldh = new Star('刘德华',18)
            let syz = new Star('孙燕姿',16)
            ldh.sing('冰雨')
            syz.sing('天黑黑')
        </script>
    
    (1)类里面所有的函数不需要写function
    (2)多个函数方法之间不需要添加逗号分隔

类继承extends和super关键字

        
            <script>
                // 1.类的继承
                class Father{
                    constructor(x,y){
                       this.x = x;
                       this.y=y;
                    }
                    money(){
                        console.log(100)
                    }
                    sum(){
                        console.log(this.x+this.y)
                    }
                }
                class Son extends Father{
                    constructor(x,y){
                        super(x,y);//调用了父类中的构造函数
                    }
                }
               let son=new Son(1,2);
               son.money()
               son.sum()
            </script>
        
        (1)extends可以继承父类的属性和方法；
        (2)super关键字 用于访问和调用对象父类上的函数，可以调用父类的构造函数，也可以调用父类的普通函数；
    

super调用父类普通函数以及继承中属性方法查找原则

    
            <script>
            //super 关键字调用父类普通函数
            class Father{
                say(){
                    return '我是爸爸'
                }
            }
            class Son extends Father{
                say(){
                    console.log(super.say()+'的儿子');
                    //super.say() 就是调用父类中的普通函数say()
                }
            }
            let son = new Son();
            son.say();
            // 继承中的查找原则：就近原则 
            //1.继承中，如果实例化子类输出一个方法，先看子类有没有这个方法，如果有就先执行子类的
            //2.继承中，如果子类里面没有，就去查找父类有没有这个方法，如果有，就执行父类的这个方法(就近原则)
          </script>
    

super必须放到子类this之前

    
            <script>
            class Father{
                constructor(x,y){
                    this.x=x;
                    this.y=y;
                }
                sum(){
                    console.log(this.x+this.y)
                }
            }
            // 子类继承父类加法方法 同时扩展 减法方法
            class Son extends Father{
                constructor(x,y){
                    // 利用super 调用父类的构造函数
                    // super 必须在子类this之前调用(父亲永远在第一位)
                    super(x,y)
                    this.x=x;
                    this.y=y;
                }
                substract(){
                    console.log(this.x-this.y)
                }
            }
            let son =new Son(5,3);
            son.substract();
            son.sum();
            </script>
    

使用类3个注意点

    
            <button>点击</button>
            <script>
            let that;
            let _that;
            class Star{
                constructor(uname,age){
                    // constructor 里面的this 指向的是 创建的实例对象
                    that=this
                    console.log(this)//实例对象
                    this.uname=uname;
                    this.age=age;
                    this.btn=document.querySelector('button');
                    this.btn.onclick=this.sing;
                }
                sing(){
                    // 这个sing()方法里面的this，指向的是 btn 这个按钮，因为这个按钮调用了这个函数
                    console.log(this)
                    console.log(that.uname)//that里面存储的是constructor里面的this
                }
                dance(){
                    //这个dance里面的this 指向的是实例对象 ldh 因为 ldh 调用了这个函数
                    _that=this
                    console.log(this)
                    
                }
            }
            let ldh =new Star('刘德华');
            ldh.dance();
            //1.在es6中 类没有变量提升，所以必须先定义类，才能通过类实例化对象 
            //2.类里面的共有的属性和方法一定要加this使用 
            //3.类里面的this指向问题
             //constructor里面的this指向的是实例对象，方法里面的this指向这个方法的调用者
            </script>