Set对象

• 是一个对象

• 存放的数据不会重复

• 可以理解为不重复的数组

• Set 对象 需要被 new 出来使用

数组转Set对象

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

Set对象转数组

const arr = [...Set]

Set对象add方法

set.add(123)

//   Set 对象 需要被 new 出来使用
        const set = new Set()
        //   存放数据 用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对象 转成数组
        const arr = [...set]
        //  数组转 Set对象
        const set2 = new Set(arr)
        console.log(arr)  //[1,2,3]
        console.log(set2)  //{1,2,3}

面向对象

项目级别代码的思维

特征: 封装 继承

创建对象的方式

字面量

• 不适合创建多个同样类型的对象的场景
• 不方便维护 修改

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

工厂函数

• 失去血缘关系,无法简单分辨对象的特征

• 封装

• 无法继承

    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
          };
        }
  

构造函数

• 可以方便的创建对象

• 方便后期维护修改

• 函数提取到外部,多个实例共享一个函数(优化内存空间)

• 弊端: 污染全局变量

      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)]

构造函数 + 原型

• 最为主流的解决方案

构造函数

• 本质是一个函数

• 名称规范 首字母大写

• 作用: 用来创建对象

• 创建出来的对象叫 实例

  function Preson() {
              
  }
  const pre = new Preson()
  //Preson()就是构造函数  pre 就是实例
  

• 内部会默认返回this

• this等于一些被new的实例

this

• 构造函数中 都存在一个 this

• 构造函数 默认情况下 返回的是this

• this 等于 new出来的实例

• 只要给构造函数中的this 添加 属性或方法 实例就拥有对应的属性和方法

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

给实例添加属性的方法

• 非函数类型的属性 添加在构造函数内部
• 函数类型的属性 添加在原型上 在原型上的属性通过this来访问到 在构造函数中定义的属性

原型

• 原型本质是个对象 在创建构造函数的时候就有
• 在原型上添加一些方法 可以直接 被实例 使用 和共享

[图片上传失败...(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)
        })