这是我参与「第五届青训营 」伴学笔记创作活动的第 5 天

摘要

Class总结(搬运)

参考资料

ECMAScript6 怎么写 class? - JavaScript前端Web工程师_哔哩哔哩_bilibili

内容

Class(类)

1. 定义：语法糖，整合了 属性 和 方法 封装后=>class，相当于大功能继集成function的进化版本
2. 基本语法：

class Bullshit {
            constructor(text, color) { // new 的时候传入两个参数 text 和 color
                this.text = text;       //实例的属性text被 text 赋值
                this.color = color;
            }
            show() {
                p.innerHTML = this.text + input.value;
                p.style.color = this.color;
            }   // 方法 不需要写function关键字 也不需要this来this去
            
            button_1st.addEventListener('click', () => {    //触发事件
            const bullshit = new Bullshit('我知道', '#00a1d6'); // 大写， 生成实例（对象），设置属性
            bullshit.show();  //调用方法
        })

constructor

1. 定义：class里面的一种固定方法每次new 的时候触发 符合生成构造函数的情形
2. 基本语法

constructor(text, color) { // new 的时候传入两个参数 text 和 color
                this.text = text;       //实例的属性text被 text 赋值
                this.color = color;
            }

extends 继承

1. 定义：创建子类继承父类 子类可以创建实例，也可以使用同样的方法。但需注意，继承之后仍能更改子类（覆盖）

2. 实例：

class Son_of_Bullshit extends Bullshit {};

super

1. 作用：子类继承若要增加属性时使用
2. 实例：若要增加属性？

 class Son_of_Bullshit extends Bullshit {
            //case1 添加属性 Ack！ **会覆盖原来父类的constructor方法**
            /*  constructor (fontSize) {
                this.fontSize = fontSize;   
            } */

            //case2 全部重新设置？ Ack too! 问题在于这里的this
            //父类和子类的this都是绑定各自实例的，子类继承会导致thi混乱
            //故 子类constructor里写this之前一定要写super,先super后this
            /* constructor (text, color, fontSze) {
                this.text = text;
                this.color = color;
                this.fontSize = fontSize;
            }  */

            //case3 super
            constructor ( text, color, fontSize) {
                super(text, color); //原有的
                this.fontSize = fontSize;   //新增的
            }
            show() {
                p.innerHTML = this.text + p.innerHTML;
                p.style.color = this.color;
                p.style.fontSize = this.fontSize;
            }
        }

static

1. 作用：给Class设置静态属性(注意：静态方法需要用类调用，this绑定类本身而不是实例)
2. 实例

class Bullshit {
            static welcome_tips() {
                return '温馨提示：这是在说废话';
            }
            static welcome () {
                p.innerHTML = this.welcome_tips();  
            }
            // !!! 这里 this没有问题！ 在一个静态方法里可以调用另一个静态方法
            // **因为静态方法需要用类调用，this绑定类本身而不是实例 **
            })
p.addEventListener('click', () => {
Bullshit.welcome(); //!!! 这里绝对不可以调用实例（报错），只能调用类本身
                    //点击后 类调用静态方法，再把另一个静态方法的内容赋值过来

setter&getter

1. 设置类
2. 实例：

class Bullshit {
            set extra (value) { /*可以给setter赋值 定义的时候也很像方法
            但这其实是访问器属性， 是个有特殊功能的属性， 不能加括号  */
                this.value = value;
                p.innerHTML += this.value;
            }
            get extra () {  //名字也是extra 和setter保持一致（一对）
                return `这些是废话：${this.text}, ${this.value}`;   //getter返回内容
            }
        }

附：如有错误，恳请指正，侵权必删:D