Set對象

• 是一個對象

• 存放的數(shù)據(jù)不會重復

• 可以理解為不重復的數(shù)組

• Set 對象 需要被 new 出來使用

數(shù)組轉Set對象

const set = new Set([1,2,3])

Set對象轉數(shù)組

const arr = [...Set]

Set對象add方法

set.add(123)

//   Set 對象 需要被 new 出來使用
        const set = new Set()
        //   存放數(shù)據(jù) 用add方法
        set.add(1)
        set.add(2)
        set.add(3)
        set.add(3)
        set.add(2)
        set.add(2)
        
        console.log(set)  // {1,2,3}

        // 把 set對象 轉成數(shù)組
        const arr = [...set]
        //  數(shù)組轉 Set對象
        const set2 = new Set(arr)
        console.log(arr)  //[1,2,3]
        console.log(set2)  //{1,2,3}

面向對象

項目級別代碼的思維

特征: 封裝 繼承

創(chuàng)建對象的方式

字面量

• 不適合創(chuàng)建多個同樣類型的對象的場景
• 不方便維護 修改

const obj ={ name:"悟空",height:100,age:5000};

工廠函數(shù)

• 失去血緣關系,無法簡單分辨對象的特征

• 封裝

• 無法繼承

    function p(name,a,b,c,d,e) {
          return {
            nickname:name,
            a,b,c,d,e
          }
          
        }
        function person(name, height,a,b,c,d,e) {
          return {
            nickname: name,
            height,
            a,b,c,d,e
          };
        }
  

構造函數(shù)

• 可以方便的創(chuàng)建對象

• 方便后期維護修改

• 函數(shù)提取到外部,多個實例共享一個函數(shù)(優(yōu)化內存空間)

• 弊端: 污染全局變量

      function createStudent(name, age) {
        this.name = name;
        this.age = age;
        this.say = function () {
          console.log(this.name);
        }
      }
  
      const obj = new createStudent("悟能", 83);
      const obj1 = new createStudent("悟能1", 84);
  
      console.log(obj.say === obj1.say); // false  不是同一say方法 浪費了內存
  

  [圖片上傳失敗...(image-6d5605-1652531679819)]

構造函數(shù) + 原型

• 最為主流的解決方案

構造函數(shù)

• 本質是一個函數(shù)

• 名稱規(guī)范 首字母大寫

• 作用: 用來創(chuàng)建對象

• 創(chuàng)建出來的對象叫 實例

  function Preson() {
              
  }
  const pre = new Preson()
  //Preson()就是構造函數(shù)  pre 就是實例
  

• 內部會默認返回this

• this等于一些被new的實例

this

• 構造函數(shù)中 都存在一個 this

• 構造函數(shù) 默認情況下 返回的是this

• this 等于 new出來的實例

• 只要給構造函數(shù)中的this 添加 屬性或方法 實例就擁有對應的屬性和方法

function Preson() {
            this.username = '八戒'
            this.add = () => {}
        }
        const per = new Preson()
        per.height = 100
        const per2 = new Preson()
        console.log(per)
        console.log(per2)

給實例添加屬性的方法

• 非函數(shù)類型的屬性 添加在構造函數(shù)內部
• 函數(shù)類型的屬性 添加在原型上 在原型上的屬性通過this來訪問到 在構造函數(shù)中定義的屬性

原型

• 原型本質是個對象 在創(chuàng)建構造函數(shù)的時候就有
• 在原型上添加一些方法 可以直接 被實例 使用 和共享

[圖片上傳失敗...(image-58cd9d-1652531679819)]

小案例

function Person() {
            this.hair = 100
            // this.decrease = decrease
        }
        // 在原型上添加方法
        Person.prototype.decrease = function decrease() {
            this.hair--
        }


        const p1 = new Person()

        const btn = document.querySelector('button')

        btn.addEventListener('click',function () {
            p1.decrease()
            console.log(p1.hair)
        })