阅读 93

ES6中新增的 class 类

class 类

  • 在ES6中新增了类的概念,可以使用 class关键字声明一个类,之后以这个类来实例化对象。

  • 类抽象成对象的公共部分,它泛指一大类(class)

  • class 的本质是 function

  • 对象特指某一个,通过类实例化一个具体的对象

  • 面向对象的思维特点

    • 抽取 (抽象) 对象公用的属性和行为组织(封装) 成一个(模板)
    • 对类进行实例化,获取类的对象
  • 类 constructor 构造 函数

    constructor( ) 方法是类的构造函数(默认方法) , 用于传递参数,返回实例对象,通过new命令生成实例对象实例时,如果没有显示定义,类内部会自动给我们创建一个constructor( )

  • 创建类和生成实例

// 创建类 class 创建一个学生的类
class Student {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}

// 2.利用类创建对象 new
let stu1 = new Student("小明", 18);
let stu2 = new Student("小芳", 18);
console.log(stu1, stu2); //Student { name: '小明', age: 18 } Student { name: '小芳', age: 18 }

/* 
    注意点:
        1.通过class 关键字创建类,类名我们还是习惯性定义首字母大写
        2.类里面有一个 constructor 函数,可以接受传递过来的参数,同时返回实例对象。
        3.constructor 函数只要new 生成实例时,就会自动调用这个函数,不写这个函数,那么类也会自动帮我们生成这个函数
        4.new 不能省略
*/
复制代码
  • 类里面添加方法
// 创建类 class 创建一个学生的类
class Student {
    constructor(name, age) {
            this.name = name;
            this.age = age;
        }
        // 添加方法
    homework(job) {
        console.log(this.name + job);
    }
}

// 2.利用类创建对象 new
let stu1 = new Student("小明", 18);
let stu2 = new Student("小芳", 18);
console.log(stu1, stu2);

stu1.homework("写作文"); //小明写作文
stu2.homework("做练习"); //小芳做练习
复制代码
  • super 关键字
    • super关键字用于访问和调用对象父类上的函数,可以调用父类的构造函数,也可以调用父类的普通函数
  • extends
    • 继承父类的方法和属性
// 类的继承
// class Father {
//     constructor() {

//     }
//     money() {
//         console.log("继承");
//     }
// }
// //  // 类的继承
// class Father {
//     constructor() {

//     }
//     money() {
//         console.log("继承");
//     }
// }
// //  extends 继承父类的方法和属性
// class Son extends Father {

// }
// let son = new Son();
// son.money(); //继承


class Father {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    sum() {
        console.log(this.x + this.y);
    }
}

class Son extends Father {
    constructor(x, y) {
        super(x, y); // 调用了父类中的构造函数
    }
}

let son = new Son(10, 20);
son.sum(); //30
// class Son extends Father {

// }
// let son = new Son();
// son.money(); //继承


class Father {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    sum() {
        console.log(this.x + this.y);
    }
}

class Son extends Father {
    constructor(x, y) {
        super(x, y); // 调用了父类中的构造函数
    }
}

let son = new Son(10, 20);
son.sum(); //30
复制代码
  • 调用父类的普通函数
// super 关键字调用父类的普通函数
class Father {
    say() {
        return "father"
    }
}

class Son extends Father {
    say() {
        // console.log("son");
        // super.say() 就是调用父类中的普通函数 say()
        console.log(super.say());
    }
}

let son = new Son();
son.say(); // father

/* 
    调用父类的普通函数
        1.继承中,如果实例化子类输出一个方法,子类有这个方法就执行子类的方法
        2.继承中,如果子类没有这个方法,就会往上找父类,父类就执行父类的方法(就近原则)
*/
复制代码
  • 使子类继承父类方法的同时,拥有自己的方法
// 子类继承父类方法的同时,拥有自己的方法
class Father {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    sum() {
        console.log(this.x + this.y);
    }
}
class Son extends Father {
    constructor(x, y) {
        // 利用 super 调用父类的构造函数 super必须在子类的this之前,否则报错
        super(x, y);
        this.x = x;
        this.y = y;
    }
    subtract() {
        console.log(this.x - this.y);
    }
}

let son = new Son(20, 10);
son.sum(); //30 
son.subtract(); //10

// 注意点:子类在构造函数中使用 super ,必须放到this前面(必须先调用父类的构造函数,再使用子类的构造函数)
复制代码

使用类的注意事项

  • 在ES6 中类没有变量提升,所以必须先定义类,才能通过实例化对象
  • 类里面的公有属性和方法必须加 this 使用
  • 重复定义类
    • 重复声明一个类会引起类型错误
class student {};
class student {};
// Uncaught TypeError: Identifier 'student' has already been declare
复制代码
  • this 的指向问题
class Father {
    let _that;
    constructor(x, y) {
        _that=this;
        // constructor里面的this指向的是 创建的实例对象
        this.x = x;
        this.y = y;
    }
    sum() {
 		// 方法这里的this 指向调用者,谁调用指向的就是谁
        console.log(this);
        console.log(this.x + this.y);
    }
}

let fahter = new Father();
console.log(_that === father); // true
father.sum(); // 这里的 this 的指向就是这个实例对象
复制代码

文章分类
前端
文章标签