拓展: 构造函数 + 原型
最为主流的解决方案
<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>
