OOP 指什么？有哪些特性
面向?qū)ο缶幊蹋∣bject Oriented Programming)
面向?qū)ο缶幊痰哪康氖牵?br>
1.改善可讀性
2.提升復(fù)用性
原則：開放封閉原則
1.對于擴(kuò)展是開放的(Open for extension)。當(dāng)應(yīng)用的需求改變時，我們可以對模塊進(jìn)行擴(kuò)展，使其具有滿足那些改變的新行為。
2.對于修改是關(guān)閉的(Closed for modification)。對模塊進(jìn)行擴(kuò)展時，不必改動模塊的源代碼或二進(jìn)制代碼。
特性：
1.封裝: 將客觀的事物封裝成抽象的類，類一般被指派代表一類具有共同屬性的事物，也可能具有相應(yīng)的一些功能，而這些功能的具體實現(xiàn)是不被暴露出來的，用戶只能接觸到一些”接口“，這些接口告知用戶可以使用什么樣的功能，卻無法探知里面的內(nèi)容。類似一個黑盒操作模型。封裝后的類可以具有更靈活的組合使用方式以及高復(fù)用性，提高了開發(fā)的效率。
2.繼承: 繼承可以讓某個類型的對象獲得另一個類型的屬性與方法，而不需要再次手動編寫屬于自己的同樣的屬性/方法。使用現(xiàn)有的類，我們可以對這些方法進(jìn)行拓展。通過繼承創(chuàng)建新的類稱為子類或派生類，被繼承的類稱為基類，（父類，超類），繼承的過程，是從一般到特殊的過程。實現(xiàn)繼承我們可以通過繼承和組合實現(xiàn)，繼承概念的實現(xiàn)方式有兩類，實現(xiàn)繼承和接口繼承，實現(xiàn)繼承是直接使用父類的屬性和方法，而無需額外的編碼能力，接口繼承僅僅繼承了屬性和方法的名稱，但子類需要去對其提供實現(xiàn)的能力。
3.多態(tài): 對于同一個類，在不同的狀態(tài)下，可能會做出不同的反應(yīng)，也就是說在內(nèi)部結(jié)構(gòu)里進(jìn)行的操作不同，但是都通過相同的方式予以調(diào)用。
如何通過構(gòu)造函數(shù)的方式創(chuàng)建一個擁有屬性和方法的對象?
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 是什么？有什么特性
每個函數(shù)都有一個prototype屬性，這個屬性是指向一個對象的引用，這個對象稱為原型對象，原型對象包含函數(shù)實例共享的方法和屬性，將函數(shù)用作構(gòu)造函數(shù)調(diào)用（使用new操作符調(diào)用）的時候，新創(chuàng)建的對象會從原型對象上繼承屬性和方法。
畫出如下代碼的原型圖
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)建一個 Car 對象，擁有屬性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)建一個 GoTop 對象，當(dāng) new 一個 GotTop 對象則會在頁面上創(chuàng)建一個回到頂部的元素，點擊頁面滾動到頂部。擁有以下屬性和方法
-
ct屬性，GoTop 對應(yīng)的 DOM 元素的容器 -
target屬性， GoTop 對應(yīng)的 DOM 元素 -
bindEvent方法， 用于綁定事件 -
createNode方法， 用于在容器內(nèi)創(chuàng)建節(jié)點
<!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>
