Es6的class类的一些知识

素颜马尾好姑娘i 2022-12-13 12:52 171阅读 0赞

刚学习了Es6的一些属性，特意总结一下，一是为了加深记忆，二是为了后续在博客继续丰富、补充

在实际开发中，我们往往需要创建很多相同类型的对象，如用户、商品或其他对象。我们知道，通过new一个function可以创建一个对象，但在现代的JavaScript里，有一个更高级的“类”结构，对于面向对象编程提供了一些很不错的特性。

### Class基本语法 ###

基本的class语法如下：

class MyClass{
        constructor(){}
        method1(){}
        method2(){}
        method3(){}
    }

然后通过**new MyClass()**来创建一个拥有以上方法的对象实例

列如:

//Es5写法 
            function Phone(brand,price){
                 this.brand=brand;
                 this.price=price
             }
             Phone.prototype.call=function(){
                 console.log('我会打电话');
             }  
             const chuizi=new Phone('锤子',2800)
             chuizi.call() 
    
    
     //class方法
            class Phone {
                //构造方法
                constructor(brand, price) {
                    this.brand = brand;
                    this.price = price;
                }
                //父类成员属性
                call() {
                    console.log('我可以打电话');
                }
            }
             const chuizi=new Phone('锤子',2800)
             chuizi.call()

### Class的类继承 ###

//Es5写法  
            function Phone(brand,price){
                 this.brand=brand;
                 this.price=price
             }
             Phone.prototype.call=function(){
                 console.log('我会打电话');
             }
             //智能手机
             function SmartPhone(brand,price,color,size){
                 Phone.call(this,brand,price)
                 this.color=color;
                 this.size=size;
             }
             SmartPhone.prototype=new Phone
             SmartPhone.prototype.constructor=SmartPhone
    
             SmartPhone.prototype.photo=function(){
                 console.log('我会拍照');
             }
             SmartPhone.prototype.playGame=function(){
                 console.log('我会玩游戏');
             }
             const chuizi=new SmartPhone('锤子',3000,'黑色','5.5inch')
             chuizi.call()
             chuizi.photo()
             chuizi.playGame()
    
    //Es6写法 class类
             class Phone {
                //构造方法
                constructor(brand, price) {
                    this.brand = brand;
                    this.price = price;
                }
                //父类成员属性
                call() {
                    console.log('我可以打电话');
                }
            }
            //智能手机
            class SmartPhone extends Phone {     //class继承的写法
                //构造方法
                constructor(brand, price, color, size) {
                    super(brand, price);  //相当于Phone.call(this,brand,price)
                    this.color = color;
                    this.size = size;
                }
                photo() {
                    console.log("拍照");
                }
                playGame() {
                    console.log("玩游戏");
                }
                call(){   //子类对父类方法的重写
                    console.log("我可以进行视频通话");
                }
            }
            const xiaomi = new SmartPhone('小米', 599, '黑色', '5.0inch')
            xiaomi.call()
            xiaomi.photo()
            xiaomi.playGame()

### **静态方法** ###

静态方法可以通过类名调用，不能通过实例对象调用，否则会报错

class Person {
        static sum(a, b) {
            console.log(a + b)
        }
    }
    var p = new Person()
    Person.sum(1, 2)  // 3
    p.sum(1,2)     //  TypeError p.sum is not a function

### **实例方法** ###

实例方法也可以通过实例对象调用，但同样不能通过类名调用，会报错

class Person {
        constructor() {
            this.sum = function(a, b) {
                console.log(a + b)
            }
        }
    }
    var p = new Person()
    p.sum(1,2)       // 3
    Person.sum(1,2)  // TypeError Person.sum is not a function