JS-ES6语法中构造函数的封装class类

ES6语法的构造函数

封装class类
    
    与ES5语法区别,封装的是class关键词,不会被预解析

语法格式:
    class 类名{
        构造器,专门接收封装类时的参数和给实例化对象定义属性和属性值
        在给实例化对象定义属性和属性值
        不知道实例化对象的具体名称,使用this来替换
        constructor(参数...){
            this.属性 = 参数;
            this.属性 = 属性值;
        }

        定义实例化对象中,需要使用的方法和函数
        方法名称(){
            在方法中,是在定义变量,使用let\const\var 等来声明变量
            let 变量 = 数值;

            如果调用对象的数据,必须是 对象.属性
            对象名称不确定,使用this来替换
        }
    }


<script>
    const obj1 = {
        name:'张三',
        age:18,
    }

    const obj2 ={};
    obj2.name = '张三';
    obj2.age = 18;

一.ES5构造函数中的一些问题

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

ES6中,新增语法形式 class 类
是一种新的定义构造函数的语法
作用和原理与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中构造函数的对比、class的用法

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*************
class Fun2{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }

    f2(){
        console.log(this.name , this.age);
    }
}

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

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