面向对象的特点：抽象、继承、封装、多态
工厂模式
function Tab(){
let obj = {}; //加原料
obj.a = 10; //加工原料
obj.fn = function(){ //加工原料
console.log(111);
}
return obj; //出厂
}
let tab1 = Tab();
tab1.a; //10
tab1.fn(); //1111
new运算符
- 自执行函数
- 自动创建一个空对象
- this绑定到空对象
- 隐式返回this
用new运算符改写工厂模式
function Tab(){
this.a = 10;
this.fn = function(){
console.log(111);
}
}
let tab1 = new Tab();
tab1.a; //10
tab1.fn() //111
构造函数
构造函数由函数支撑和原型两部分组成
- 约定俗成首字母大写
- 方法放在原型上
- 原型默认有一个constructor,指向构造函数本身
- 构造函数要通过new来调用，this谁调用指向谁
//定义
function Tab(name){//函数支撑
this.a = name;
}
Tab.prototype.fn = function(){//构造函数原型
console.log(111);
}
//调用new运算符实例化 tab1是实例化后的对象
let tab1 = new Tab("张三"); //this最后指向这个实例化的对象
tab1.name; //张三
tab1.fn(); //111
原型
如果给构造函数原型直接赋值一个对象时：需要手动设置constructor并指向函数支撑
function Tab(){
this.name = "张三"
}
Tab.prototype = function(){
constructor: Tab, //需要手动设置constructor
fn1: function(){
consol.log("fn1函数。。。");
},
fn2: function(){
console.log("fn2函数。。。");
}
}
let tab1 = new Tab();
console.log(tab1.__proto__);
**
prototypes是构造函数的原型，那么我们用new实例化之后的对象它也有原型__proto__
其实实例化之前的prototype和实例化之后的__proto__是同一个东西，只是变现形式不一样
**
new之前，我们的构造函数由两部分组成，一个函数支撑functions，
另一个是原型prototype，原型上有一个constructor属性，它指向构造函数functions
new之后，我们会得到一个object对象，对象也有一个原型为object.__proto__
console.log(tab1.__proto__===Tab.prototype); //true
原型链
原型链是指对象在访问属性或方法时的查找方式。
1.当访问一个对象的属性或方法时，会先在对象自身上查找属性或方法是否存在，
如果存在就使用对象自身的属性或方法。如果不存在就去创建对象的构造函数的原型对象中查找 ，
依此类推，直到找到为止。如果到顶层对象中还找不到，则返回 undefined。
2.原型链最顶层为 Object 构造函数的 prototype 原型对象，
给 Object.prototype 添加属性或方法可以被除
null 和 undefined 之外的所有数据类型对象使用。
用构造函数自己写一个选项卡
css
section button.active{
background-color: red;
}
section div{
display: none;
}
section div.show{
display: block;
}
html
<section class="wrapper1">
<button class="active">按钮一</button>
<button>按钮二</button>
<button>按钮三</button>
<div class="show">内容一</div>
<div>内容二</div>
<div>内容三</div>
</section>
<section class="wrapper2">
<button class="active">按钮一</button>
<button>按钮二</button>
<button>按钮三</button>
<div class="show">内容一</div>
<div>内容二</div>
<div>内容三</div>
</section>
<button class="next">点击切换下一个</button>
<button class="autoPlay">点击自动播放</button>
js
function Tab(btns,divs){
this.btns = btns;//按钮元素
this.divs = divs;//对应的内容
this.number = 0;//记录当前点击按钮的下标
this.clickHandel();
}
Tab.prototype.clickHandel = function(){
let _this = this;
_this.btns.forEach((item,index) => {
item.addEventListener("click",() =>{
_this.number = index;
_this.changeHandel(index)
})
})
}
Tab.prototype.changeHandel = function(key){
let _this = this;
_this.divs.forEach((item,index) => {
if(key === index){
_this.btns[index].classList.add("active");
_this.divs[index].classList.add("show");
}else{
_this.btns[index].classList.remove("active");
_this.divs[index].classList.remove("show");
}
})
}
let btns1 = document.querySelectorAll(".wrapper1 button");
let divs1 = document.querySelectorAll(".wrapper1 div");
let next = document.querySelector(".next");
let tab1 = new Tab(btns1,divs1);
next.addEventListener("click",() =>{
tab1.number++;
tab1.number = tab1.number > btns1.length -1 ? 0: tab1.number
tab1.changeHandel(tab1.number);
})
let btns2 = document.querySelectorAll(".wrapper2 button");
let divs2 = document.querySelectorAll(".wrapper2 div");
let autoPlay = document.querySelector(".autoPlay");
let tab2 = new Tab(btns2,divs2);
autoPlay.addEventListener("click",() => {
setInterval(() => {
tab2.number++;
tab2.number = tab2.number > btns2.length -1 ? 0: tab2.number
tab2.changeHandel(tab2.number);
},1000)
})
每天进步一点点~~~
