OOP 指什么？有哪些特性
Object-oriented programming 面向對象編程；
OOP 是一種編程模式，這種模式將數(shù)據(jù)封裝成對象，采用操作對象的形式來編程；
JS 是一種非常注重 OOP 的語言，它遵循 prototype 的方式，而不是傳統(tǒng) C 系語言的 class 模型-
特性
- 類與對象：類的定義包含了數(shù)據(jù)的形式以及對數(shù)據(jù)的操作。對象是類的實例。
- 封裝性：封裝是通過限制只有特定類的對象可以訪問這一特定類的成員，而它們通常利用接口實現(xiàn)消息的傳入傳出
- 繼承性：，在某種情況下，一個類會有“子類”。子類比原本的類（稱為父類）要更加具體化，當一個類從多個父類繼承時，我們稱之為“多重繼承”
- 多態(tài)：多態(tài)（Polymorphism）是指由繼承而產(chǎn)生的相關的不同的類，其對象對同一消息會做出不同的響應
- 抽象性：抽象（Abstraction）是簡化復雜的現(xiàn)實問題的途徑，它可以為具體問題找到最恰當?shù)念惗x，并且可以在最恰當?shù)睦^承級別解釋問題
如何通過構造函數(shù)的方式創(chuàng)建一個擁有屬性和方法的對象?
function Person(name, age) {
this.name = name
this.age = age
this.say = function(){
console.log('Hello ' + this.name);
}
}
var s = new Person('tom', '20')
s.say();
prototype 是什么？有什么特性
prototype（原型），每一個 JS 對象都有原型，原型是一個對象，所有的 JS 對象都從原型鏈里面繼承屬性和方法
- 字面量創(chuàng)建對象的原型鏈
var a = {
a: 1
}
// 原型鏈 a ---> Object.prototype ---> null
var b = ['hello', 'world']
// 原型鏈 b ---> Array.prototype ---> Object.prototype ---> null
function fn() {
return 2
}
// 原型鏈 fn ---> Function.prototype ---> Object.prototype ---> null
- 構造函數(shù)（constructor）創(chuàng)建對象的原型鏈
var Test = function() {
this.name = 'Tuuu'
}
Test.prototype = {
call: function(){
console.log(this.name)
}
}
var init = new Test()
init
// 原型鏈第一層指向'構造函數(shù).prototype'
// 原型鏈 init ---> Test.prototype(構造函數(shù).prototype) ---> Object.prototype ---> null
-
Object.createES5 的語法，可以快速創(chuàng)建原型鏈
var a = {
a: 1
}
// 原型鏈 a ---> Object.prototype ---> null
var b = Object.create(a);
// 原型鏈 b ---> a ---> Object.prototype ---> null
var c = Object.create(b);
// 原型鏈 c ---> b ---> a ---> Object.prototype ---> null
var d = Object.create(null);
// 原型鏈 d ---> null
畫出如下代碼的原型圖
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('前端');
p1 ---> People.prototype ---> Object.prototype ---> null
p1 ---> People.prototype ---> Object.prototype ---> null
創(chuàng)建一個 Car 對象，擁有屬性name、color、status；擁有方法run，stop，getStatus
var Car = function(name, color, status){
this.name = name
this.color = color
this.status = status
}
Car.prototype = {
run: function(){
console.log('Run')
},
stop: function(){
console.log('Stop')
},
getStatus: function(){
console.log(this.status)
}
}
創(chuàng)建一個 GoTop 對象，當 new 一個 GotTop 對象則會在頁面上創(chuàng)建一個回到頂部的元素，點擊頁面滾動到頂部。擁有以下屬性和方法
```
1\. `ct`屬性，GoTop 對應的 DOM 元素的容器
2\. `target`屬性， GoTop 對應的 DOM 元素
3\. `bindEvent` 方法， 用于綁定事件
4 `createNode` 方法， 用于在容器內(nèi)創(chuàng)建節(jié)點
```
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<title>面向對象編程</title>
<style>
.container {
height: 1500px;
}
.goTop {
font-size: 20px;
position: fixed;
right: 30px;
bottom: 20px;
cursor: pointer;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="container">
頂部
<div class="goTop hide"></div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
var GoTop = function(ct, target){
this.ct = ct;
this.target = target;
this.bindEvent();
this.createNode();
}
GoTop.prototype = {
bindEvent: function(){
var that = this;
// 滾動事件
$(window).scroll(function(){
if ($(window).scrollTop() > window.innerHeight) {
that.target.removeClass('hide');
} else {
that.target.addClass('hide');
}
})
//點擊事件
that.target.on('click', function(){
$(window).scrollTop(0);
console.log(1)
})
},
// 創(chuàng)建節(jié)點
createNode: function(){
this.target.html('<span>回到頂部</span>');
}
}
var gotop1 = new GoTop($('.container'), $('.goTop'));
</script>
</body>
</html>
