面向对象的知识点集合

类

• 认识类
• this指通过构造函数创建出来的实例化对象
• this 谁调用当前方法，this就是谁
• 在什么地方都是唯一存在的

        class Box{
            a=1;
            b=2;
            constructor(a,b){
                this.a=a;
                this.b=b;
            }
            play(){
                
                console.log(this.a,this.b)
                console.log("aa")
            }
            run(){
                console.log("bbb")
            }
        }
​
        var b=new Box(2,4);
        var b1=new Box(5,10);
        // console.log(b,b1)
        b.a=10;
        console.log(b)

静态属性

• 不属于实例化对象的属性

类的调用

• 静态方法的创建

  • static xxx(){ }

• 类.静态方法() 只用于处理这一类型的内容

• 凡是被static修饰的属性和方法都是静态方法和属性,只能被类名调用,不能被实例化对象调用.同时也不能被子类继承,换句话说它属于当前这个类的.

• 静态方法中不能直接调用实例化对象

  • 要在方法中进行存储调用

  static jump(){
                  // console.log(this);//不建议使用this，这里的this就是Box类
                  // Box.map();
                  // console.log("jump")
                  Box.list.forEach(item=>{
                      item.play();
                  })
              }
          Box.jump();
  

• 静态方法中不建议使用this

            // 只用于处理这一类型的内容
            static jump(){
                // console.log(this);//不建议使用this，这里的this就是Box类
                Box.map();
                console.log("jump")
            }
            static map(){
​
            }

子类调用父类

        class fater{
            constructor(name){
                this.name=name
            }
            sayHi(){
                console.log('hihihi')
            }
        }
        class son extends fater{
            constructor(name,age){
                super(name)
                this.age=age
            }
            sayNo(){
                console.log('no')
            }
        }
        
        let subinst= new son('zhangsan',18)
        console.log(subinst)
        subinst.sayHi()
        subinst.sayNo() 

静态方法子类的调用

class A {
            // 静态属性
            static info = '见过你的美,还能爱上谁?';
            // 静态方法
            static love() {
               console.log('小姐姐,看见你就犯困,为情所困,为你所困!');
            }
            // 普通方法,调用静态属性
            say() {
               console.log('小姐姐,' + A.info);
            }
            // 在父类中进行静态方法的创建
            static run(){
                console.log('哈哈哈，我喜欢跑步呀')
            }
        }
        class B extends A {
            run() {
               console.log('类B的方法..');
            }
            // 调用父类的静态方法
            static run(){
                super.run()
            }
        }
        //使用类名 父类中普通方法调用
        B.love();
        // 通过子类调用父类的静态方法
        B.run()  // 哈哈哈，我喜欢跑步呀

实例化继承

• super的参数是否添加需要看上面的box当中有没有参数

        class Ball extends Box{
            constructor(a,b){
                super(a,b)//执行超类的构造函数
                // 在执行super时，执行了box的构造函数，在box构造函数中this指向当前box实例化对象
            }
        }

• 如果在继承当中添加了与超类play的方法重名，就会覆盖超类play，不执行超类的play方法
• override 覆盖
• 如果子类继承了超类的静态方法，添加新的内容，那么超类中需要使用this

ES6的模块化开发

• 如何导入

  •     <script type="module">
            import Ball from "./js/Ball.js";
            var b=new Ball();
            b.run();
            b.play();
        </script>
    

• 起别名

  • 通过 as 别名，将引入的名称另外设置名字 比如：import {arr as arr1} from '/...'

• 导出问题

  0. 默认导出一个需要添加export default
  1. 导出多个只需要使用 export 即可
  2. export default class 名称 默认导出
  3. 如果有默认导出，我们可以和非默认导出一起导入，需要使用，隔开

面向对象与函数式编程区别

多选框和单选框案例

动画

缓动

• cancelAnimationFrame 清除帧动画

Tween动画库

• chain：从这里连接到另一边
• delay：间隔时间
• easing：缓动
• end：结束
• oncomlete：当动画结束回调
• onstart：开始
• onstop：执行的时候执行
• onupdate：更新的时候执行
• repeat：次数
• start：开始
• stop：停止
• stopchainedtweens：停止两端的 间隙
• yoyo：溜溜球