es6中class的一些基础知识和es5语法的对比

2020-07-21 10:52:57 浏览数 (1)

在es6中,出现了类(class)的概念,这极大的优化了我们的开发效率,今天我们就来说说js中的class。

首先es6的class,只是在es5的构造函数的基础上优化的语法糖,基本上class的所有的功能,在es5中都可以实现,只是es6使用起来比较便捷,清晰。

语法部分:

代码语言:javascript复制
    class vertical{
        //静态属性
        static company="Tencent";

        //属性定义(实例,与constructor中的属性同属一个this)
        varsion="1.0.0";
        constructor(name,gender){
            //实例属性
            this.name=name;
            this.gender=gender;
        }

        //方法定义(在prototype上)
        fn1(){
            console.log('fn1')
        }
        
        //静态方法
        static fn2(){
            console.log('fn2');
        }
    }

    //设置静态属性company不可修改
    Object.defineProperty(vertical,"company",{
        writable:false
    })

上述我们一个名为vertical的类,定义了一个静态属性company,所谓静态属性就是不用实例化(new)类就可以直接访问,静态方法也是同理。

在class中定义方法不需要使用function关键字,只需要直接写上函数名加上括号然后跟上函数体即可,比如我们定义了constructor和fn1两个方法。

这里需要注意的是,construator方法是构造方法,即在实例化类的时候,就会自动调用,即使我们不定义constructor方法,js引擎在实例化类的时候,也会自动加上,这个一个默认方法。

调用部分:

代码语言:javascript复制
    var obj = new vertical("jack","male");//实例化类
    console.log(vertical.company)//输出Tencent
    console.log(obj.name)//输出jack
    console.log(obj.varsion)//输出1.0.0
    obj.fn1();//调用原型函数
    vertical.fn2();//调用静态方法

 使用es5来实现上述代码中的类

代码语言:javascript复制
    function Vertical(name,gender){
        this.verson="1.0.0";
        this.name=name;
        this.gender=gender;
    }
    vertical.company="Tencent";//静态属性
    vertical.fn2=function(){ //静态方法
        console.log('fn2');
    }
    //方法定义(prototype)
    vertical.prototype.fn1=function(){
        console.log('fn1');
    }

 这就是es5的语法,也就是使用构造函数,同样可以实现class的功能,只是没有class的语法那么清晰。

调用部分代码不变,可直接使用。

好了,今天关于es6的class的基础用法就到这,下一期我们来了解class的其他一些功能,以及如何继承。 如无作者授权,请勿转载。

0 人点赞