拓展: 構造函數 + 原型
最為主流的解決方案
<script>
// 構造函數 + 原型 搭配來使用
// 原型 本質 是一個對象
// 當我們在創建一個 構造函數的時候 原型 被創建
// 如果我們在原型對象上 增加一個屬性或者方法 那么實例 擁有所增加的方法
// 原型 就是 DNA 構造函數 父親 實例 孩子
// function Person() {
// this.b = function () {};
// }
// // 訪問原型
// // console.log(Person.prototype);
// Person.prototype.a = function () {
// console.log('這個是a方法');
// };
// const p1 = new Person();
// // console.log(p1);
// p1.a();
// function Obj() {
// }
// Obj.prototype.a=function(){
// }
function Person() {
this.hair = 100;
// this.decrease = decrease;
}
Person.prototype.decrease = function () {
this.hair--;
};
/*
1 原型 本質是一個對象 在我們創建構造函數的時候就擁有
2 在原型上添加的一些方法，可以直接被 實例所使用和共享
3 可以這么理解 構造函數=父親 實例=孩子 原型=DNA
4 使用面向對象的方式來創建對象
1 構造函數內部 來定義 非函數類型的屬性 如 姓名 身高 膚色 性別
2 原型來定義 函數類型的屬性 函數
*/
</script>
1.原型的簡介
- 原型本質是一個對象 創建構造函數的時候 也有
- 在原型上添加的方法 可以直接被實例所使用
- 例子 構造函數-父親 實例-孩子 原型-DNA
一, this 與 實例
1. this介紹
只要我們想要給實例 增加一些屬性 或者 方法 給this添加即可 ！！！
2. this代碼
<script>
// 每一個構造函數中 都存在 有一個 魔鬼 this
// 構造函數 默認情況下 就是返回了 this
// this 等于你所new出來的實例 per
// 只要給構造函數中的this 添加 屬性或者方法
// 那么 實例 自然擁有對應的屬性和方法
function Person() {
this.username = '悟空'; // per也增加了一個屬性 this
this.clear=()=>{};
}
const per = new Person();
per.username = '悟空';
</script>
3. 給實例添加屬性方法
非函數類型的屬性 都是添加在 構造函數內部
-
函數類型的屬性-添加在原型上
在原型上的函數 通過this 來訪問到 在構造函數中定義的屬性
二, 實操小案例
one - includes 查重輸出
<script>
/*
1 先準備好 靜態結構
2 獲取dom元素
1 輸入框 input
2 列表 ul
3 定義全局變量 數組 存放 輸入框中的值 arr=["蘋果","西瓜"]
4 定義一個函數 根據arr 數組 來生成li標簽 顯示到 ul中
5 處理 input的鍵盤抬起事件
1 判斷 用戶按下的是不是 回車鍵
2 同時 判斷 當前輸入框的值 有沒有在 數組 arr中存在過
3 才往arr中添加 輸入框的值
4 數組發生改變， 希望頁面ul也可以跟著發生改變 調用 函數 渲染列表
*/
// 獲取元素
const input = document.querySelector('input');
const ul = document.querySelector('ul');
const arr = ['西瓜', '蘋果'];
// 函數封裝
const renderHTML = () => {
let html = '';
// 遍歷
arr.forEach((value) => (html += `<li>${value}</li>`));
// 輸出
ul.innerHTML = html;
};
// 調用
renderHTML();
// 事件
input.addEventListener('keyup', function (event) {
// 判斷
if (event.key === 'Enter' && !arr.includes(input.value)) {
arr.push(input.value);
// 重新渲染
renderHTML();
}
});
</script>
two - 圖片緩慢變大案例
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
width: 600px;
border: 1px solid #000;
margin: 0 auto;
transition: 2s;
}
.scale {
transform: scale(2);
}
</style>
</head>
<body>
<button>放大</button>
<img src="./ings.png" alt="" />
<script>
/*
1 靜態結構
2 給按鈕綁定點擊事件
3 事件觸發
1 獲取圖片的dom元素
2 添加一個class
4 面向過程寫法
*/
const button = document.querySelector('button');
const img = document.querySelector('img');
button.addEventListener('click', function () {
img.classList.add('scale');
});
</script>
</body>
two - 優化
<body>
<button>放大</button>
<script>
// 面向對象的方式
function MyImg(src) {
// 新建頁面元素
const img = document.createElement('img')
// 獲取圖片地址
img.src = src
// img添加過渡屬性
img.style.transition = '2s'
// 插入到body頁面
document.body.append(img)
// 讓原型獲取到img元素
this.imgs = img
}
// 原型
MyImg.prototype.scale = function(num){
// 點擊之后添加屬性
this.imgs.style.transform = `scale(${num})`
}
const myImg = new MyImg('./ings.png'); // body標簽上能出現一張圖片
const button = document.querySelector('button');
button.addEventListener('click', function () {
// myImg.scale(2);// 緩慢放大兩倍
myImg.scale(3); // 緩慢放大3 倍
});
</script>
</body>
