From 98b32443b7bfb7064d6c4010bd6b81aae28716ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?16=20=E9=98=99=E8=8B=8F=E6=96=87?= <2361635242@qq.com>
Date: Wed, 6 Dec 2023 12:27:46 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20231201js\350\277\233\351\230\2661.md"   |   0
 .../20231205js\350\277\233\351\230\2662.md"   | 301 ++++++++++++++++++
 2 files changed, 301 insertions(+)
 rename "16 \351\230\231\350\213\217\346\226\207/20231201\350\277\207\346\273\244\345\231\250\344\275\234\344\270\232.md" => "16 \351\230\231\350\213\217\346\226\207/20231201js\350\277\233\351\230\2661.md" (100%)
 create mode 100644 "16 \351\230\231\350\213\217\346\226\207/20231205js\350\277\233\351\230\2662.md"

diff --git "a/16 \351\230\231\350\213\217\346\226\207/20231201\350\277\207\346\273\244\345\231\250\344\275\234\344\270\232.md" "b/16 \351\230\231\350\213\217\346\226\207/20231201js\350\277\233\351\230\2661.md"
similarity index 100%
rename from "16 \351\230\231\350\213\217\346\226\207/20231201\350\277\207\346\273\244\345\231\250\344\275\234\344\270\232.md"
rename to "16 \351\230\231\350\213\217\346\226\207/20231201js\350\277\233\351\230\2661.md"
diff --git "a/16 \351\230\231\350\213\217\346\226\207/20231205js\350\277\233\351\230\2662.md" "b/16 \351\230\231\350\213\217\346\226\207/20231205js\350\277\233\351\230\2662.md"
new file mode 100644
index 0000000..0181c92
--- /dev/null
+++ "b/16 \351\230\231\350\213\217\346\226\207/20231205js\350\277\233\351\230\2662.md"	
@@ -0,0 +1,301 @@
+# 笔记
+
+### 构造函数
+
+构造函数是专门用于创建对象的函数，如果一个函数使用 `new` 关键字调用，那么这个函数就是构造函数。
+
+```
+<script>
+  // 定义函数
+  function foo() {
+    console.log('通过 new 也能调用函数...');
+  }
+  // 调用函数
+  new foo;
+</script>
+```
+
+总结：
+
+1. 使用 `new` 关键字调用函数的行为被称为实例化
+2. 实例化构造函数时没有参数时可以省略 `()`
+3. 构造函数的返回值即为新创建的对象
+4. 构造函数内部的 `return` 返回的值无效！
+
+注：实践中为了从视觉上区分构造函数和普通函数，习惯将构造函数的首字母大写。
+
+### 实例成员
+
+通过构造函数创建的对象称为实例对象，实例对象中的属性和方法称为实例成员。
+
+```
+<script>
+  // 构造函数
+  function Person() {
+    // 构造函数内部的 this 就是实例对象
+    // 实例对象中动态添加属性
+    this.name = '小明'
+    // 实例对象动态添加方法
+    this.sayHi = function () {
+      console.log('大家好~')
+    }
+  }
+  // 实例化，p1 是实例对象
+  // p1 实际就是 构造函数内部的 this
+  const p1 = new Person()
+  console.log(p1)
+  console.log(p1.name) // 访问实例属性
+  p1.sayHi() // 调用实例方法
+</script>
+```
+
+总结：
+
+1. 构造函数内部 `this` 实际上就是实例对象，为其动态添加的属性和方法即为实例成员
+2. 为构造函数传入参数，动态创建结构相同但值不同的对象
+
+注：构造函数创建的实例对象彼此独立互不影响。
+
+### 静态成员
+
+在 JavaScript 中底层函数本质上也是对象类型，因此允许直接为函数动态添加属性或方法，构造函数的属性和方法被称为静态成员。
+
+```
+<script>
+  // 构造函数
+  function Person(name, age) {
+    // 省略实例成员
+  }
+  // 静态属性
+  Person.eyes = 2
+  Person.arms = 2
+  // 静态方法
+  Person.walk = function () {
+    console.log('^_^人都会走路...')
+    // this 指向 Person
+    console.log(this.eyes)
+  }
+</script>
+```
+
+总结：
+
+1. 静态成员指的是添加到构造函数本身的属性和方法
+2. 一般公共特征的属性或方法静态成员设置为静态成员
+3. 静态成员方法中的 `this` 指向构造函数本身
+
+## 内置构造函数
+
+> 掌握各引用类型和包装类型对象属性和方法的使用。
+
+在 JavaScript 中**最主要**的数据类型有 6 种，分别是字符串、数值、布尔、undefined、null 和 对象，常见的对象类型数据包括数组和普通对象。其中字符串、数值、布尔、undefined、null 也被称为简单类型或基础类型，对象也被称为引用类型。
+
+在 JavaScript 内置了一些构造函数，绝大部的数据处理都是基于这些构造函数实现的，JavaScript 基础阶段学习的 `Date` 就是内置的构造函数。
+
+```
+<script>
+  // 实例化
+	let date = new Date();
+  
+  // date 即为实例对象
+  console.log(date);
+</script>
+```
+
+甚至字符串、数值、布尔、数组、普通对象也都有专门的构造函数，用于创建对应类型的数据。
+
+### Object
+
+`Object` 是内置的构造函数，用于创建普通对象。
+
+```
+<script>
+  // 通过构造函数创建普通对象
+  const user = new Object({name: '小明', age: 15})
+
+  // 这种方式声明的变量称为【字面量】
+  let student = {name: '杜子腾', age: 21}
+  
+  // 对象语法简写
+  let name = '小红';
+  let people = {
+    // 相当于 name: name
+    name,
+    // 相当于 walk: function () {}
+    walk () {
+      console.log('人都要走路...');
+    }
+  }
+
+  console.log(student.constructor);
+  console.log(user.constructor);
+  console.log(student instanceof Object);
+</script>
+```
+
+。
+
+总结：
+
+1. 推荐使用字面量方式声明对象，而不是 `Object` 构造函数
+2. `Object.assign` 静态方法创建新的对象
+3. `Object.keys` 静态方法获取对象中所有属性
+4. `Object.values` 表态方法获取对象中所有属性值
+
+ # 作业
+
+```html
+<script>
+const goodsList = [
+      {
+        id: '4001172',
+        name: '称心如意手摇咖啡磨豆机咖啡豆研磨机',
+        price: 289.9,
+        picture: 'https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg',
+        count: 2,
+        spec: { color: '白色' }
+      },
+      {
+        id: '4001009',
+        name: '竹制干泡茶盘正方形沥水茶台品茶盘',
+        price: 109.8,
+        picture: 'https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png',
+        count: 3,
+        spec: { size: '40cm*40cm', color: '黑色' }
+      },
+      {
+        id: '4001874',
+        name: '古法温酒汝瓷酒具套装白酒杯莲花温酒器',
+        price: 488,
+        picture: 'https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png',
+        count: 1,
+        spec: { color: '青色', sum: '一大四小' }
+      },
+      {
+        id: '4001649',
+        name: '大师监制龙泉青瓷茶叶罐',
+        price: 139,
+        picture: 'https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png',
+        count: 1,
+        spec: { size: '小号', color: '紫色' },
+        gift: '50g茶叶,清洗球,宝马, 奔驰'
+      }
+    ]
+
+    document.querySelector('.list').innerHTML = goodsList.map(item => {
+      const {name,price,picture,count,spec,gift} = item
+      // 规格文字 解构spec再连接成数组
+      const text = Object.values(spec).join('/')
+      // 处理赠品 处理成数组因为gift是字符串 获取字符串时要用逗号隔开 用完之后还要转换成字符串
+      const str = gift ? gift.split(',').map(item => `<span class="tag">【赠品】${item}</span>`).join('') : ''
+      // 计算价格
+      const subTotal = price * count
+      return `<div class="item">
+      <img src="${picture}" alt="">
+      <p class="name">${name} ${str}</p>
+      <p class="spec">${text}</p>
+      <p class="price">${price}</p>
+      <p class="count">x${count}</p>
+      <p class="sub-total">${price*count}</p>
+    </div>`
+    }).join('')
+
+    const total = goodsList.reduce((sum,item)=>sum+(item.count*item.price),0)
+    document.querySelector('.amount').innerHTML = total.toFixed(2)
+</script>
+```
+
+```html
+<script>
+const tbody = document.querySelector('.tbody')
+    // 获取全选按钮
+    const checkAll = document.querySelector('.check-all input')
+
+    function render() {
+      // 遍历数组，将数组中的元素进行处理，并转成字符串填充给tbody
+      tbody.innerHTML = dataArr.map((ele, index) => {
+        let { icon, isChecked, num, price } = ele
+        // console.log(111);
+        // console.log(211);
+        return `
+          <div class="tr" data-id = ${index}>
+                <div class="td"><input type="checkbox"  ${isChecked ? 'checked' : ''} /></div>
+                <div class="td"><img src="${icon}" alt="" /></div>
+                <div class="td">${price}</div>
+                <div class="td">
+                  <div class="my-input-number">
+                    <button class="decrease"> - </button>
+                    <span class="my-input">${num}</span>
+                    <button class="increase"> + </button>
+                  </div>
+                </div>
+                <div class="td">${price * num}</div>
+                <div class="td"><button class="del button" >删除</button></div>
+          </div> 
+      `
+      }).join('')
+      // 大全选框的状态判断，every()只要有一个元素不满足条件就返回false 全满足则返回true
+      checkAll.checked = dataArr.every(ele => ele.isChecked === true)
+      // 判断购物车是否有东西
+      if (!dataArr.length) {
+        tbody.innerHTML = `<div class="empty">🛒空空如也</div>`
+      }
+      // 筛选勾选的商品
+      const newArr = dataArr.filter(ele => ele.isChecked === true)
+      // 将勾选的商品的价格进行计算
+      document.querySelector('.price').innerHTML = newArr.reduce((sum, total) => sum + total.price * total.num, 0)
+      // 将勾选的商品的件数进行计算
+      document.querySelector('.pay').innerHTML = `<button class="pay">结算( ${newArr.reduce((sum, total) => sum + total.num, 0)} )</button>`
+    }
+    // 直接渲染一次
+    render()
+    // 添加点击事件
+    checkAll.addEventListener('click', () => {
+      dataArr.forEach(ele => ele.isChecked = checkAll.checked)
+      // console.log(dataArr);
+      render()
+    })
+
+    // 通过tbody进行事件委托操控事件
+    tbody.addEventListener('click', function (e) {
+      // console.log(e.target);
+      const { tagName, className } = e.target
+      // 数组有下标，刚好对应自定义属性
+      const id2 = e.target.parentNode.parentNode.dataset.id
+      const id3 = e.target.parentNode.parentNode.parentNode.dataset.id
+      // console.log(e.target.parentNode.parentNode.parentNode.dataset.id);
+      // 小复选框
+      if (tagName === 'INPUT') {
+        dataArr[id2].isChecked = dataArr[id2].isChecked ? false : true
+        render()
+      }
+
+      // 删除
+      if (className === 'del button') {
+        // console.log(11);
+        dataArr.splice(id2, 1)
+        render()
+      }
+
+      // -号
+      if (className === 'decrease') {
+        // console.log(id3);
+        if (dataArr[id3].num > 1) {
+          dataArr[id3].num--
+          render()
+        } else {
+          dataArr.splice(id3, 1)
+          render()
+        }
+      }
+
+      // +号
+      if (className === 'increase') {
+        // console.log(id3);
+        dataArr[id3].num++
+        render()
+      }
+      // console.log(dataArr);
+    })
+ </script>
+```
\ No newline at end of file
-- 
Gitee