Js面向对象整理（一）
【摘要】 本篇记录个人所学Js面向对象整理（一），知识点涉及工厂模式、new运算符、构造函数、原型prototype...
Js面向对象整理（一）
工厂模式
优点&缺陷
工厂模式解决了代码复用的问题，
1.但是却没有解决对象识别的问题。即创建的所有实例都是Object类型。(不清楚是哪个对象的实例)
2.没有原型，占用内存。
更好的方式？
function person(option) {
let obj = {};
obj.name = option.name;
obj.age = option.age;
obj.canDo = function() {
console.log("I can do everything!");
// console.log(this);
}
return obj;
}
let rocky = person({
name: "Rocky",
age: 24
});
console.log(rocky); // {name: "Rocky", age: 24, canDo: ƒ}
rocky.canDo(); // I can do everything!
let sunny = person({
name: 'Sunny',
age: 18
});
console.log(sunny); // {name: "Sunny", age: 18, canDo: ƒ}
sunny.canDo(); // I can do everything!
// P.s：俩个对象各自的方法，即使功能相同，但其所在引用地址不同
console.log(sunny.canDo === sunny.cando); // false
new运算符
new的特点：
new只能函数
自动创建空对象；
this绑定到空对象；
隐式返还this；
通过new来改造工厂模式
构造函数
构造函数要通过new来调用 this指向该空对象
约定俗成构造函数首字母大写
prototype原型
通过new实例化出来的对象其属性和行为来自两个部分，一部分来自构造函数，另一部分来自原型。
当声明一个函数的时候，同时也申明了一个原型 。
原型本身是一个对象。
构造函数性能对比工厂函数
公共空间存放公共方法
function Person(options) {
this.name = options.name;
this.age = options.age;
}
Person.prototype.canDo = function() {
console.log("I can do anything!");
}
let rocky = new Person({
name: "Rocky",
age: 24
});
console.log(rocky);
rocky.canDo();
let sunny = new Person({
name: "Sunny",
age: 18
});
console.log(sunny);
sunny.canDo();
// P.s：构造函数原型上的方法属于公共方法
console.log(rocky.canDo === sunny.canDo); // true
函数prototype & 对象__proto__
案例：选项卡之面向对象
<body>
<div class="tab1">
<button style="background: lightblue;">Btn1</button>
<button>Btn2</button>
<button>Btn3</button>
<p>Inner1</p>
<p style="display: none;">Inner2</p>
<p style="display: none;">Inner3</p>
</div>
<div class="tab2">
<button style="background: lightblue;">Btn1</button>
<button>Btn2</button>
<button>Btn3</button>
<p>Inner1</p>
<p style="display: none;">Inner2</p>
<p style="display: none;">Inner3</p>
</div>
<button class="nextPre">NextPre</button>
<button class="autoPlay">AutoPlay</button>
<script>
function Tab(tabClass) {
this.btns = tabClass.querySelectorAll("button");
this.ps = tabClass.querySelectorAll("p");
this.tabNum = this.btns.length;
this.btnsFor();
}
Tab.prototype.btnsFor = function() {
this.btns.forEach((btn, btnIndex) => {
btn.onclick = () => {
this.psFor(btnIndex);
}
});
}
Tab.prototype.psFor = function(index) {
this.ps.forEach((p, pIndex) => {
if(pIndex === index) {
this.btns[pIndex].style.background = "lightblue";
this.ps[pIndex].style.display = "block";
}else {
this.btns[pIndex].style.background = "";
this.ps[pIndex].style.display = "none";
}
});
}
Tab.prototype.getIndex = function() {
let nowIndex;
this.btns.forEach((btn, btnIndex) => {
if(btn.style.background === "lightblue") {
nowIndex = btnIndex;
}
});
return nowIndex;
}
let tab1 = document.querySelector(".tab1");
let tabObj1 = new Tab(tab1);
let nextPre = document.querySelector(".nextPre");
nextPre.onclick = () => {
let nowIndex = tabObj1.getIndex();
nowIndex++;
nowIndex = nowIndex >= tabObj1.tabNum ? 0 : nowIndex;
tabObj1.psFor(nowIndex);
}
let tab2 = document.querySelector(".tab2");
let tabObj2 = new Tab(tab2);
let autoPlay = document.querySelector(".autoPlay");
autoPlay.onclick = () => {
let nowIndex = tabObj2.getIndex();
setInterval(() => {
nowIndex++;
nowIndex = nowIndex >= tabObj2.tabNum ? 0 : nowIndex;
tabObj2.psFor(nowIndex);
}, 1000);
}
</script>
</body>
演示：
END
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）