avascript ES5 定義類（class）的三種方法

一、構(gòu)造函數(shù)法

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 關(guān)鍵字來聲明類。

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

constructor 構(gòu)造函數(shù)用于創(chuàng)建和初始化一個類

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

    // 構(gòu)造函數(shù)
    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}`);
    }

    // 靜態(tài)方法 該方法不會被實例繼承，而是直接通過類來調(diào)用
    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() // 無法調(diào)用
user.sleep()
console.log(user.sex);
console.log(user.life);

繼承

/**

 * @author zswxjjh

 * @date  2021/3/29

 */
'use  strict';

/*
* 模仿DOMTokenList對象，提供contains（）
* add（），remove（）。toggle（）方法
* 重寫toString方法，為了模擬類數(shù)組特性
* 提供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('參數(shù)不存在!');
    }
    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;
      //判斷值里面是否以空格結(jié)尾
      var classes=this.e.className;
       if(!classes)
         this.e.className='';
       if(classes.length!==0 && classes[classes.length-1]!==' ')/*不是以空格結(jié)尾*/
       {
          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;
  };

  /*
  * 提供類數(shù)組的功能，轉(zhuǎn)換成數(shù)組
  * */
  CSSClassList.prototype.toArray=function () {
      return this.e.className.match(/\b\w+\b/g) ||[];
  };

  return classList;
})();
/*以上代碼提供對HTML5標(biāo)簽屬性class的跨瀏覽器操作*/