avascript ES5 定义类（class）的三种方法

一、构造函数法

function Dog() {
    this.name='大黄';
    this.call=function call() {
        console.log('汪汪');
    }
}
Dog.age=10;
Dog.prototype.eat=function () {
    console.log('吃狗粮');
}
var dog1=new Dog();
dog1.call()
dog1.eat()

二、Object.create()

const dog={
    name: '大黄',
    call:function(){
        console.log('汪汪');
    }
}
const dog1=Object.create(dog);
dog1.call();

三、极简主义法

var Dog={
    create:function(){
        var dog={};
        dog.name='大黄';
        dog.call=function(){
            console.log('汪汪');
        }
        return dog;
    }
}
var dog1=Dog.create();
dog1.call();

ES6 定义类

使用 class 关键字来声明类。

class Person {
    constructor(name,age){
        this.name=name;
        this.age=age
    }
}
let user=new Person('张三',22);
console.log(user);

constructor 构造函数用于创建和初始化一个类

class Person {
    // 私有变量
    #_life='';

    // 构造函数
    constructor(name, age, sex, life) {
        this.name=name;
        this.age=age;
        // 约定命名 通过在变量名称前加一个下划线来定义私有变量，实际上外部可以直接访问
        this._sex=sex;
        // #作为前缀 定义私有作用域，外部无法直接访问
        this.#_life=life;
    }

    // Getter
    get getName() {
        return this.name
    }

    // Setter
    set setName(name) {
        this.name=name;
    }

    get sex() {
        return this._sex;
    }

    get life() {
        return `${this.#_life}年`
    }

    // 方法
    sayHi() {
        console.log(`hello,我是${this.name}`);
    }

    // 静态方法 该方法不会被实例继承，而是直接通过类来调用
    static eat(food) {
        console.log(`吃了${food}`);
    }

    // 私有方法
    _a() {
        console.log('约定命名的私有方法');
    }

    #_sleep() {
        console.log(`${this.name}睡着了`);
    }

    sleep(){
        this.#_sleep()
    }
}

function a() {
    console.log(`${this.name}睡着了`);
}

let user=new Person('张三', 22, '男', 99);
console.log(user);
console.log(user.getName);
user.name='王五'
console.log(user.name);
user.sayHi()
Person.eat('苹果')
user._a()
// user.#__sleep() // 无法调用
user.sleep()
console.log(user.sex);
console.log(user.life);

继承

/**

 * @author zswxjjh

 * @date  2021/3/29

 */
'use  strict';

/*
* 模仿DOMTokenList对象，提供contains（）
* add（），remove（）。toggle（）方法
* 重写toString方法，为了模拟类数组特性
* 提供toArray方法
*
* */
var  classList=(function () {
  /*
  * e是一个元素，定义一个CSSClassList类模拟
  * DOMTokenList类
  * */
  function classList(e) {
   /* if(e.classList)
      return e.classList;
    else*/
      return new CSSClassList(e);
  }

  /*
  * 定义CSSClassList类
  * */
  function CSSClassList(e) {
     this.e=e;
  }

  /*
  * c是一个合法的类名，判断是否包含给定的类名
  * 返回boolean
  * */
  CSSClassList.prototype.contains=function (c) {
      //是否合法
    if(!c)
    {
      throw new TypeError('参数不存在!');
    }
    else  if(c.length===0 || c.lastIndexOf(' ')!==-1/*c包含空格*/)
    {
      throw new TypeError('不合法的类名:"'+c+'"!');
    }
    if(!this.e.className)
      return false;
   if(this.e.className===c)
     return true;
   return this.e.className.search('\\b'+c+'\\b')!==-1;
  };

  /*
  * 追加一个类名在尾部
  *
  * */
  CSSClassList.prototype.add=function (c) {
      if(this.contains(c))
        return;
      //判断值里面是否以空格结尾
      var classes=this.e.className;
       if(!classes)
         this.e.className='';
       if(classes.length!==0 && classes[classes.length-1]!==' ')/*不是以空格结尾*/
       {
          c=' '+c;
       }
       this.e.className+=c;
  };
  /*
  * 移除类名字c
  * */
  CSSClassList.prototype.remove=function (c) {
     if(this.contains(c))
     {
       var pattern=new RegExp('\\b'+c+'\\b\\s*','g');
       this.e.className=this.e.className.replace(pattern,'');
       if(!this.e.className)
       {
         this.e.removeAttribute('class');
       }
     }
  };

  /*
  * 如果c存在，删除c，返回false
  * 否则，追加c，返回true
  * */
  CSSClassList.prototype.toggle=function (c) {
     if(this.contains(c))
     {
       this.remove(c);
       return false;
     }
     else
     {
       this.add(c);
       return true;
     }
  };

  /*
  * 覆盖toString方法
  * */
  CSSClassList.prototype.toString=function () {
      return this.e.className;
  };

  /*
  * 提供类数组的功能，转换成数组
  * */
  CSSClassList.prototype.toArray=function () {
      return this.e.className.match(/\b\w+\b/g) ||[];
  };

  return classList;
})();
/*以上代码提供对HTML5标签属性class的跨浏览器操作*/