1.兩種面向編程思想
2.構造函數實現封裝以及存在的問題
下面就引出了原型對象
3.原型對象prototype
共享原理圖：
4.數組擴展案例-求最大值和數組求和
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// 自己定義 數組擴展方法 求和 和 最大值 // 1. 我們定義的這個方法，任何一個數組實例對象都可以使用// 2. 自定義的方法寫到 數組.prototype 身上// 1. 最大值const arr = [1, 2, 3]Array.prototype.max = function () {// 展開運算符return Math.max(...this)// 原型函數里面的this 指向誰？ 實例對象 arr}// 2. 最小值Array.prototype.min = function () {// 展開運算符return Math.min(...this)// 原型函數里面的this 指向誰？ 實例對象 arr}console.log(arr.max())console.log([2, 5, 9].max())console.log(arr.min())// const arr = new Array(1, 2)// console.log(arr)// 3. 求和 方法 Array.prototype.sum = function () {return this.reduce((prev, item) => prev + item, 0)}console.log([1, 2, 3].sum())console.log([11, 21, 31].sum())</script>
</body></html>5.constructor屬性以及應用
6.對象原型__proto__
7.原型繼承
8.原型鏈以及instanceof運算符
9.綜合案例-模態框構造函數寫法
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>面向對象封裝消息提示</title><style>.modal {width: 300px;min-height: 100px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);border-radius: 4px;position: fixed;z-index: 999;left: 50%;top: 50%;transform: translate3d(-50%, -50%, 0);background-color: #fff;}.modal .header {line-height: 40px;padding: 0 10px;position: relative;font-size: 20px;}.modal .header i {font-style: normal;color: #999;position: absolute;right: 15px;top: -2px;cursor: pointer;}.modal .body {text-align: center;padding: 10px;}.modal .footer {display: flex;justify-content: flex-end;padding: 10px;}.modal .footer a {padding: 3px 8px;background: #ccc;text-decoration: none;color: #fff;border-radius: 2px;margin-right: 10px;font-size: 14px;}.modal .footer a.submit {background-color: #369;}</style>
</head><body><button id="delete">刪除</button><button id="login">登錄</button><!-- <div class="modal"><div class="header">溫馨提示 <i>x</i></div><div class="body">您沒有刪除權限操作</div></div> --><script>// 1. 模態框的構造函數function Modal(title = '', message = '') {// 公共的屬性部分this.title = titlethis.message = message// 因為盒子是公共的// 1. 創建 一定不要忘了加 this this.modalBox = document.createElement('div')// 2. 添加類名this.modalBox.className = 'modal'// 3. 填充內容 更換數據this.modalBox.innerHTML = `<div class="header">${this.title} <i>x</i></div><div class="body">${this.message}</div>`// console.log(this.modalBox)}// 2. 打開方法 掛載 到 模態框的構造函數原型身上Modal.prototype.open = function () {if (!document.querySelector('.modal')) {// 把剛才創建的盒子 modalBox 渲染到 頁面中 父元素.appendChild(子元素)document.body.appendChild(this.modalBox)// 獲取 x 調用關閉方法this.modalBox.querySelector('i').addEventListener('click', () => {// 箭頭函數沒有this 上一級作用域的this// 這個this 指向 m this.close()})}}// 3. 關閉方法 掛載 到 模態框的構造函數原型身上Modal.prototype.close = function () {document.body.removeChild(this.modalBox)}// 4. 按鈕點擊document.querySelector('#delete').addEventListener('click', () => {const m = new Modal('溫馨提示', '您沒有權限刪除')// 調用 打開方法m.open()})// 5. 按鈕點擊document.querySelector('#login').addEventListener('click', () => {const m = new Modal('友情提示', '您還么有注冊賬號')// 調用 打開方法m.open()})</script>
</body></html>
Test全解析：從原理到實戰)
