es6 里class类的封装

  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类的封装_第1张图片

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

es6 里class类的封装_第2张图片
默认添加构造函数

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();//张三
    }
  1. 方法追加

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

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

es6 里class类的封装_第3张图片

  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(点击相当于获取属性)
es6 里class类的封装_第4张图片

  1. 方法以表达式声明

对象实例化要写在块外!

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

        }
        [getinfo](){
            console.log(3);
        }
    }
    let ren=new Person();
    ren.GetName();//3
  1. 公开方法和静态方法

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

class Person{
        constructor(){

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

你可能感兴趣的:(web前端开发)