es6 里class类的封装

最新推荐文章于 2024-08-18 22:23:52 发布

ice_bear-

最新推荐文章于 2024-08-18 22:23:52 发布

阅读量1.1k

点赞数 4

分类专栏： web前端开发

本文链接：https://blog.csdn.net/qq_42701999/article/details/102746211

版权

web前端开发专栏收录该内容

49 篇文章 1 订阅

订阅专栏

传统方式

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

在这里插入图片描述

es6声明类时，关键字为class

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

无参构造

{
        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: "张三"}
    }

在这里插入图片描述
默认添加构造函数

class Animal {

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

在这里插入图片描述
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();//张三
    }

方法追加

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

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

在这里插入图片描述

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

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

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

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（点击相当于获取属性）
在这里插入图片描述

方法以表达式声明

对象实例化要写在块外！

let  getinfo="GetName";//定义一个表达式
    class Person{
        constructor(){

        }
        [getinfo](){
            console.log(3);
        }
    }
    let ren=new Person();
    ren.GetName();//3

公开方法和静态方法

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

class Person{
        constructor(){

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