ES6——类的创建、添加以及继承

目录

一、创建类和对象

二、类中添加其方法

 三、类的继承

super()方法

 四、子类继承父类的方法同时扩展自己的方法

五、super关键字调用父类的普通函数

 六、使用类的注意事项

 使用类的注意事项总结：

1. 在 ES6 中的类没有变量提升，必须先定义类，才能通过类实例化对象。

2. 类里面的共有的属性和方法一定要加this使用。

3.constructor 里面的this 指向的是创建的实例对象，方法里面的this 指向的是这个方法的调用者。

---

一、创建类和对象

例子如下：

class Star {    //    1、首字母大写，类名不要加()
            constructor(name,age){    //无需加function
                this.name = name;
                this.age = age
            }
        }
        // 2、利用类创建对象 new
        var a = new Star('Nan',10);    //生成的实例对象加()
        var b = new Star('Chen',20);
        console.log(a);
        console.log(b);

打印效果：

 注意：

1、通过class创建类，类名最好首字母大写

2、constructor(){},用来接收传递的参数，并且返回实例对象

3、constructor(){} 一旦生成new实例对象时，就会自动调用这个函数，如果不写这个函数，其类也会生成这个函数

4、生成实例 new 不能省略

5、语法规范：创建类后的类名不要加小括号 ，生成实例对象的类名需要加()，构造函数无需加function

---

二、类中添加其方法

直接看代码：

// 1、创建类class
        class Star {
    // 类的共有属性放到 constructor 里面
            constructor(name,age){
                this.name = name;
                this.age = age
            }
            listen(music){
                console.log('姓名:'+this.name+'年龄：'+this.age+'爱听的音乐：'+ music);
            }
        }
        // 2、利用类创建对象 new
        var a = new Star('Nan',10);
        var b = new Star('Chen',20);
        a.listen('One Day');
        b.listen('Whistle');
        console.log(a);
        console.log(b);

打印效果：

---

 三、类的继承

比如这里创建一个父类，用子类继承其父类的属性

看例子：

 class Father{
            constructor(a,b) {
                this.a = a;
                this.b = b;
            }
            sum(){
                console.log(this.a +this.b);
            }
        }
        // 继承父类
        class Son extends Father{
            constructor(x,y) {
                this.x = x;
                this.y = y;
            }
        }
        var son = new Son(10,12);
        son.sum();

 这里会报错，这里没有办法继承，就需用到一个新的方法super

super()方法

语法：super([arguments]); // 调用 父对象/父类 的构造函数

super关键字用于访问和调用一个对象的父对象上的函数

在构造函数中使用时，super关键字将单独出现，并且必须在使用this关键字之前。super关键字也可以用来调用父对象上的函数。

正确继承写法如下：

  class Father{
            constructor(a,b) {
                this.a = a;
                this.b = b;
            }
            sum(){
                console.log(this.a +this.b);
            }
        }
        // 继承父类
        class Son extends Father{
            constructor(x,y) {
                super(x,y); // 调用父类中的构造函数
                /* this.x = x;
                this.y = y; */
            }
        }
        var son1 = new Son(10,12);
        var son2 = new Son(100,120);
        son1.sum();
        son2.sum();

打印结果：

---

 四、子类继承父类的方法同时扩展自己的方法

特别注意：super必须写在this的前面！

class Father{
            constructor(a,b) {
                this.a = a;
                this.b = b;
            }
            fn(){
                console.log(this.a + this.b);
            }
        }
        // 子类继承父类
        class Son extends Father{
            constructor(a,b) {
                // super必须写在this前面
                super(a,b);
                this.a = a;
                this.b = b;
            }
            fn2(){
                console.log(this.b - this.a);
            }
        }
        var son = new Son(5,8);
        son.fn();
        son.fn2();
        // 可以用父亲的，也可以用自己的

---

 五、super关键字调用父类的普通函数

如果父类和子类都有一个相同的函数，那么会优先调用谁的呢？答：就近原则

看下面这个例子：

class Father{
            fn1(){
                console.log("I'm daddy");
            }
        }
class Son extends Father{
            fn1(){
                console.log("I'm a son")
            }
        }    
var son = new Son();
son.fn1();    //I'm a son

这里我创建了一个Father类和一个Son类，但是都有一个相同的函数fn1()，返回的只有Son函数

打印效果如下：

如果父类和子类都有一个函数，调用的话是按照就近原则（先调用儿子如果找不到儿子的这个方法再往上面找 

如果想要继承父亲的话就要在Son中添加super

class Father{
            fn1(){
                return "I'm daddy";    //这里要替换成return，不然会显示undefined
            }
        }
        class Son extends Father{
            fn1(){
                // console.log("I'm a son")
                console.log(super.fn1() + '的son')
            }
        }
        var son = new Son();
        son.fn1();// I'm daddy的son

打印效果如下：

---

 六、使用类的注意事项

看下面这个例子：

//html部分
<button>点击</button>

//script部分 
class Star {
            constructor(name,age) {
                //console.log(this);//这里的this指向的是Star这个类
                this.name = name;
                this.age = age;
                this.btn = document.querySelector('button');
                this.btn.onclick =this.look;
            }
            look(){
                // console.log(this);// 这个look方法里面的this 指向的是 btn 这个按钮,因为这个按钮调用了这个函数
                console.log(this.name);    //这里获取不了name的值
            }
        }
        var a = new Star('Nanchen',89);

打印效果如下：

 解决办法：定义一个初始化变量，使得this赋值给这个定义的变量，然后用这个变量替换其中的this即可

var that = null;    //进行初始化
        class Star {
            constructor(name,age) {
                console.log(this);
                // 让把this赋值给that
                that = this;
                this.name = name;
                this.age = age;
                this.btn = document.querySelector('button');
                this.btn.onclick =this.look;
            }
            look(){
                console.log(this);
                console.log(that.name);    //this替换成that
            }
        }
        var a = new Star('Nanchen',89);

打印效果：

 对比上段代码：

 还需注意一点：

这里新建一个tour方法，这里的tour方法中的this指向的是整个Star的内容

// 定义一个空值
        var that = null;
        var _that = null;
        class Star {
            constructor(name,age) {
                console.log(this);
                // 让把this赋值给that
                that = this;
                this.name = name;
                this.age = age;
                this.btn = document.querySelector('button');
                this.btn.onclick =this.look;
            }
            look(){
                // 这个look方法里面的this 指向的是 btn 这个按钮,因为这个按钮调用了这个函数
                console.log(this);
                console.log(that.name);
            }
            tour(){
                _that = this;
                console.log(this);
            }
        }
        var a = new Star('Nanchen',89);
        a.tour();
        console.log(_that === a);   // true
        console.log(that === a);    // ture

打印效果如下：

 使用类的注意事项总结：

1. 在 ES6 中的类没有变量提升，必须先定义类，才能通过类实例化对象。

2. 类里面的共有的属性和方法一定要加this使用。

3.constructor 里面的this 指向的是创建的实例对象，方法里面的this 指向的是这个方法的调用者。