JavaScript ES6的构造函数语法

亦凉 2023-07-25 09:07 38阅读 0赞

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可以提前调用，但是只有属性没有方法