es6 里class类的封装

矫情吗；* 2023-06-10 04:25 17阅读 0赞

1.  传统方式

{ 
            /*传统模式*/
            function person(){ 
              this.name=null;
              this.sex=null;
            }
            person.prototype.eat= function () { 
                return this.name+"吃饭";
            }
            let Mary=new person();
            console.log(Mary);
        }

![在这里插入图片描述][20191025165953688.png]

1.  es6声明类时，关键字为class

> 1.  声明构造函数一般在类被实例化的时候直接调用
> 2.  类里面的构造函数可写或不写 不写默认添加一个构造函数

无参构造

{ 
            class Student { 
                //声明构造函数
                constructor() { //无参构造
                    console.log("构造函数");
                }
            }
            let Danny=new Student();
            console.log(Danny);
        }

有参构造

{ 
            class Student { 
                //有参构造
                constructor(name) { 
                    this.name=name;
                }
            }
            let Danny=new Student("张三");
            console.log(Danny);//Student {name: "张三"}
        }

![在这里插入图片描述][20191025170422244.png]  
默认添加构造函数

class Animal { 
    
        }
        let cat = new Animal();
        console.log(cat);

![在这里插入图片描述][20191025173423980.png]  
3. 类的方法

> 方法之间不需要用逗号隔开！会报错  
> 类里面的方法和变量分别称为成员方法和变量

{ 
            class Student { 
                //声明构造函数 一般在类被实例化的时候直接调用构造函数
                //构造函数分为有参构造和无参构造
                constructor(name) { 
                    this.name=name;
                }
                toString(){ 
                    console.log("这是一个自定义方法");
                }
                getname(){ 
                    console.log(this.name);
                }
                setname(n){ 
                    this.name=n;
                }
            }
            let Danny=new Student("张三");
            Danny.getname();//张三
        }

1.  方法追加

> 类的数据类型为function;`console.log(typeof Student); //function`  
> 类的原型的构造==本身  
> 类上的成员方法在类的`prototype` 上面  
> 类的属性直接在对象上

/*方法追加*/
           Object.assign(Student.prototype, { 
               toValue(){ } ,
           toGetLocal(){ }
       			})
       console.log(Danny);

![在这里插入图片描述][20191025172901341.png]

1.  `Object.getOwnPropertyNames` 获取类对象上原型的所有方法名称，取得的为集合型（索引+名称）

console.log(Object.getOwnPropertyNames(Student.prototype));

`实例化对象.hasOwnProperty()` 检测原型上有没有某属性 ，返回值为布尔型  
`实例化对象._proto_.hasOwnProperty()` 检测原型上有没有某方法 ，返回值为布尔型

1.  es6里面的 取值函数getter和 存值函数（setter）

> 拦截该属性的存取行为。  
> `get set` 名称和属性名一致会死循环！！！

/*get set*/
        class Person{ 
            constructor(){ 
    
            }
            get _name(){ 
                console.log(2);
                return this.name;
            }
            set _name(value){ 
                console.log(1);
                this.name=value;
            }
        }
        let ren=new Person();
        ren._name="李四";
        console.log(ren);

点击后才输出2（点击相当于获取属性）  
![在这里插入图片描述][20191025175224838.png]

1.  方法以表达式声明

> 对象实例化要写在块外！

1.  公开方法和静态方法

> 公开方法 可以通过**类对象**来点  
> 静态方法通过**类名称**来点，不会被继承

class Person{ 
            constructor(){ 
    
            }
            static getlist(){ 
                console.log("静态方法");
            }
        }
        let ren=new Person();
        Person.getlist();//静态方法

[20191025165953688.png]: /images/20230531/0cffcc3533804cf2bbcebc2f596d3bce.png
[20191025170422244.png]: /images/20230531/b4eacf33e7aa42c2b03bad39bd9a62c1.png
[20191025173423980.png]: /images/20230531/b20c4cfccbea452e8adaf8f8df7b7403.png
[20191025172901341.png]: /images/20230531/06c3d61a48414835a758b2b6e25036d5.png
[20191025175224838.png]: /images/20230531/14cc7596ccaf4e3788767c0b452c0925.png