Class类

ES6提供了更接近传统语言的写法，引入了Class(类)这个概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而。知识点： 1)class声明类

2)constructor定义构造函数初始化 3)extends继承父类 4)super调用父级构造方法 5)static定义静态方法和属性 6)父类方法可以重写

Es5构造

        //手机类
        function Phone(brand,price){
            this.brand=brand;
            this.price=price;
        }
        
        //添加方法
        Phone.prototype.call=function(){
            console.log("我可以打电话")
        }
        
        //实例化对象
        let Huawei = new Phone("华为P60",6999);
        console.log(Huawei)

Es6构造

        class Phone{
            //构造方法,名字不能修改
            constructor(brand,price){
                    this.brand=brand;
                    this.price=price;
            }
            
            //方法必须使用该语法，不能使用ES5的对象完整形式
            call(){
                console.log("我可以打电话")
            }
        }
        
        let onePlus = new Phone("1+",9999)
        console.log(onePlus)

静态成员

下边的代码函数对象和实例对象要区分开

        function Phone(){
            
        }
        Phone.name = '手机'
        Phone.change()=function(){
            console.log('我可以改变世界')
        }
        
        let nokia = new Phone();
        console.log(nokia.name);
        nokia.change()

而这里的使用class之后跟java的语法没多大差别了，也是使用static关键字

class Phone{
                //静态属性
                static name='手机'
                static change(){
                    console.log('改变世界')
                }
            }
            let nokia = new Phone();
            console.log(nokia.name)
            console.log(Phone.name)

继承

构造函数继承

        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 harmer = new SmartPhone('锤子',2399,'黑色','5.5inch')
        console.log(harmer)

类继承

总体来看，他的类继承跟java很，如果你有java的基础，我想理解这里不难

        class Phone{
            //构造方法
            constructor(brand,price){
                this.brand=brand;
                this.price=price;
            }
            
            //父类的成员属性
            call(){
                console.log("我可以打电话")
            }
        }
        class SmartPhone extends Phone{
            //构造方法
            constructor(brand, price, color, size){
                super(brand,price);
                this.color = color;
                this.size = size;
            }
            photo(){
                console.log('拍照')
            }
            
        }
        
        const xiaomi = new SmartPhone('小米11pro',4799,'黑色','4.7inch')
        console.log(xiaomi);

Get和Set 方法

都需要自己写一个函数

        class Phone {
            get price() {
                console.log("价格属性被读取了");
                return '5555'
            }
            set price(newVal) {
                console.log('价格属性被修改了);
                }
            }
            //实例化对象
            let s = new Phone();

            console.log(s.price)
            s.price='free';

写完这篇文章，我最先感受到的是Es6引入的跟Java的语法很像，所以使用上会舒服很多，前端语法学起来也不会特别的别扭。

前端打怪之旅=>Es6入门(类)