• 技术文章 >web前端 >前端问答

    class是es5还是es6

    青灯夜游青灯夜游2022-11-16 19:28:05原创144

    class是es6新特性。在ES6中,class(类)作为对象的模板被引入,可以通过class关键字定义类;新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法,也更加通俗易懂。类(class)是ECMAScript中新的基础性语法糖结构,虽然ES6类表面上看起来可以支持正式的面向对象编程,但实际上它背后使用的仍然是原型和构造函数的概念,让对象原型的写法更加清晰、

    大前端零基础入门到就业:进入学习

    本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。

    class是es6新特性。在ES6中,class (类)作为对象的模板被引入,可以通过 class 关键字定义类。

    ES6 提供了更接近传统语言的写法,新引入的class关键字具有正式定义类的能力。类(class)是ECMAScript中新的基础性语法糖结构,虽然ECMAScript 6类表面上看起来可以支持正式的面向对象编程,但实际上它背后使用的仍然是原型和构造函数的概念,让对象原型的写法更加清晰、更像面向对象编程的语法。

    一、class简介

    传统的JS只有对象的概念,没有class类的概念,因为JS是基于原型的面向对象语言,原型对象特点就是将属性全部共享给新对象。

    ES6引入了class类这个概念,通过class关键字可以定义类,这就是更符合我们平时所理解的面向对象的语言。

    class Person{   //定义一个名为Person的类
        // 构造函数,用来接受参数
        constructor(x,y){
            this.x = x;    //this代表的是实例对象
            this.y = y;
        }
        todoSome(){  //这是个类的方法,不需要加function,有多个方法也不用逗号隔开
            alert(this.x + "的年龄是" +this.y+"岁");
        }
    }
    export default  Person;

    二、静态方法和静态属性

    静态方法和静态属性,是使用static关键字的属性和方法

    2.1 静态方法

    static classMethod(){
    		console.log('123456')
    	}
    let p = new Point();
    p.classMethod();  // 报错

    2.2 静态属性

    static prop = 1 ;  // 静态属性

    三、class继承extends

    import classtest from "./classtest";  //先引入父类
    class Man extends classtest{
        constructor(x,y){   //构造函数尽量与父类参数保持一致
            super();   //利用super()关键字,这个必须放在子类构造函数中的第一位置
            this.x = x;
            this.y = y;
        }
    }
    export default  Man;

    四、class的取值函数getter和存值函数setter

    getter、setter就是给class的属性读值、传值用的。

    取值函数getter和存值函数setter可自定义赋值和取值行为,当一个属性只有getter没有setter的时候,这个属性就是只读属性,不能赋值,第一次初始化也不行。

    如果变量定义为私有的(定义在类的花括号外面),就可以只使用getter不使用setter。

    let data=[1,2,3,4];  //放在类外面,属于私有变量,可以只读取
    class Person{
        // 构造函数
        constructor(x,y){
            this.x = x;
            this.y = y;
        }
        get x(){
            console.log('获得name');
            return this._name;    //get读取属性
        }
        set x(x){
            console.log("设置name");  
            this._name=x;   //set给属性赋值
        }
        get data(){
            return data;   //只读属性,属性返回的值只能是私有变量
        }
        todoSome(){
            alert(this.x + "的年龄是" +this.y+"岁");
        }
        static dayin(){
            alert("dayin");
        }
    }
    export default  Person;

    如何使用:

     var test= new this.$myutils.classtest('haha','18');
      test.x="haha3";   //改变了实例化时候的x的值
      test.todoSome();  //输出:haha3的年龄是18岁。这里就已经不是实例化时候的haha了
      console.log(test.data);   //结果:打印[1,2,3,4]

    五、注意事项:

    1、在类中定义方法时候,不可以给方法加上function关键字,因为JS中构造函数是用function定义的,两个隔开。

    2、所有方法不要用逗号隔开,否则会报错。

    【推荐学习:javascript高级教程

    以上就是class是es5还是es6的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:class ES6
    上一篇:es6是不是框架 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• php怎么调用class类中的方法• jquery怎么删除div元素的class属性• 归纳整理ES6中的class类知识点• 详解v-bind怎么动态绑定class属性• lightroom classic是什么软件• jquery class选择器怎么用
    1/1

    PHP中文网