OOP 指什么？有哪些特性

OOP(objectoriented programming)：即面向?qū)ο缶幊?，其中兩個最重要的概念就是類和對象。

特性：

• 繼承性：子類自動繼承其父級類中的屬性和方法，并可以添加新的屬性和方法或者對部分屬性和方法進行重寫，繼承增加了代碼的復(fù)用性，讓類與類之間產(chǎn)生了聯(lián)系，提供了多態(tài)的前提
• 多態(tài)性：子類繼承了來自父級類中的屬性和方法，并對其中部分方法進行重寫。（比如函數(shù)的length和數(shù)組的length都繼承自對象但作用不同），提高了代碼的擴展性和可維護性
• 封裝性：將一個類的使用和實現(xiàn)分開，隱藏對象的屬性和實現(xiàn)細節(jié)，僅對外提供公共訪問方式，提高代碼復(fù)用性和安全性。

如何通過構(gòu)造函數(shù)的方式創(chuàng)建一個擁有屬性和方法的對象？

var Animal = function(){
  this.name = '動物'
}//構(gòu)造函數(shù)

Animal.prototype.say = function(){
  console.log(this.name+'叫')
}

var animal = new Animal()//實例化 得到一個對象
animal.say()

prototype 是什么？有什么特性

• 當(dāng)創(chuàng)建一個函數(shù)時，就會為這個函數(shù)創(chuàng)建一個 prototype 屬性，這個屬性指向函數(shù)的原型對象，默認情況下，所有原型對象都會自動獲得一個 constructor 屬性，這個屬性是一個指向 prototype 屬性所在函數(shù)的指針。
• prototype就是通過調(diào)用構(gòu)造函數(shù)而創(chuàng)建的那個對象實例的原型對象。通常我們可以將實例對象的公共屬性和方法放在prototype對象中。好處是節(jié)省空間，當(dāng)有很多對象時，不用每次有一個對象就去重復(fù)創(chuàng)建一份方法。
  特性：
• 每個函數(shù)都有一個prototype屬性，指向一個對象，叫做原型對象
• 所有對象都有__proto__
• 實例化對象的__proto__指向構(gòu)造函數(shù)的prototype

畫出如下代碼的原型圖

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('前端');

image.png

創(chuàng)建一個 Car 對象，擁有屬性name、color、status；擁有方法run，stop，getStatus

function Car(name,color,status){
  this.name = name;
  this.color = color;
  this.status = status;

  this.run = function(){
    if(this.status === 1){
      console.log('I am running')
    }
  }

  this.stop = function(){
    if(this.status === 0){
      console.log('I am stopped')
    }

  }

  this.getStatus = function () {
    console.log(this.status)
  }
}

var myCar = new Car("benzi","black","1")
myCar.getStatus()

創(chuàng)建一個 GoTop 對象，當(dāng) new 一個 GotTop 對象則會在頁面上創(chuàng)建一個回到頂部的元素，點擊頁面滾動到頂部。擁有以下屬性和方法

1. `ct`屬性，GoTop 對應(yīng)的 DOM 元素的容器
2.  `target`屬性， GoTop 對應(yīng)的 DOM 元素
3.  `bindEvent` 方法， 用于綁定事件
4 `createNode` 方法， 用于在容器內(nèi)創(chuàng)建節(jié)點

demo

使用木桶布局實現(xiàn)一個圖片墻

預(yù)覽
代碼地址