面向对象编程
面向历程
- javascript是一门面向历程的言语，也就是侧重点是完成一件事的步骤。
- 特性：有优越的可扩展性和重用性，降低了代码间的耦合度，靠近一样平常头脑。
面向对象
- 以事物为中间，侧重于完成某件事所须要的事物的特性和行动的设想。
- 特性：封装、继续、多态，耦合度低，复费用好。
置信这些概念性的东西，网上真的是一搜一大堆，在我运用我的要领明白和上手面向对象之前，允许我把概念性的东西写完，毕竟基本迥殊主要啊。置信我，假如你正在浏览，请忍受一两分钟
相干名词
- prototype : 猎取组织函数的原型对象
- constructor ： 猎取原型对象的组织函数
- –proto– : 猎取实例对象的组织函数的原型对象
- 原型链 ： 组织函数自身会有原型对象，经由过程prototype检察，组织函数的实例对象自身也会有原型对象，经由过程–proto–检察，–proto–是object范例，当接见一个实例化的属性时，浏览器会先查找自身内部属性，没有就找–proto–，直到–proto–范例为null。
- New关键字作用：建立一个空对象，让空对象挪用组织函数给自身赋值，将该对象返回
继续
完成B继续A
- 体式格局一：在B的组织函数内部写A.call(this);瑕玷：参数设置不天真
- 体式格局二：(运用原型链完成继续)step1：转变自身原型对象B.prototype=new A();step2:修复原型对象指向的组织函数B.prototype.constructor=B
好啦，概念性的东西就写到这，下面最先我的代码之旅，如今已晚上11：30整，我好打盹儿啊，太困了，把这个写完我就去睡觉了Zzzz
基本设置
国际惯例，先把代码的基本设置好
div,
p {
width: 100px;
height: 30px;
border: 1px solid #ddd;
margin: 30px auto;
}
div.open,p.open{
background: pink;
}
<body>
<div></div>
<div></div>
<p></p>
<p></p>
</body>1.基本版
/*NO.1
* 基本要领
* 瑕玷：代码冗余，反复猎取元素反复轮回操纵
* 功用：修正背景色
*/
var divs1 = document.getElementsByTagName("div");
var ps1 = document.getElementsByTagName("p");
for (var i = 0; i < divs1.length; i++) {
divs1[i].style.backgroundColor = "pink";
}
for (var i = 0; i < ps1.length; i++) {
ps1[i].style.backgroundColor = "pink";
}2.进阶版（一）
/*NO.2
* 进阶要领
* 瑕玷：太范围，只能设置款式
* 功用：修正背景色
*/
function getDOM(tagName){
return document.getElementsByTagName(tagName);
}
function setStyle(arr,styleName,styleVal){
for (var i = 0; i < arr.length; i++) {
arr[i].style[styleName] = styleVal;
}
}
var divs2 = getDOM("div");
var ps2 = getDOM("p");
setStyle(divs2,"backgroundColor","#00a09d");
setStyle(ps2,"backgroundColor","#00a09d");3.进阶版（二）
/*NO.3
* 进阶要领
* 瑕玷：代码不利于浏览，没有结构化
* 功用：修正宽度，添补笔墨，遍历封装
*/
function getDOM(tagName){
return document.getElementsByTagName(tagName);
}
function each(arr,callback){
for (var i = 0; i < arr.length; i++) {
callback(arr[i])
}
}
var divs2 = getDOM("div");
var ps2 = getDOM("p");
each(divs2,function(tag){
tag.style.width = "200px";
tag.innerText = "I have a pen!!!";
})4.进阶版（三）
/*NO.4
* 进阶要领，传统面向对象写法(自力作用域)
* 功用：增加款式，遍历封装
*/
function Tool(bgColor){
this.bgColor = bgColor||"#00a09d";
this.getDom = function(tagName){
return document.getElementsByTagName(tagName);
};
this.each = function(arr,callback){
for (var i = 0; i < arr.length; i++) {
arr[i].style.backgroundColor = this.bgColor;
callback(arr[i]);
}
};
}
//实例化(运用)
var tool = new Tool();
var ps3 = tool.getDom("p");
var divs3 = tool.getDom("div");
tool.each(divs3,function(tag){
tag.style.width = "200px";
tag.innerText = "I have a pen!!!";
})5.终极版
/*NO.5
* 进阶要领，ES6面向对象写法(自力作用域,类自身指向组织函数)
* 功用：将传入的对象变成赤色，添补笔墨，增加点击结果(歪楼了，需求改成这怂模样了)
* 申明：实例化以后马上完成以上功用
* 功用：修正背景，添补笔墨，绑定事宜......
*/
class Tool{
//组织函数(options为实例化传入的参数)
//作用：设置默许参数，兼并默许参数和传入的参数，完成继续
constructor(options){
let dafultOpations = {
element:"",
bgColor:"red",
color:"#fff"
}
this.options = Object.assign({},dafultOpations,options); //兼并对象 assign(相同项会掩盖) merge(相同项会兼并)
this.checkOptions().setStyle().setText().bindClick() //实例化后马上实行这些要领，每一个要领在挪用完成后一定要开释this
}
//因为该类的完成依赖于传入的DOM，此要领用来确保已传入DOM，若实例化没有传入，则抛出非常
checkOptions(){
if(!this.options.element){
throw new Error("Element is required!!!")
}
return this;
}
setStyle(){
for (var i = 0; i < this.options.element.length; i++) {
this.options.element[i].style.backgroundColor = this.options.bgColor;
this.options.element[i].style.textAlign = "center";
this.options.element[i].style.color = this.options.color;
}
return this;
}
setText(){
for (var i = 0; i < this.options.element.length; i++) {
this.options.element[i].innerText = "呆呆Akuma";
}
return this;
}
bindClick(){
for (var i = 0; i < this.options.element.length; i++) {
let __this = this.options.element[i]; //需将当前的元素区离开 __this!=this
let flag = false;
__this.addEventListener("click",()=>{
if(flag = !flag){
__this.style.backgroundColor = "pink"
}else{
__this.style.backgroundColor = this.options.bgColor;
}
})
}
return this;
}
}
var divs = new Tool({
element:document.getElementsByTagName("div"),
bgColor:"#00a09d"
});
var ps = new Tool({
element:document.getElementsByTagName("p"),
bgColor:"#f48"
});现在看起来，这个终极版好像是最烦琐的，起首我要申明，这里只是引见面向对象编程是怎么回事，关于漫天飞的this真的神烦，不过量写写就好了，习气就好，要学会掌握它，假如你胜利看完这篇文章，你就会发明，跟着版本（临时就算版本吧）晋级，功用也逐步增加，天真性更好，代码的可扩展性更高啦，至于质疑一个简朴的功用至于写这么庞杂吗？
很好，我以为面向对象编程就是造轮子的历程，轮子就相当于东西。打个比如，伐树你会挑选电锯照样斧头，劈柴你会挑选电锯照样斧头，置信答案就在你内心，好了不写了，真困了，快睡着了。
