OOP 指什么饭豹？有哪些特性

• Object-oriented programming的縮寫鸵赖，即面向?qū)ο蟪绦蛟O(shè)計(jì)，其中兩個最重要的概念就是類和對象拄衰。類只是具備了某些功能和屬性的抽象模型它褪，類在實(shí)例化之后得到的實(shí)體就是對象。

• 特性：

  1. 繼承性：子類自動繼承其父級類中的屬性和方法翘悉，并可以添加新的屬性和方法或者對部分屬性和方法進(jìn)行重寫茫打。繼承增加了代碼的可重用性。
  2. 多態(tài)性：子類繼承了來自父級類中的屬性和方法，并對其中部分方法進(jìn)行重寫老赤。
  3. 封裝性：將一個類的使用和實(shí)現(xiàn)分開，只保留部分接口和方法與外部聯(lián)系抬旺。

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

function Person(name,age){
    this.name = name;
    this.age = age;
}

Person.prototype.sayName = function (){
    console.log(this.name);
}


var p1 = new Person();  

new一個對象發(fā)生了什么

1. 創(chuàng)建了一個空對象 作為this
2. this.__proto__指向構(gòu)造函數(shù)的prototype
3. 運(yùn)行構(gòu)造函數(shù)
4. 返回this（若構(gòu)造函數(shù)沒有return）

prototype 是什么弊予？有什么特性

• 我們創(chuàng)建的每個函數(shù)都有一個prototype屬性，這個屬性是一個指針开财，指向一個對象块促，而這個對象的用途是包含所有實(shí)例共享的屬性和方法。
• prototype就是通過調(diào)用構(gòu)造函數(shù)而創(chuàng)建的那個對象實(shí)例的原型對象床未。通常我們可以將實(shí)例對象的公共屬性和方法放在prototype對象中竭翠。好處是節(jié)省空間，當(dāng)有很多對象時薇搁，不用每次有一個對象就去重復(fù)創(chuàng)建一份方法斋扰。

特性：

1. 每個函數(shù)都有一個prototype屬性，指向一個對象啃洋，叫做原型對象
2. 所有對象都有__proto__
3. 對象.__proto__=== 構(gòu)造函數(shù).prototype
4. 訪問一個對象的屬性時传货，如果對象有這個屬性，就獲取到了宏娄，如果沒有這個屬性问裕，則從__proto__里面去找，如果還是沒有找到孵坚，則從原型對象prototype里的proto中去尋找粮宛。

畫出如下代碼的原型圖

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() {
        this.status = "running";
        console.log(this.status);
    }

    Car.prototype.stop = function() {
        this.status = "stop";
        console.log(this.status);
    }

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


    var p1 = new Car("寶馬","black","run");
    p1.run();
    p1.stop();
    p1.getStatus();

創(chuàng)建一個 GoTop 對象，當(dāng) new 一個 GotTop 對象則會在頁面上創(chuàng)建一個回到頂部的元素刺洒，點(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)

代碼

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

效果圖

代碼