什麼是面向對象編程
說到面向對象，每一個人的明白可以差別，以下是個人對面向對象編程的明白：
關於面向對象編程這幾個字每一個前端都應當異常熟習，然則究竟應當怎樣去明白他呢？
就編程體式格局而言，javascrip可以分紅兩種發體式格局：面向歷程和面向對象，所謂的面向歷程就是比較經常運用的函數式編程，經由過程大批的單體函數挪用來組織代碼，這類體式格局使得代碼組織雜亂，不方便代碼瀏覽，由於定義了大批的函數而消耗內存；而面向對象則是另一種開發體式格局，面向對象的標誌就是類，然則js中卻沒有類的觀點，那末js中的面向對象又改怎樣明白呢？我們可以將組織函數（組織器）明白為類，經由過程定義組織函數，實例化對象，基於prototype完成對象繼續，轉變傳餐數目掌握要領功用的體式格局，一樣表現面向對象編程封裝、繼續、多態的特性。
對象
無序屬性的鳩合，其屬性可以包括基本值、對象或許函數
js中有萬物皆對象的說法，那末當我們看到 var a = ‘asdfqwert’,那末這類說法還準確嗎？
var a = 'asdfqwert'
typeof a //'string'範例推斷是返回string,那末申明a是一個簡樸範例，然則現實我們卻可以挪用a.split a.toString 等要領，這個時刻現實會在內部把a 轉為String對象的實例，由於對象、函數自身就是Object，那末說萬物皆對象完整沒有題目。
那末建立對象的體式格局又有那些呢？
建立對象的體式格局
Object組織函數
var obj1 = new Object(); //或許var obj = new Object({name:'object',age;12});
obj.name='object';
obj.age = 12對象字面量
var obj2 = {
name:'Join',
age:23,
getName:function(){
return this.age
}
}經由過程Object組織函數和對象字面量的體式格局建立一個實例對象，比較合適建立單個或許少許實例對象，經由過程這類體式格局建立大批的相似對象時，代碼反覆，冗餘。
工場情勢
function Fn(name,age){
var obj = ne Object();
obj.name = name;
obj.age = age;
obj.getName = function(){
return this.name
}
return obj
}
var person1 = Fn('11',10)
var person2 = Fn('11',1yu0)工場情勢現實是一個包括參數的函數封裝，挪用后返回具有參數和要領的對象，屢次挪用處理反覆代碼題目，然則存在對象辨認的題目，同時也具有組織函數情勢雷同的瑕玷
組織函數情勢
function Fn(name,age){
this.name = name;
this.age = age;
this.getName = function(){
return this.name;
}
}
var person1 = new Fn('啦啦',18)
var person2 = new Fn('菲菲',17)經由過程自定義組織函數可以建立特定範例，具有相似屬性和功用的的實例對象。比方，經由過程Fn建立出大批差別姓名，差別歲數，然則都有獵取實例姓名屬性的實例個別。只需要經由過程 new 關鍵字實例化就可以了，代碼量比擬於字面量的體式格局大大削減。
然則，其瑕玷就是在new的歷程當中多個實例雷同（共用）的屬性和要領在每一個實例上保留一份，消耗內存。
提到new,這裏說一下new的歷程，發作了什麼，現實上以下代碼錶現了new的歷程
//組織函數A，new 一個A的實例a
function A (){
this.name = 111
}
var a = new A('梅梅')
//new 的歷程
var obj = new Object(); //建立一個新對象
obj.__proto__ = A.prototype; //讓obj的__proto__指向A.prototype
A.call(obj) //在obj的作用環境實行組織函數的代碼，使this指向obj
return obj //返回實例對象原型情勢
function Fn(){
}
Fn.prototype.name='啦啦'
Fn.prototype.getName = function(){
return this.name;
}
var a = new Fn()
var b = new Fn()
a.getName() //啦啦
b.getName() //啦啦
a.getName == b.getName //true函數建立會具有prototype屬性，指向一個寄存了某些特定實例的共用屬性和要領的對象。組織函數Fn的實例a和b都可以挪用Fn原型對象上的要領getName,獲得的name值是一樣的。a.getName == b.getName,申明挪用的是同一個getName要領，在組織函數的原型對象上，所以原型對象上的要領和屬性是其一切實例共用的。
經由過程原型對象可以處理組織函數情勢提到每一個實例保留一份的內存消耗題目
組織函數情勢和原型情勢組合
function Fn(name,age){
this.name = name;
this.age = age;
}
Fn.prototype.getName = function(){
return this.name;
}
var a = new Fn('啦啦',23)
var b = new Fn('呼呼',15)
a.getName() //啦啦
b.getName() //呼呼經由過程二者組合的體式格局可以完成每一個實例對象具有一份本身的實例屬性，同時還可以接見組織函數原型對象上的同享的原型屬性和原型要領。同時具有組織函數情勢和原型情勢建立對象的長處。
動態原型情勢和寄生組織函數情勢這裏不多說，有興緻的可以本身看看
穩妥組織函數情勢
function Fn(name,age){
var obj = new Object();
var name = name;
var age = age
obj.getName = function(){
return name
}
obj.setName = function(n){
name = n
}
return obj;
}
var fn = Fn('家家',23)
fn.getName() //'家家'
fn.setName('lala')
fn.getName() //'lala'所謂的穩妥組織函數現實上本意是起到庇護變量的作用，只能經由過程對象供應的要領操縱組織函數傳入的原始變量值，防備經由過程其他門路轉變變量的值，其實質是閉包。
作用域鏈
作用域
作用域分為全局作用域和函數作用域，簡樸粗獷的明白就是，變量的可接見地區。
var a = 111;
function b(){
var c = 222
}
b()
console.log(a) //111
console.log(c) //報錯 c is not undefined一樣是定義變量，然則定義在函數內部的變量，在函數外部沒法接見，申明c的可接見地區只在函數內部。
實行環境（execution context）
實行環境始終是this關鍵字的值，它是具有當前所實行代碼的對象的援用，函數的每次挪用都邑建立一個新的實行環境。
當實行流進入一個函數時，函數的實行環境就會被推入環境棧頂端，實行完畢后環境棧將其彈出並燒毀，把掌握權還給之前的實行環境。以下圖所示：
變量對象（函數實行時轉為運動對象）
每一個實行環境都有一個與之關聯的變量對象，環境中的變量和函數都保留在對象中。當代碼實行完畢而且環境中變量和函數不被其他對象援用，那末變量對象跟着實行環境燒毀。
作用域鏈
當代碼在環境中實行時，會建立一個變量對象的作用域鏈，其作用就是保證對實行環境有權接見的變量和函數做有序接見。作用域鏈的最前端永遠都是當前實行的代碼地點實行環境的變量對象。作用域鏈中下一個變量對象為外層環境的變量對象，順次類推至末了全局對象。
function fn1(){
var a = 1;
return function fn2(){
return a;
}
}
var b = fn1()
var c = b() //1
上圖所表現的就是fn1的實行環境，當外層函數挪用時，內層函數的作用域鏈就已建立了。
實行環境、變量對象、作用域鏈之間的關聯
上圖表現實行環境、作用域鏈和變量對象（運動對象）之間的關聯。挪用fn1返回函數fn2 ,fn2內部接見了fn1中定義的a,當fn2挪用時返回a=1,然則fn2中沒有定義1,所以會順着作用域鏈向上找，直至找到a,沒有則報錯。
由於這裏應用了閉包，當fn1實行完畢，fn1的實行環境會燒毀，然則由於a被fn2接見，所以fn1作用域鏈會斷開，然則變量對象保留，供fn2接見。
原型鏈
原型 prototype
每一個函數在建立的時刻都邑有一個prototype屬性，該屬性指向一個對象，用於寄存可以被有所屬函數建立出來的一切實例共用的屬性和要領。
function A(){}
A.prototype.name="共用屬性"
A.prototype.getName=function(){
return this.name
}
var a = new A();
var b = new A();
a.getName() //"共用屬性"
b.getName() // "共用屬性"
console.log(a.name == b.name,a.getName == b.getName) //true true以上代碼錶現的就是原型對象的特性，一切A組織函數的實例共用其原型對象上的要領和屬性，同時由原型對象構成的原型鏈也是完成繼續的基本。
原型的鏈明白
原型鏈的構成離不開組織函數、原型對象和實例，這裏簡樸引見下原型鏈的構成道理：
每一個組織函數在建立的時刻都邑有一個prototype（原型）屬性，該屬性指向的對象默許包括constructor（組織函數）屬性，constructor一樣是一個指針，指向prototype地點的函數，固然我們可以想prototype增加其他屬性和要領。當我們建立一個組織函數的實例時，該實例對象會包括有一個內部屬性[[prototype]]，一般叫__proto__，__proto__指向建立實例的組織函數的原型對象。
當我們讓一個函數的prototype指向一個實例，那末會發作什麼？
function A(){
this.name = 'lala';
}
A.prototype.sayHi = function(){
console.log('hi')
}
function B(){}
B.prototype = new A();
var instance = new B()
console.log(instance)
上圖為B的實例instance的輸出效果。
instance.__proto__指向 B.prototype,B.prototype == new A() A的實例，(new A()).__proto__ = A.prototype,即：
instance.__proto__ == B.prototype.__proto__ == A.prototype,所以B的實例可以經由過程這類鏈的情勢接見A的原型要領和原型屬性，由於A實例化的時刻複製了A的實例屬性，所以instance可以接見複製到B.prototype上得name屬性。
javascript的基於原型鏈的繼續道理也是如許的，下面臨繼續的道理就不再反覆申明。
經由過程下圖可以越發直觀的迴響反應原型鏈和繼續的道理：
繼續
類的三部份
組織函數內的：供實例化對象複製用的
組織函數外的：經由過程點語法增加，供類運用，氣力化對象沒法接見
類的原型中的：供一切實例化對象所共用，實例化對象可以經由過程其原型鏈間接的接見
(__proto__:老是指向組織器所用的原型,constructor:組織函數)
類式繼續
- 完成體式格局：類式繼續需要將第一個類的實例賦值給第二個類的原型
- 繼續道理：父類的實例賦值給子類的原型，那末這個子類的原型一樣可以接見父類原型上的屬性和要領與從父類組織函數中複製的屬性和要領
- 實質：重寫子類的原型對象（致使子類的圓形對象中的constructor的指向發作轉變，變成父類組織函數）
- 特性：實例即是子類的實例也是父類的實例；父類新增的原型要領和原型屬性實例都可以接見，而且是一切實例同享
- 瑕玷：假如父類中的共有屬性是援用範例，那末就會被子類的一切實例共用，个中一個子類的實例轉變了從父類繼續來的援用範例則會直接影響其他子類；建立子類實例時，沒法向父類組織函數傳參；沒法完成多繼續
function SuperClass(){ //父類
this.superName = '類式繼續-父類';
this.superArr = ['a','b'];
}
SuperClass.prototype.getSuperName = function(){ //父類原型要領
return this.superName;
}
function SubClass(){ //子類
this.subName = '類式繼續-子類';
this.subArr = [1,2];
}
var superInstance = new SuperClass(); //父類實例
SubClass.prototype = superInstance; //繼續父類
SubClass.prototype.getSubName = function(){ //子類原型要領
return this.subName;
}
var instance1 = new SubClass(); //子類的實例
var instance2 = new SubClass();//子類的實例
console.log(instance1.superArr,
instance1.getSuperName(),
instance1.subArr,
instance1.getSubName()); //'a,b' '類式繼續-父類' [1,2] '類式繼續-子類'
instance1.subArr.push(3); //變動子類的實例屬性援用值
instance1.superArr.push('c');//變動父類的實例屬性援用值
console.log(instance2.superArr,instance2.subArr) // 'a,b,c' [1,2] 由因而援用範例所以其他實例上的屬性也被變動組織函數繼續
- 完成體式格局：在子類內對父類實行SuperClass.call(this,name…)語句同時傳入this和指定參數
- 完成道理：經由過程call函數轉變實行環境（this的指向），使得子類複製獲得父類組織函數內的屬性並舉行自定賦值，同時子類也可以有本身的屬性（沒有用到原型）
- 實質：父類組織函數加強子類實例
- 特性：改善類式繼續中的父類的援用屬性被一切子類實例共用的題目；可以在子類內call多個父類組織函數來完成多繼續；子類實例化時可向父類傳參
- 瑕玷：只能繼續父類的實例屬性和實例要領，沒法繼續父類的原型屬性和原型要領；經由過程子類new出來的實例只是子類的實例，不是父類的實例；影響機能
function SuperClassA(name){
this.superName = name;
this.books = ['aa','bb'];
}
SuperClassA.prototype.getSuperName = function(){
return this.superName;
}
function SubClassA(name,age){
SuperClassA.call(this,name);//經由過程call繼續，new一次就複製一次
this.age = age;
}
var instance1 = new SubClassA('莉莉',21);
var instance2 = new SubClassA('佳佳',23);
instance1.books.push('cc');
console.log(instance1.superName,instance1.age,instance1.books,instance2.superName,instance2.age,instance2.books,instance1.getSuperName);
//莉莉 , 21 , ["aa", "bb", "cc"] , 佳佳 , 23 , ["aa", "bb"] , undefined
console.log(SubClassA.prototype) //只包括constructor屬性的對象
組合繼續
- 完成體式格局：在子類組織函數中實行弗雷組織函數，在子類原型上實例化父類
- 完成道理：類式繼續＋組織函數繼續，經由過程call函數轉變實行環境（this的指向），使得子類複製獲得父類組織函數內的屬性並舉行自定賦值，同時子類也可以有本身的屬性，再經由過程類式繼續的原型來繼續父類的原型屬性和原型要領
- 實質：父類組織函數加強子類實例＋重寫子類原型對象
- 特性：實例屬性，實例要領，原型屬性，原型要領都可繼續；處理援用屬性同享的題目；可向父類傳參；new出來的實例即是父類實例也是子類實例
- 瑕玷：耗內存
function SuperClassB(name){
this.superName = name;
this.books = ['aa','bb'];
}
SuperClassB.prototype.getSuperName = function(){
return this.superName;
}
function SubClassB(name,age){
SuperClassB.call(this,name);//經由過程call繼續，new一次就複製一次
this.age = age;
}
var instanceSuperClassB = new SuperClassB();
SubClassB.prototype = instanceSuperClassB;
var instance1 = new SubClassB('莉莉',21);
var instance2 = new SubClassB('佳佳',23);
instance1.books.push('cc');
console.log(instance1.superName,instance1.age,instance1.books,instance2.superName,instance2.age,instance2.books,instance1.getSuperName());
//莉莉 , 21 , ["aa", "bb", "cc"] , 佳佳 , 23 , ["aa", "bb"] , 莉莉原型式繼續(只強調子類原型即是父類原型體式格局的嚴重題目，不引薦）
- 完成體式格局：直接原型相稱的原型繼續體式格局，子類原型即是父類原型
- 完成道理：原型鏈
- 實質：原型鏈
- 特性：不引薦
- 瑕玷：子類原型即是父類原型的繼續體式格局會致使修正子類原型會直接迴響反應在父類的原型上；援用範例共用
//父類
function SuperClassC(){
this.superName = '原型繼續-父類';
}
SuperClassC.prototype.superTit = '父類原型屬性';
SuperClassC.prototype.getSuperName = function(){
return this.superName;
}
//-------直接用原型相稱繼續-------
function SubClassC(){
this.subName = '原型繼續－子類';
}
SubClassC.prototype = SuperClassC.prototype;
var instance0 = new SubClassC();
//修正子類原型
SubClassC.prototype.subTit1 = '直接原型－子類原型屬性';
//對子類原型對象的修正同時反應到了父類原型
console.log(SuperClassC.prototype.subTit1); //'直接原型－子類原型屬性',修正子類原型父類受到影響子類原型直接即是父類原型的繼續體式格局雖然可以完成原型對象的繼續，然則卻有嚴重題目。所以並不引薦這類寫法，假如只想繼續原型對象上得屬性和要領，可以經由過程間接的體式格局，以下
function instanceSuper(obj){
var Fn = function(){};
Fn.prototype = obj;
return new Fn()
}
SubClassC.prototype = instanceSuper(SuperClassC.prototype);
var insranceSub = new SubClassC();
SubClassC.prototype.subTit = '子類屬性'
console.log(SubClassC.prototype)
console.log(SuperClassC.prototype)
以上代碼經由過程間接的體式格局一樣完成了只繼續父類的原型要領和屬性，然則修正子類原型，打印子類原型和父類原型后顯現父類原型併為被修正。這類體式格局跟類式繼續很像，差別點只是賦值給子類原型的實例是經由過程一個函數封裝返回的實例。
繼續的體式格局另有寄生式繼續、寄生組合式繼續，是對以上繼續體式格局的封裝，感興緻的可以本身找材料看下。
閉包
閉包是指有權限接見另一個函數作用域中的變量的函數。
上面在說作用域鏈的時刻提到內部函數可以接見外部函數的變量，由於函數實行時會建立作用域鏈，當前函數的運動對象處於最前端，當接見變量時假如當前函數的運動對象內沒有則會查找作用域鏈的下一個也就是外層函數的變量對象，順次向上直到找到或許查找完整局對象仍沒有則報錯，但是外部函數卻沒法接見內部函數的變量。但是閉包的特性就是接見其他函數內的變量。當函數實行完畢后其實行環境會、變量對象都邑燒毀，然則當其內的變量被其他函數援用接見時，縱然實行環境燒毀，作用域鏈斷開，然則變量對象依舊存在，供援用了其內變量的函數去接見。
function fn(){
var i = 1;
return function(){
console.log(++i)
}
}
var fn1 = fn();
fn1(); //2
fn1(); //3
fn1 = nullfn實行完畢，其實行環境和一切變量應當隨之燒毀，然則當實行fn1的時刻，輸出fn內i的值，fn1沒實行一次輸出i自加一的效果。申明fn實行完畢后，其實行環境相干系的變量對象並沒有燒毀，而是供fn1援用接見。以下圖所示：
以上就是閉包的道理，fn1作為外部函數，然則實行時依然可以接見fn內的變量。
罕見demo
1.異步函數挪用傳參，setTimeout 事宜實行函數
function fn(a,b){
return function(){
console.log(a,b)
}
}
setTimeout(fn(1,2),1000)
dom.addEventListener('click',fn(1,3),false)2.處理異步致使的實行函數參數在實行時實在值不符合希冀
var arr = []
for(var i =0; i < 3; i++){
arr[i] = function(i){
console.log(i)
}
}
arr[0]() //3
arr[1]() //3
arr[2]() //3革新,閉包＋自實行函數完成i的遞次輸出
var arr = []
for(var i =0; i < 3; i++){
arr[i] = (function(i){
return function(i){
console.log(i)
}
})(i)
}
arr[0]() //0
arr[1]() //1
arr[2]() //23.封裝私有函數插件，防止定名爭執
var obj = (function(){
var name = '111'
var obj = {
setName:function(){
name = '222'
},
getName:function(){
return name
}
}
return obj
})()
obj.setName()
obj.getName() //222外部沒法接見name,只能經由過程obj對象接見name
閉包的優瑕玷
作用：
- 接見其他函數內部的變量
- 使變量常駐內存，在特定情況下完成同享（多個閉包函數接見同一個變量）
- 封裝變量，防止定名爭執，多用在插件封裝，閉包可以將不想暴漏的變量封裝成私有變量
瑕玷：
- 當大批變量常駐內存時會致使內存消耗過量，影響速率，在ie9-版本會致使內存走漏
- 不當運用閉包會致使被援用變量發作非預期變動
參考
《javascript高等程序設計》
Developer Network
