OOP 指什么？有哪些特性
面向?qū)ο缶幊蹋∣bject Oriented Programming)
面向?qū)ο缶幊痰哪康氖牵?br>
1.改善可讀性
2.提升復(fù)用性
原則：開(kāi)放封閉原則
1.對(duì)于擴(kuò)展是開(kāi)放的(Open for extension)。當(dāng)應(yīng)用的需求改變時(shí)，我們可以對(duì)模塊進(jìn)行擴(kuò)展，使其具有滿足那些改變的新行為。
2.對(duì)于修改是關(guān)閉的(Closed for modification)。對(duì)模塊進(jìn)行擴(kuò)展時(shí)，不必改動(dòng)模塊的源代碼或二進(jìn)制代碼。
特性：
1.封裝: 將客觀的事物封裝成抽象的類，類一般被指派代表一類具有共同屬性的事物，也可能具有相應(yīng)的一些功能，而這些功能的具體實(shí)現(xiàn)是不被暴露出來(lái)的，用戶只能接觸到一些”接口“，這些接口告知用戶可以使用什么樣的功能，卻無(wú)法探知里面的內(nèi)容。類似一個(gè)黑盒操作模型。封裝后的類可以具有更靈活的組合使用方式以及高復(fù)用性，提高了開(kāi)發(fā)的效率。
2.繼承: 繼承可以讓某個(gè)類型的對(duì)象獲得另一個(gè)類型的屬性與方法，而不需要再次手動(dòng)編寫(xiě)屬于自己的同樣的屬性/方法。使用現(xiàn)有的類，我們可以對(duì)這些方法進(jìn)行拓展。通過(guò)繼承創(chuàng)建新的類稱為子類或派生類，被繼承的類稱為基類，（父類，超類），繼承的過(guò)程，是從一般到特殊的過(guò)程。實(shí)現(xiàn)繼承我們可以通過(guò)繼承和組合實(shí)現(xiàn)，繼承概念的實(shí)現(xiàn)方式有兩類，實(shí)現(xiàn)繼承和接口繼承，實(shí)現(xiàn)繼承是直接使用父類的屬性和方法，而無(wú)需額外的編碼能力，接口繼承僅僅繼承了屬性和方法的名稱，但子類需要去對(duì)其提供實(shí)現(xiàn)的能力。
3.多態(tài): 對(duì)于同一個(gè)類，在不同的狀態(tài)下，可能會(huì)做出不同的反應(yīng)，也就是說(shuō)在內(nèi)部結(jié)構(gòu)里進(jìn)行的操作不同，但是都通過(guò)相同的方式予以調(diào)用。
如何通過(guò)構(gòu)造函數(shù)的方式創(chuàng)建一個(gè)擁有屬性和方法的對(duì)象?
function People(name,age){
this.name = name
this.age = age
People.prototype.say = function(){
console.log('i am '+this.name)
}
}
var people = new People('jirengu',20) //People{name:'jirengu',age:20}
people.say() //i am jirengu
prototype 是什么？有什么特性
每個(gè)函數(shù)都有一個(gè)prototype屬性，這個(gè)屬性是指向一個(gè)對(duì)象的引用，這個(gè)對(duì)象稱為原型對(duì)象，原型對(duì)象包含函數(shù)實(shí)例共享的方法和屬性，將函數(shù)用作構(gòu)造函數(shù)調(diào)用（使用new操作符調(diào)用）的時(shí)候，新創(chuàng)建的對(duì)象會(huì)從原型對(duì)象上繼承屬性和方法。
畫(huà)出如下代碼的原型圖
function People (name){
this.name = name;
this.sayName = function(){
console.log('my name is:' + this.name);
}
}
People.prototype.walk = function(){
console.log(this.name + ' is walking');
}
var p1 = new People('饑人谷');
var p2 = new People('前端');
創(chuàng)建一個(gè) Car 對(duì)象，擁有屬性name、color、status；擁有方法run，stop，getStatus
function Car(name,color,status){
this.name = name;
this.color = color;
this.status = status
Car.prototype.run = function(){
console.log(name+' can run')
}
Car.prototype.stop = function(){
console.log(name+' can stop')
}
Car.prototype.getStatus = function(){
console.log(this.status)
}
}
var car = new Car('Audi','white','ok') //Car {name: "Audi", color: "white", status: "ok"}
car.run() //Audi can run
car.stop() //Audi can stop
car.getStatus() //OK
創(chuàng)建一個(gè) GoTop 對(duì)象，當(dāng) new 一個(gè) GotTop 對(duì)象則會(huì)在頁(yè)面上創(chuàng)建一個(gè)回到頂部的元素，點(diǎn)擊頁(yè)面滾動(dòng)到頂部。擁有以下屬性和方法
-
ct屬性，GoTop 對(duì)應(yīng)的 DOM 元素的容器 -
target屬性， GoTop 對(duì)應(yīng)的 DOM 元素 -
bindEvent方法， 用于綁定事件 -
createNode方法， 用于在容器內(nèi)創(chuàng)建節(jié)點(diǎn)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html {
height: 5000px;
}
</style>
</head>
<body>
<script>
function GoTop(selector){
var btn = document.createElement('button');
btn.style.cssText='background-color:black;width:50px;height:50px;position:fixed;right:50px;bottom:50px;outline:none;border:none;cursor:pointer;color:white;';
btn.innerText = '回到頂部';
btn.addEventListener('click',function(){
window.scrollTo(0,0)
})
document.querySelector(selector).appendChild(btn);
this.ct = document.querySelector(selector);
this.target = btn;
this.bindEvent = function(event,Fn){
btn.addEventListener(event,Fn);
}
this.createNode = function(nodeName){
var node = document.querySelector(selector).appendChild(document.createElement(nodeName));
return node
}
}
var goTop = new GoTop('body');
</script>
</body>
</html>
