学习内容
- 对象
- 原型及原型链
- 原型
- 修改内置对象的方法
- 选项卡
- 轮播图
对象
/*
object(物质、物体)对象： 只要具有（本质特征）和（行为）的事物。
人：
本质特征：姓名、年龄、性别、身高、体重、性格
属性（变量）
行为：吃、喝、玩、乐
方法（函数）
一切皆对象。
面向过程：
面向对象：
类：具体相同属性和方法的一类物质的集合。
*/
//1. 字面量的方式（需求：只需要一个对象时）
// let obj = { name: '小丽',age: 18,sex: '女',height: 180,eat : function(){
// return '会做饭';
// }};
// obj.name = '小花';
//2. 构造函数（类）-模板
// Object
// let obj = new Object();
// obj.name = '小仙';
// obj.age = 21;
// obj.sex = '女';
// obj.getMoney = function(){
// return '$';
// }
// let obj1 = new Object()
// obj1.name = '小青';
// obj1.age = 2000;
// obj1.sex = '女';
//3. 自定义构造函数
// 工厂模式
function fn(name,age,sex){
let obj = new Object();
obj.name = name;
obj.age = age;
obj.sex = sex;
obj.getMoney = function(){
return '$';
}
return obj;
}
// let obj = fn('小仙儿',21,'女');
// let obj1 = fn('小绿',2000,'女');
// let obj2 = fn('小黑',2,'母');
// console.log(typeof obj1,typeof obj2);
// console.log(obj1 instanceof Object,obj2 instanceof Object);
//缺点：
//1. 无法具体区分一个对象是哪一类的对象。
//2. 不符合程序员创建对象的行为习惯。(new)
//面试题 ：
//1. 请描述一下构造函数创建对象时的整个过程（new对象对，具体做了哪些事）
// 1> 调用了构造函数
// 2> 系统会自动创建一个对象
// 3> 系统会自动返回一个对象
// 4> 在构造函数中的this指向new出来的实例对象
//升级后的工厂模式=== 构造函数 -- 模板
function Person(name,age,sex){
// let obj = new Object();
this.name = name;
this.age = age;
this.sex = sex;
this.getMoney = function(){
return '$';
}
// return obj;
}
//自定义一个构造函数-Dog
function Dog(name,age,sex){
//属性
this.name = name;
this.age = age;
this.sex = sex;
//方法
this.dark = function(){
return '叫';
}
}
//创建
// let obj = new Person('小美女',18,'女');
// let dog = new Dog('小黑',2,'母');
// console.log(obj instanceof Person,dog instanceof Person);
let dog1 = new Dog();
let dog2 = new Dog();
console.log(dog1.dark === dog2.dark);
//构造函数的缺点：构造函数中的内容，只要new一个对象，构造函数中的内容就会重新开辟一次空间，所以造成了大量内存浪费。
原型及原型链
//原型：原型的空间是共享。原型空间只开辟一次。
//1. 每一个函数都有一个属性prototype,通过这个属性可以找到该函数对应的原型对象。
//2. 每一个对象都有一个属性__proto__ ,通过这个属性可以找到该对象对应的原型对象。原型对象通过__proto__,找到父级原型对象，一级一级向上查找的过程，原型链，最终找到的是null
//3. 每一个原型对象都有一个属性constructor,通过这个属性可以找到该原型对象对应的构造函数。
// 数组的原型对象 == 数组的原型对象
console.log(Array.prototype === [].__proto__); //true
// 数组的构造函数 == 数组对象.原型.构造器
console.log(Array === [].__proto__.constructor); //true
// 数组的原型对象的父级原型对象 == Object的原型对象
console.log(Array.prototype.__proto__ === Object.prototype); //true
// 数组的原型对象的父级原型对象的父级原型对象 === null
console.log(Array.prototype.__proto__.__proto__ === null); //true
原型
//构造函数
function Person(){}
//原型对象中
Person.prototype.name = '张三'; //原型属性
Person.prototype.age = 18; //原型属性
//原型方法
Person.prototype.eat = function(){
return '吃';
}
//创建对象
let ps1 = new Person();
let ps2 = new Person();
console.log(ps1.eat === ps2.eat);
//原型的缺点
console.log(ps1.name,ps2.name);
//各取优点，取构造函数和原型对象的优点
//构造函数
function Dog(name,age){
//实例属性
this.name = name;
this.age = age;
//实例方法
this.eat = function(){
return '吃吃';
}
}
//原型方法
Dog.prototype.eat = function(){
return '吃';
}
let dog = new Dog('小黄',3);
dog.eat = function(){
return '吃吃吃';
}
let dog1 = new Dog('小黑',2);
console.log(dog.name);
console.log(dog.eat());
console.log(dog.toString());
console.log(dog);
console.log(dog.hehe);
修改内置对象的方法
Array.prototype.fnSum = function(){
return this.reduce((a,b) => {
return a + b;
})
}
let arr = [1,2,3,4,5,6];
console.log(arr.fnSum());
console.log(arr);
let list = [6,7,8,9,10];
console.log(list.fnSum());
String.prototype.fnReverse = function(){
return this.split('').reverse().join('');
}
let str = 'hello';
console.log(str.fnReverse());
选项卡
<style>
*{
padding: 0;
margin: 0;
/* list-style: none; */
}
#box{
width: 500px;
height: 320px;
display: flex;
flex-direction: column;
margin: 50px auto;
border: 3px solid #333;
}
#box>ul{
height: 60px;
display: flex;
}
#box > ul > li {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
color: #fff;
background-color: skyblue;
cursor: pointer;
}
#box > ul > li.active{
background-color: orange;
}
#box > ol {
flex: 1;
position: relative;
}
#box > ol > li {
width: 100%;
height: 100%;
background-color: purple;
font-size: 50px;
color: #fff;
position: absolute;
left: 0;
top: 0;
display: none;
}
#box > ol > li.active {
display: block;
}
</style>
<body>
<div id="box">
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
<script>
//创建tab切换的构造函数
function Tab(){
//实例属性
//获取所有的tab按钮（ul > li)
this.tab = document.querySelectorAll('#box>ul>li');
//获取所有的内容（ol>li)
this.content = document.querySelectorAll('#box>ol>li');
//添加事件
this.addEvent(); //调用方法
}
//原型方法-添加事件
Tab.prototype.addEvent = function(){
//遍历所有的tab按钮
for(let i = 0,len = this.tab.length;i < len;i ++){
//添加事件
this.tab[i].onclick = function(){
//将所的tab按钮上的active类名删除
//将所有的内容上的active类名删除
//遍历
for(let j = 0;j < len;j ++){
this.tab[j].classList.remove('active');
this.content[j].classList.remove('active');
}
//将当前tab添加类名actvie
this.tab[i].classList.add('active');
//将当前内容添加类名active
this.content[i].classList.add('active');
}.bind(this); //实例对象
}
}
new Tab();
</script>
</body>
轮播图
/*
轮播图：
核心： 当前下标 - （事件、计时器）
轮播方式：width/height/left/top/display/background/zindex/opacity
一、完善页面
1. 左按钮
1》创建span
2》添加到页面
3》添加内容
2. 右按钮
1》创建span
2》添加到页面
3》添加内容
4》添加id=rtBtn
3. 文字信息框
1》创建div
2》添加到页面
3》添加id=msg
4. 小圆点
1》创建ol
2》创建li
3》li > ol
4》ol添加到页面
二、添加事件
1. 左按钮 - 点击事件
当前下标 --
if(当前下标 === -1）{
当前下标 = 长度 - 1
}
调用实现轮播（）
2. 右按钮 - 点击事件
当前下标 ++
if(当前下标 === 长度){
当前下标 = 0
}
调用实现轮播（）
3. 小圆点 - 移入事件
当前下标 = 移入的下标
调用实现轮播（）
三、实现轮播
//1. 大图
所有大图-display = none
当前大图-display = block
//2. 小圆点
所有的小圆点-backgroundColor = red
当前小圆点-backgroundColor = blue
//3. 文字
当前大图.第一个元素子节点.第一个元素子节点.alt
四、自动轮播
计时器
当前下标 ++
if(当前下标 === 长度){
当前下标 = 0
}
调用实现轮播（）
*/
//面向对象
function Slider(){
//大盒子
this.big_box = document.querySelector('#slide1');
//所有的大图ul>li
this.ul_li = this.big_box.children[0].children;
//求长度
this.num = this.ul_li.length;
//完善页面,并返回所有的ol>li
this.ol_li = this.addEle();
//当前下标
this.cur_index = 0;
//调用添加事件
this.addEvent();
//调用轮播
this.slide();
//调用自动轮播
this.autoPlay();
}
//原型方法
Slider.prototype.addEle = function(){
// 1. 左按钮
// 1》创建span
this.ltBtn = document.createElement('span');
// 2》添加到页面
this.big_box.appendChild(this.ltBtn);
// 3》添加内容
this.ltBtn.innerHTML = '<';
// 2. 右按钮
// 1》创建span
this.rtBtn = document.createElement('span');
// 2》添加到页面
this.big_box.appendChild(this.rtBtn);
// 3》添加内容
this.rtBtn.innerHTML = '>';
// 4》添加id=rtBtn
this.rtBtn.id = 'rtBtn';
// 3. 文字信息框
// 1》创建div
this.div = document.createElement('div');
// 2》添加到页面
this.big_box.appendChild(this.div);
// 3》添加id=msg
this.div.id = 'msg';
// 4. 小圆点
// 1》创建ol
let ol = document.createElement('ol');
// 2》创建li
// 2.1》创建一个空数组
let arr = []; //用户存储li
for(let i = 0;i < this.num;i ++){
let li = document.createElement('li');
// 3》li > ol
ol.appendChild(li);
// 3.1》li存入数组
arr.push(li);
}
// 4》ol添加到页面
this.big_box.appendChild(ol);
// 返回数组
return arr;
}
//原型方法-添加事件
Slider.prototype.addEvent = function(){
// 1. 左按钮 - 点击事件
// 当前下标 --
// if(当前下标 === -1）{
// 当前下标 = 长度 - 1
// }
// 调用实现轮播（）
this.ltBtn.onclick = () => {
this.cur_index --;
if(this.cur_index === -1){
this.cur_index = this.num - 1;
}
this.slide();
}
// 2. 右按钮 - 点击事件
// 当前下标 ++
// if(当前下标 === 长度){
// 当前下标 = 0
// }
// 调用实现轮播（）
this.rtBtn.onclick = () => {
this.cur_index ++;
if(this.cur_index === this.num){
this.cur_index = 0;
}
this.slide();
}
// 3. 小圆点 - 移入事件
// 当前下标 = 移入的下标
// 调用实现轮播（）
for(let i = 0;i < this.num;i ++){
this.ol_li[i].onmouseenter = () => {
this.cur_index = i;
this.slide();
}
}
}
// 三、实现轮播
Slider.prototype.slide = function(){
//1. 大图
// 所有大图-display = none
// 当前大图-display = block
//2. 小圆点
// 所有的小圆点-backgroundColor = red
// 当前小圆点-backgroundColor = blue
//3. 文字
// 当前大图.第一个元素子节点.第一个元素子节点.alt
for(let i = 0;i < this.num;i ++){
// 所有大图-display = none
this.ul_li[i].style.display = 'none';
// 所有的小圆点-backgroundColor = red
this.ol_li[i].style.backgroundColor = 'red';
}
// 当前大图-display = block
this.ul_li[this.cur_index].style.display = 'block';
// 当前小圆点-backgroundColor = blue
this.ol_li[this.cur_index].style.backgroundColor = 'blue';
// 当前大图.第一个元素子节点.第一个元素子节点.alt
this.div.innerText = this.ul_li[this.cur_index].children[0].children[0].alt;
}
//自动轮播
Slider.prototype.autoPlay = function(){
this.timer = setInterval(() => {
this.cur_index ++;
if(this.cur_index === this.num){
this.cur_index = 0;
}
this.slide();
},3000)
//鼠标移入大盒子时，停止自动轮播
this.big_box.onmouseenter = () => {
clearInterval(this.timer);
}
//鼠标移出大盒子时，开始自动 轮播
this.big_box.onmouseleave = () => {
this.autoPlay();
}
}
//创建对象
new Slider();
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
