es6 class的基本使用?JavaScript

2026-03-07 11:54:09

1、function Person(x,y){  

    this.x = x;  

    this.y = y;  

}  

Person.prototype.toString = function (){  

    return (this.x + "的年龄是" +this.y+"岁");  

}

es6 class的基本使用?JavaScript

1、Es6的class基本写法

基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

class Person{  

    // 构造

    constructor(x,y){  

        this.x = x;  

        this.y = y;  

    }  

    toString(){  

        return (this.x + "的年龄是" +this.y+"岁");  

    }  

}  

es6 class的基本使用?JavaScript

1、和let一样,ES6的class不允许重复定义

es6 class的基本使用?JavaScript

2、和let一样,class不存在变量提升,需要先定义再使用

(注意:构造函数可以先使用后定义)

es6 class的基本使用?JavaScript

3、ES5与Es6的对应关系

① ES5的构造函数Person,对应ES6的Person类的构造方法constructor

② ES5的Person原型上的方法对应Es6的除了constructor以外的其他方法。

es6 class的基本使用?JavaScript

4、es6的继承

子类的原型对象的__proto__就是一个父类的实例对象,这样子类实例就能访问父类原型上的方法与属性,父类的原型对象还是Object的一个实例,,所以最终会找到Object的原型对象上去。

如果用es5的语法来实现的话,就可以这样来处理,将父构造函数的实例赋值给子构造函数的原型属性

es6 class的基本使用?JavaScript

5、关于constructor方法

constructor方法是类的构造函数是默认方法,通过new命令生成对象实例时,自动调用该方法。一个类必须有constructor方法,如果没有显式定义,一个默认的constructor方法会被添加。所以即使你没有添加构造函数,也是有默认的构造函数的。但是默认的constructor方法只会返回一个空对象

es6 class的基本使用?JavaScript

6、Class的静态方法

     所有在类中定义的方法,都等于在构造函数原型上定义的方法,都会被实例继承。

    如果在一个方法前,加上static关键字,就表示该方法是在构造函数本身上定义的方法,不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。

es6 class的基本使用?JavaScript

7、静态属性

语法:Person1.proName=proValue;

es6 class的基本使用?JavaScript

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢