OOP 指什么？有哪些特性

OOP是指面向?qū)ο缶幊?英語：Object-oriented programming：OOP),面向?qū)ο缶幊淌怯贸橄蠓绞絼?chuàng)建基于現(xiàn)實(shí)世界模型的一種編程模式，面向?qū)ο缶幊炭梢钥醋魇鞘褂靡幌盗袑ο笙嗷f(xié)作的軟件設(shè)計(jì)。 在 OOP 中，每個(gè)對象能夠接收消息，處理數(shù)據(jù)和發(fā)送消息給其他對象。每個(gè)對象都可以被看作是一個(gè)擁有清晰角色或責(zé)任的獨(dú)立小機(jī)器。

特性：

封裝性：
??封裝性就是利用抽象數(shù)據(jù)類型將數(shù)據(jù)和基于數(shù)據(jù)的操作封裝在一起，保護(hù)數(shù)據(jù)并隱蔽具體的細(xì)節(jié)，只保留有限的接口與外界聯(lián)系。
多態(tài)性：
??多態(tài)性就是程序中同名的多個(gè)不同方法共存的情況，通常使用方法的重載和重寫（也叫覆蓋）來實(shí)現(xiàn)類的多態(tài)性
繼承性：
??繼承就是子類的對象擁有父類的全部屬性和行為，同時(shí)可以增添自己的所特有的屬性和行為。這樣可以節(jié)省寫共同具有的屬性和方法代碼的時(shí)間，有利于代碼的復(fù)用。

Paste_Image.png

?????????????? 摘自知乎的圖

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

如下代碼：

  function Person(name,sex){
          this.name=name;
          this.sex=sex;
        Person.prototype.study=function (){
            console.log("read the book");
        }
    }

    var student1=new  Person("小明","male");
     student1.study();

prototype 是什么？有什么特性

prototype是對象的原型屬性，在Javascript中幾乎所有對象都繼承了prototype屬性和方法。無論什么時(shí)候，只要?jiǎng)?chuàng)建了一個(gè)新函數(shù)，就會根據(jù)一組特定的規(guī)則為該函數(shù)創(chuàng)建一個(gè)prototype屬性，默認(rèn)情況下prototype屬性會默認(rèn)獲得一個(gè)constructor(構(gòu)造函數(shù))屬性，這個(gè)屬性是一個(gè)指向prototype屬性所在函數(shù)的指針，通過構(gòu)造函數(shù)new出來的對象都有prototype屬性，都指向同一個(gè)prototype屬性，利用這個(gè)特性，可以把對象的公共方法寫在原型對象中，這樣，所有new 出來的對象都可以繼承公共方法。

Paste_Image.png

畫出如下代碼的原型圖

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

原型圖：

Paste_Image.png

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

1.
  var Car={
        name:"Toyota",
        color:"black",
        status:"stop",
        run:function(){
            console.log("running");
        },
        stop:function(){
            console.log("stop")
        },
        getStatus:function(){
            console.log(this.status)
        }
    }
2. 通過構(gòu)造函數(shù)方法
 function Car(name,color,status){
        this.name=name;
        this.color=color;
        this.status=status;
    }
    Car.prototype.run=function(){
        console.log("running");
    };
    Car.prototype.stop=function(){
        console.log("stop");
    };
    Car.prototype.getStatus=function(){
        console.log(this.status);
    };
    var Toyota=new Car("Toyota","black","stop");

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

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

代碼
效果預(yù)覽

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

代碼
預(yù)覽