JavaScript ES6的构造函数语法

ES5的构造函数有一些问题
最大的问题，就是定义 prototype 是在函数之外定义的
调用构造函数，生成实例化对象，一定要在定义 prototype 之后
否则生成的实例化对象，只有属性没有函数方法

ES6中，新增语法形式 class 类
是一种新的定义构造函数的语法
作用和原理与ES5语法完全相同
只是语法格式和书写方式，不同

实例

ES5的构造函数语法

// 如果先调用构造函数,只有属性没有方法
// 因为定义方法的步骤还没执行呢
const obj1 = new Fun('张三');
// obj1.f()  // 执行结果是报错的

function Fun(name){
    this.name = name;
}
// 在定义函数外,定义prototype
Fun.prototype.f = function(){
    console.log(this.name)
};


const obj2 = new Fun('李四');
obj2.f();

ES5和ES6构造函数对比

// 1,ES5语法
function Fun1(name,age){
    this.name  = name;
    this.age = age;
}
Fun1.prototype.f1 = function(){
    console.log(this.name , this.age);
};



// 2,ES6语法  class
// 定义ES6语法构造函数类名，之后没有()
class Fun2{
    // constructor 构造器
    // class类，专门定义属性和属性值的关键词
    // ()中定义的是 class 类的参数
    // 在构造器中定义实例化对象的属性和属性值
    // 与ES5中定义实例化对象的属性和属性值语法形式完全相同，只是书写格式位置不同
    constructor(name,age){
        this.name = name;
        this.age = age;
    }

    // 虽然没有特别声明，但是函数方法也是定义在prototype中
    f2(){
        console.log(this.name , this.age);
    }
}

const obj1 = new Fun1('张三',18);
const obj2 = new Fun2('李四',20);

console.log(obj1);
console.log(obj2);

总结

ES5和ES6构造函数对比
功能作用完全相同，只是语法不同

定义构造函数的函数方法
都是定义在构造函数的prototype中
只是语法不同
ES6，虽然没有特殊声明
但是ES6语法，构造函数的方法也是定义在prototype中

区别：
ES6语法定义的class类，不是function函数
不会被JavaScript程序预解析
class不能提前调用
function可以提前调用，但是只有属性没有方法