js中class类与原生构造函数相比的优缺点

---

一、原生构造函数

1.1 构造函数的概念

构造函数是一个普通的函数，与其他函数没有任何区别，它也可以进行调用，它只是概念上的一个定义，使用它用来实例化对象。

1.2原生的构造函数的缺点

1. 构造函数和原型结构分离（不便于维护）
2. 构造函数原型里面的属性可以被遍历
3. 原型里面的方法也可以作为构造函数
4. 构造函数可以直接当做普通函数调用 (功能性不明显)

代码如下:（构造函数和原型结构分离 不便于维护）：

<script>
    function Person(name, age) {
        this.name = name;
        this.age = age;
        console.log(520);
    }

    Person.prototype.toString = function() {
        console.log(this.name , this.age);
    }

    var person = new Person("Roddy", 21);
</script>

---

构造函数原型里面的属性可以被遍历

for(var key in Person.prototype) {
    console.log(key);
}

浏览器运行结果如下：

---

原型里面的方法也可以作为构造函数

var ld = new person.toString();
console.log(ld);

浏览器运行结果如下：

---

构造函数可以直接当做普通函数调用 (功能性不明显)

Person();

浏览器运行结果如下：

---

二、class类

2.1.class类的概念

ES6提供了更接近传统语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。

2.2.class类的特点

1. class其实就是ES6提供的一个语法糖，本质就是一个函数，就是由ES5里面的语法封装的
2. 在类里面声明方法，可以省掉function关键字
3. 类是不可枚举的
4. 类里面定义的原型方法 不能作为构造函数使用
5. 类(构造函数类Person) 在使用的时候 必须配合new关键字使用 如果直接调用 会报错
6. class也存在暂时性死区在声明之前不能使用
7. 使用了class类 那么就默认就有constructor方法

代码如下（示例）：

class Person {
    constructor(name, age) {
         this.name = name;
         this.age = age;
    }

    toString() {
        console.log(this.name , this.age);
    }
}
var person = new Person("LD", 18);

类是不能枚举的

for(var key in Person) {
     console.log(Person);
}

类里面定义的原型方法 不能作为构造函数使用

var p = new person.toString();
console.log(p);

类(构造函数类Person) 在使用的时候 必须配合new关键字使用 如果直接调用会报错

Person();

---

2.3使用class类实现继承

代码如下（示例）：

class Person {
      constructor (name, age) {
           this.name = name;
           this.age = age;
           console.log(520);
      }

       sayHi() {
           console.log("How are you");
       }
}

// var person = new Person("LD", 18);

// 使用class实现继承
class Students extends Person{}

// 由于students这个类里面没有定义传入的参数，所以额外传入的参数不起作用
var students = new Students("Roddy", 21, 175,112);
console.log(students);
students.sayHi();

浏览器运行结果如下：

代码如下（继承中新增参数）：

class Person {
    constructor (name, age) {
        this.name = name;
        this.age = age;
        console.log(520);
    }

    sayHi() {
        console.log("How are you");
    }
}


// 使用class实现继承
class Students extends Person{
            
    constructor(name, age, height, weight) {
        // this.name = name;
        // this.age = age;
        // 把父类构造函数的参数直接使用super关键字传递过来  然后再对子类独有的属性进行赋值
        super(name, age); //super必须写在this的前面
        this.height = height;
        this.weight = weight;
        
    } 
}

var students = new Students("Roddy", 21, 175,112);
console.log(students);
students.sayHi();

浏览器运行结果如下：

另一个需要注意的地方是， 在子类的构造函数中， 只有调用super之后， 才可以使用this关键字， 否则会报错。 这是因为子类实例的构建， 是基于对父类实例加工， 只有super方法才能返回父类实例。

总结：class类实现继承的核心 就是extends 表示子类继承指向哪一个父类 并且在子类的构造函数中必须调用super 继承父类的属性