ES6中的类和对象

2020-10-21 11:20发布

类class

在ES6中增加了类的概念,可以使用class关键字声明一个类,之后以这个类来实例化对象。
类抽象了对象的公共部分,它泛指某一大类。
对象特指某一个,通过类实例化一个具体的对象。

创建类

//语法:class Star{
   //class body}//实例:var xx = new Star(); 12345

类添加方法

//创建类 class 创建明星类class Star{
    //constructor() 方法是类的构造函数(默认方法),用于传递参数,返回实例对象,通过 new 命令生成对象实例时,自动调用该方法
    constructor(uname,age) {
        this.uname = uname;
        this.age = age;
    }
    sing(song){
        console.log(this.uname+'唱:'+song)
    }}//2、利用类创建对象 newvar ldh = new Star('刘德华','45');ldh.sing("冰雨");1234567891011121314

注意:
(1)通过class 关键字创建类,类名我们还是习惯性定义首字母大写
(2)类里面有个constructor函数,可以接受传递过来的参数,同时返回实例对象
(3)constructor函数只要new生成实例,就会自动调用这个函数,如果我们不写这个函数,类也会自动生成这个函数
(4)生成实例new不能省略
(5)最后注意语法规范,创建类 类名后面不要加小括号,生成实例,类型后面加小括号,构造函数不需要加function
(6)类里面的所有函数不需要写function
(7)类里面多个函数方法间不需要逗号分隔

类的继承

语法:

class Father{ //父类}class Son extends Father{   //子类继承父类}12345

实例:

class Father{
    constructor(x,y) {
        this.x=x;
        this.y=y;
    }
    sum(){
        console.log(this.x+this.y); //必须是父类传的x,y才能相加
    }}class Son extends Father{
    constructor(x,y) {
        super(x,y);  //调用父类中的构造函数
    }}var son = new Son(1,2); son.sum();  打印:“3”1234567891011121314151617

super关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数,也可以调用父类的普通函数。
注:子类在构造函数中使用super,必须放在this前(必须先调用父类的构造函数,再使用子类构造方法)。

调用普通函数:

class Father{
    say(){
        return '我是爸爸';    }}class Son extends Father{
    say(){
        console.log(super.say()+'的儿子');
    }}var son = new Son();son.say(); //我是爸爸的儿子12345678910111213

类的本质

  1. class本质还是function.

  2. 类的所有方法都定义在类的prototype属性上

  3. 类创建的实例,里面也有__proto__ 指向类的prototype原型对象

  4. 所以ES6的类它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

  5. 所以ES6的类其实就是语法糖.

  6. 语法糖:语法糖就是一种便捷写法. 简单理解, 有两种方法可以实现同样的功能, 但是一种写法更加清晰、方便,那么这个方法就是语法糖

几个注意点

(1)在 ES6 中类没有变量提升,所以必须先定义类,才能通过类实例化对象.
(2)类里面的共有属性和方法一定要加this使用.
(3)类里面的this指向问题: this指向实例对象
(4)constructor 里面的this指向实例对象, 方法里面的this 指向这个方法的调用者
(5)继承中的属性或者方法查找原则:就近原则。继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的。



作者:cake_eat

链接:https://blog.csdn.net/cake_eat/article/details/108780810

来源:CSDN
著作权归作者所有,转载请联系作者获得授权,切勿私自转载。