面向?qū)ο驩OP是一種組織代碼結(jié)構(gòu)、實現(xiàn)功能過程的思維方式。它將真實世界各種復雜的關(guān)系，抽象為一個個對象，然后由對象之間的分工與合作，完成對真實世界的模擬。每一個對象都是功能中心，具有明確分工，可以完成接受信息、處理數(shù)據(jù)、發(fā)出信息等任務(wù)。

一本書、一輛汽車、一個人都可以是對象，一個數(shù)據(jù)庫、一張網(wǎng)頁、一個與遠程服務(wù)器的連接也可以是對象。當實物被抽象成對象，實物之間的關(guān)系就變成了對象之間的關(guān)系，從而就可以模擬現(xiàn)實情況，針對對象進行編程。對象是單個實物的抽象，對象還是一個容器，封裝了屬性（property）和方法（method）。屬性是對象的狀態(tài)，方法是對象的行為（完成某種任務(wù)）。比如，我們可以把動物抽象為animal對象，使用“屬性”記錄具體是那一種動物，使用“方法”表示動物的某種行為（奔跑、捕獵、休息等等）。

把某個功能看成一個整體（對象），通過調(diào)用對象的某個方法來啟動功能。在用的時候不去考慮這個對象內(nèi)部的實現(xiàn)細節(jié)，在去實現(xiàn)這個對象細節(jié)的時候不用管誰在調(diào)用。面向?qū)ο蟮姆椒ㄔ谇岸隧撁嬷幸话阌脕韺⒅貜偷臇|西抽象化，便于復用和節(jié)省內(nèi)存。

封裝：就是將類內(nèi)部的機制隱藏起來，讓外界無法訪問，從而達到保護數(shù)據(jù)的目的。封閉一部分讓外界無法訪問，開放一部分，通過開放部分間接訪問私有部分?？梢杂瞄]包來實現(xiàn)JS面向?qū)ο笾接袑傩苑庋b。
繼承：為了提高代碼的復用性，可以用繼承，將一個子類繼承一個父類，這樣子類就可以繼承父類的屬性和方法，而不需要重新寫一個類中的屬性和方法。JavaScript的繼承方式是通過原型鏈來完成的。
多態(tài)：多個子類中雖然都具有同一個方法，但是這些子類實例化的對象調(diào)用這些相同的方法后卻可以獲得不同的結(jié)果。

用傳統(tǒng)的面向?qū)ο笏季S，構(gòu)造實例的過程近似理解為：JS中object(對象)是某一個class(類)的實例，class可以理解成模具，object就是用模具制造出來的實物。
但JS中沒有類的概念，只有構(gòu)造函數(shù)(函數(shù))、屬性的概念。很多語言中是由類（class）構(gòu)造出實例對象，但JS中的對象不基于類而構(gòu)建，而是基于構(gòu)造函數(shù)和原型鏈來構(gòu)建的。比如：var ccc={name:"penny"}這種寫法是可行的，JS中本質(zhì)上是通過new Object()這個構(gòu)造函數(shù)來創(chuàng)建。對象是單個實物的抽象。通常需要一個模板，表示某一類實物的共同特征，然后對象根據(jù)這個模板生成。JavaScript 語言使用構(gòu)造函數(shù)（constructor）作為對象的模板。所謂”構(gòu)造函數(shù)”，就是專門用來生成對象的函數(shù)。它提供模板，描述對象的基本結(jié)構(gòu)。一個構(gòu)造函數(shù)，可以生成多個對象，這些對象都有相同的結(jié)構(gòu)。
通過類構(gòu)建好比是上帝造人類，先定義好人的各屬性當作模板，再創(chuàng)建人類
不依賴類構(gòu)建(函數(shù)式編程)好比是人進化成人類，在進化過程中不斷給人添加各種屬性形成人類。

構(gòu)造函數(shù)的兩個特征：
[1]函數(shù)內(nèi)部使用了this，指向所要生成的對象實例。
[2]必須用new命令調(diào)用生成對象實例

new運算符接受一個函數(shù)及其參數(shù)作為構(gòu)造器，根據(jù)傳入?yún)?shù)來創(chuàng)建相同類型但值不同的實例對象。new命令的作用，就是執(zhí)行構(gòu)造函數(shù)，返回一個實例對象。
new Function()的三個步驟：
1.創(chuàng)建類的實例。將一個空對象的__proto__指向構(gòu)造函數(shù)的prototype屬性，這個對象就是要返回的實例對象。
2.初始化實例。將參數(shù)傳入構(gòu)造函數(shù)并執(zhí)行構(gòu)造函數(shù)，因為構(gòu)造函數(shù)內(nèi)部的this指向的是由構(gòu)造函數(shù)生成的實例。針對this的操作都會發(fā)生在這個空對象上，所以通過this，實例可繼承構(gòu)造函數(shù)的屬性和方法。
3.返回實例。
構(gòu)造函數(shù)之所以叫“構(gòu)造函數(shù)”，就是因為構(gòu)造函數(shù)操作一個空對象（即this指向的實例對象），將其“構(gòu)造”為需要的樣子。

普通函數(shù)用new調(diào)用時，因為普通函數(shù)內(nèi)部沒有this，所以使用new命令執(zhí)行后返回的是一個空對象。new運算符接受一個函數(shù)及其參數(shù)作為構(gòu)造器，根據(jù)傳入?yún)?shù)來創(chuàng)建相同類型但值不同的實例對象。new命令的作用，就是執(zhí)行構(gòu)造函數(shù)，返回一個實例對象。
new Function()的三個步驟：
1.創(chuàng)建類的實例。將一個空對象的__proto__指向構(gòu)造函數(shù)的prototype屬性，這個對象就是要返回的實例對象。
2.初始化實例。將參數(shù)傳入構(gòu)造函數(shù)并執(zhí)行構(gòu)造函數(shù)，因為構(gòu)造函數(shù)內(nèi)部的this指向的是由構(gòu)造函數(shù)生成的實例。針對this的操作都會發(fā)生在這個空對象上，所以通過this，實例可繼承構(gòu)造函數(shù)的屬性和方法。
3.返回實例。
構(gòu)造函數(shù)之所以叫“構(gòu)造函數(shù)”，就是因為構(gòu)造函數(shù)操作一個空對象（即this指向的實例對象），將其“構(gòu)造”為需要的樣子。普通函數(shù)用new調(diào)用時，因為普通函數(shù)內(nèi)部沒有this，所以使用new命令執(zhí)行后返回的是一個空對象。

this總是返回一個對象，簡單說，就是返回屬性或方法“當前”所在的對象。隨著函數(shù)使用場景的不同，this的值會發(fā)生變化可近似理解成this指向的是函數(shù)當前的運行環(huán)境。但是有一個總的原則，this指向的是，調(diào)用函數(shù)的那個對象。

函數(shù)調(diào)用時的this
函數(shù)直接調(diào)用時是在全局作用域下調(diào)用的，瀏覽器中的全局作用域是window，this指向window

function fn1(){
    console.log(this); //指向window
}
fn1();

嵌套函數(shù)調(diào)用時的this
函數(shù)嵌套產(chǎn)生的內(nèi)部函數(shù)的this不指向其父函數(shù)，仍然是指向全局變量。

function fn0(){
    function fn(){
        console.log(this); //這里的this在調(diào)用fn0時依然指向全局window
    }
    fn();
}
fn0();

setTimeout、setInterval中的this
延時函數(shù)執(zhí)行時是在全局作用域下執(zhí)行，所以this依然指向window

構(gòu)造函數(shù)調(diào)用時內(nèi)部的this
調(diào)用構(gòu)造函數(shù)時，構(gòu)造函數(shù)內(nèi)的this指向的是構(gòu)造函數(shù)創(chuàng)建的實例對象。

對象的方法中的this
函數(shù)可以作為一個對象的屬性，此時該函數(shù)被稱為該對象的方法。當函數(shù)作為一個對象的方法調(diào)用時，這個函數(shù)內(nèi)部的this指向調(diào)用該函數(shù)的對象。

var obj1 = {
    name: "Byron",
    fn : function(){
        console.log(this);
    }
};
obj1.fn(); //調(diào)用后this指向obj1

嵌套對象調(diào)用時this指向最近那一層的對象，嵌套函數(shù)調(diào)用時this指向window而不指向最近那層函數(shù)

var a = {
  p: "Hello",
  b: {
    m: function() {
      console.log(this.p);
    }
  }
};
a.b.m() // undefined

DOM對象事件綁定，事件處理函數(shù)的this
在事件處理程序中this代表事件源DOM對象。低版本IE的bug會指向window

document.addEventListener("click", function(e){
    console.log(this); //指向DOM對象
    var _document = this;
    setTimeout(function(){
        console.log(this); //指向window
        console.log(_document);
    }, 200);
}, false);

“原型鏈”的作用是，讀取對象的某個屬性時，JavaScript 引擎先尋找對象本身的屬性（同名屬性會優(yōu)先讀取自身屬性），如果找不到，就通過__proto__到它的原型去找，如果還是找不到，就通過原型的__proto__到原型的原型去找。如果直到最頂層的Object.prototype還是找不到，則返回null。
__proto__屬性是瀏覽器的內(nèi)部屬性，應(yīng)盡量避免使用，建議使用
Object.getPrototype(obj)來獲取對象的原型對象
Object.setPrototypeOf(obj1,obj2)修改對象的原型對象。
獲取一個對象的原型對象有三種方法：
obj.__proto__ 不靠普，ES6規(guī)范僅瀏覽器部署，其他環(huán)境沒有部署
obj.constructor.prototype 不靠普，obj.constructor.prototype手動改變后如果不修正constructor會導致obj.constructor.prototype指向不準確
Object.getPrototypeOf(obj) 推薦使用

原型鏈的特性
【1】任何對象上都有__proto__這個屬性，指向創(chuàng)建該對象的構(gòu)造函數(shù)的prototype屬性（原型對象）。
【2】用面向?qū)ο箝_發(fā)時，把要生成的實例對象的特有屬性放到構(gòu)造函數(shù)內(nèi)，把共有的方法放到構(gòu)造函數(shù)的prototype里面。只要修改構(gòu)造函數(shù)的原型對象prototype，所有構(gòu)造函數(shù)生成的實例對象上繼承來自原型對象prototype的方法或者屬性都會改變。
【3】原型鏈：任何對象都是由一個更高級的構(gòu)造函數(shù)創(chuàng)建來的。比如對象是由object函數(shù)創(chuàng)建來。prototype是函數(shù)的屬性，__proto__隱式原型是對象（object）的屬性。由于JS中函數(shù)也是對象，所以函數(shù)上也有__proto__屬性。對象的__proto__指向這個對象的構(gòu)造函數(shù)的prototype
【4】任何函數(shù)都有prototype屬性即原型對象，原型對象默認有constructor屬性，指向原型對象prototype所在的構(gòu)造函數(shù)，即表示這個原型對象屬于哪個構(gòu)造函數(shù)(類型,js無類型的概念）。constructor屬性定義在prototype對象上面，可以被所有實例對象繼承。修改原型對象時，一般要同時校正constructor屬性的指向,建議用給原型對象添加方法的形式修改原型對象，而不是完全覆蓋原型對象。

C.prototype.method1 = function (...) {
     ...
 };

instanceof
instanceof 判斷一個對象(不能判斷原始類型值)是不是某個構(gòu)造函數(shù)(類)的實例，返回布爾值，通過檢查原型鏈來實現(xiàn)判斷。instanceof對整個原型鏈上的對象都有效，因此同一個實例對象，可能會對多個構(gòu)造函數(shù)都返回true。

var d = new Date();
d instanceof Date // true
d instanceof Object // true
//instanceof可以用來判斷值的類型
var x = [1, 2, 3];
var y = {};
x instanceof Array // true
y instanceof Object // true

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

圖片轉(zhuǎn)載自知乎