.
如果要我總結一下學習前端以來我遇到了哪些瓶頸，那麼面向對象一定是第一個毫不猶豫想到的。儘管我現在對於面向對象有了一些的瞭解，但是當初的那種似懂非懂的痛苦，依然歷歷在目。
為了幫助大家能夠更加直觀的學習和了解面向對象，我會用盡量簡單易懂的描述來展示面向對象的相關知識。並且也準備了一些實用的例子幫助大家更加快速的掌握面向對象的真諦。
- jQuery的面向對象實現
- 封裝拖拽
- 簡易版運動框架封裝
這可能會花一點時間，但是卻值得期待。所以如果有興趣的朋友可以來簡書和公眾號關注我。
而這篇文章主要來聊一聊關於面向對象的一些重要的基本功。
一、對象的定義
在ECMAScript-262中，對象被定義為“無序屬性的集合，其屬性可以包含基本值，對象或者函數” 。
也就是說，在JavaScript中，對象無非就是由一些列無序的key-value對組成。其中value可以是基本值，對象或者函數。
// 這裡的person就是一個對象
var person = {
name: 'Tom',
age: 18,
getName: function() {},
parent: {}
}
創建對象
我們可以通過new的方式創建一個對象。
var obj = new Object();
也可以通過對象字面量的形式創建一個簡單的對象。
var obj = {};
當我們想要給我們創建的簡單對象添加方法時，可以這樣表示。
// 可以這樣
var person = {};
person.name = "TOM";
person.getName = function() {
return this.name;
}
// 也可以這樣
var person = {
name: "TOM",
getName: function() {
return this.name;
}
}
訪問對象的屬性和方法
假如我們有一個簡單的對象如下：
var person = {
name: 'TOM',
age: '20',
getName: function() {
return this.name
}
}
當我們想要訪問他的name屬性時，可以用如下兩種方式訪問。
person.name
// 或者
person['name']
如果我們想要訪問的屬性名是一個變量時，常常會使用第二種方式。例如我們要同時訪問person的name與age，可以這樣寫：
['name', 'age'].forEach(function(item) {
console.log(person[item]);
})
這種方式一定要重視，記住它以後在我們處理複雜數據的時候會有很大的幫助。
二、工廠模式
使用上面的方式創建對象很簡單，但是在很多時候並不能滿足我們的需求。就以person對象為例。假如我們在實際開發中，不僅僅需要一個名字叫做TOM的person對象，同時還需要另外一個名為Jake的person對象，雖然他們有很多相似之處，但是我們不得不重複寫兩次。
var perTom = {
name: 'TOM',
age: 20,
getName: function() {
return this.name
}
};
var perJake = {
name: 'Jake',
age: 22,
getName: function() {
return this.name
}
}
很顯然這並不是合理的方式，當相似對象太多時，大家都會崩潰掉。
我們可以使用工廠模式的方式解決這個問題。顧名思義，工廠模式就是我們提供一個模子，然後通過這個模子複製出我們需要的對象。我們需要多少個，就複製多少個。
var createPerson = function(name, age) {
// 聲明一箇中間對象，該對象就是工廠模式的模子
var o = new Object();
// 依次添加我們需要的屬性與方法
o.name = name;
o.age = age;
o.getName = function() {
return this.name;
}
return o;
}
// 創建兩個實例
var perTom = createPerson('TOM', 20);
var PerJake = createPerson('Jake', 22);
相信上面的代碼並不難理解，也不用把工廠模式看得太過高大上。很顯然，工廠模式幫助我們解決了重複代碼上的麻煩，讓我們可以寫很少的代碼，就能夠創建很多個person對象。但是這裡還有兩個麻煩，需要我們注意。
第一個麻煩就是這樣處理，我們沒有辦法識別對象實例的類型。使用instanceof可以識別對象的類型，如下例子：
var obj = {};
var foo = function() {}
console.log(obj instanceof Object); // true
console.log(foo instanceof Function); // true
因此在工廠模式的基礎上，我們需要使用構造函數的方式來解決這個麻煩。
三、構造函數
在JavaScript中，new關鍵字可以讓一個函數變得與眾不同。通過下面的例子，我們來一探new關鍵字的神奇之處。
function demo() {
console.log(this);
}
demo(); // window
new demo(); // demo
為了能夠直觀的感受他們不同，建議大家動手實踐觀察一下。很顯然，使用new之後，函數內部發生了一些變化，讓this指向改變。那麼new關鍵字到底做了什麼事情呢。嗯，其實我之前在文章裡用文字大概表達了一下new到底幹了什麼，但是一些同學好奇心很足，總期望用代碼實現一下，我就大概以我的理解來表達一下吧。
// 先一本正經的創建一個構造函數，其實該函數與普通函數並無區別
var Person = function(name, age) {
this.name = name;
this.age = age;
this.getName = function() {
return this.name;
}
}
// 將構造函數以參數形式傳入
function New(func) {
// 聲明一箇中間對象，該對象為最終返回的實例
var res = {};
if (func.prototype !== null) {
// 將實例的原型指向構造函數的原型
res.__proto__ = func.prototype;
}
// ret為構造函數執行的結果，這裡通過apply，將構造函數內部的this指向修改為指向res，即為實例對象
var ret = func.apply(res, Array.prototype.slice.call(arguments, 1));
// 當我們在構造函數中明確指定了返回對象時，那麼new的執行結果就是該返回對象
if ((typeof ret === "object" || typeof ret === "function") && ret !== null) {
return ret;
}
// 如果沒有明確指定返回對象，則默認返回res，這個res就是實例對象
return res;
}
// 通過new聲明創建實例，這裡的p1，實際接收的正是new中返回的res
var p1 = New(Person, 'tom', 20);
console.log(p1.getName());
// 當然，這裡也可以判斷出實例的類型了
console.log(p1 instanceof Person); // true
JavaScript內部再通過其他的一些特殊處理，將var p1 = New(Person, 'tom', 20); 等效於var p1 = new Person('tom', 20);。就是我們認識的new關鍵字了。具體怎麼處理的，我也不知道，別刨根問底了，一直回答下去太難 - -！
老實講，你可能很難在其他地方看到有如此明確的告訴你new關鍵字到底對構造函數幹了什麼的文章了。理解了這段代碼，你對JavaScript的理解又比別人深刻了一分，所以，一本正經厚顏無恥求個贊可好？
當然，很多朋友由於對於前面幾篇文章的知識理解不夠到位，會對new的實現表示非常困惑。但是老實講，如果你讀了我的前面幾篇文章，一定會對這裡new的實現有似曾相識的感覺。而且我這裡已經盡力做了詳細的註解，剩下的只能靠你自己了。
但是隻要你花點時間，理解了他的原理，那麼困擾了無數人的構造函數中this到底指向誰就變得非常簡單了。
所以，為了能夠判斷實例與對象的關係，我們就使用構造函數來搞定。
var Person = function(name, age) {
this.name = name;
this.age = age;
this.getName = function() {
return this.name;
}
}
var p1 = new Person('Ness', 20);
console.log(p1.getName()); // Ness
console.log(p1 instanceof Person); // true
關於構造函數，如果你暫時不能夠理解new的具體實現，就先記住下面這幾個結論吧。
- 與普通函數相比，構造函數並沒有任何特別的地方，首字母大寫只是我們約定的小規定，用於區分普通函數；
- new關鍵字讓構造函數具有了與普通函數不同的許多特點，而new的過程中，執行了如下過程：
- 聲明一箇中間對象；
- 將該中間對象的原型指向構造函數的原型；
- 將構造函數的this，指向該中間對象；
- 返回該中間對象，即返回實例對象。
四、原型
雖然構造函數解決了判斷實例類型的問題，但是，說到底，還是一個對象的複製過程。跟工廠模式頗有相似之處。也就是說，當我們聲明瞭100個person對象，那麼就有100個getName方法被重新生成。
這裡的每一個getName方法實現的功能其實是一模一樣的，但是由於分別屬於不同的實例，就不得不一直不停的為getName分配空間。這就是工廠模式存在的第二個麻煩。
顯然這是不合理的。我們期望的是，既然都是實現同一個功能，那麼能不能就讓每一個實例對象都訪問同一個方法？
當然能，這就是原型對象要幫我們解決的問題了。
我們創建的每一個函數，都可以有一個prototype屬性，該屬性指向一個對象。這個對象，就是我們這裡說的原型。
當我們在創建對象時，可以根據自己的需求，選擇性的將一些屬性和方法通過prototype屬性，掛載在原型對象上。而每一個new出來的實例，都有一個__proto__屬性，該屬性指向構造函數的原型對象，通過這個屬性，讓實例對象也能夠訪問原型對象上的方法。因此，當所有的實例都能夠通過__proto__訪問到原型對象時，原型對象的方法與屬性就變成了共有方法與屬性。
我們通過一個簡單的例子與圖示，來了解構造函數，實例與原型三者之間的關係。
由於每個函數都可以是構造函數，每個對象都可以是原型對象，因此如果在理解原型之初就想的太多太複雜的話，反而會阻礙你的理解，這裡我們要學會先簡化它們。就單純的剖析這三者的關係。
// 聲明構造函數
function Person(name, age) {
this.name = name;
this.age = age;
}
// 通過prototye屬性，將方法掛載到原型對象上
Person.prototype.getName = function() {
return this.name;
}
var p1 = new Person('tim', 10);
var p2 = new Person('jak', 22);
console.log(p1.getName === p2.getName); // true
圖示
通過圖示我們可以看出，構造函數的prototype與所有實例對象的__proto__都指向原型對象。而原型對象的constructor指向構造函數。
除此之外，還可以從圖中看出，實例對象實際上對前面我們所說的中間對象的複製，而中間對象中的屬性與方法都在構造函數中添加。於是根據構造函數與原型的特性，我們就可以將在構造函數中，通過this聲明的屬性與方法稱為私有變量與方法，它們被當前被某一個實例對象所獨有。而通過原型聲明的屬性與方法，我們可以稱之為共有屬性與方法，它們可以被所有的實例對象訪問。
當我們訪問實例對象中的屬性或者方法時，會優先訪問實例對象自身的屬性和方法。
function Person(name, age) {
this.name = name;
this.age = age;
this.getName = function() {
console.log('this is constructor.');
}
}
Person.prototype.getName = function() {
return this.name;
}
var p1 = new Person('tim', 10);
p1.getName(); // this is constructor.
在這個例子中，我們同時在原型與構造函數中都聲明瞭一個getName函數，運行代碼的結果表示原型中的訪問並沒有被訪問。
我們還可以通過in來判斷，一個對象是否擁有某一個屬性/方法，無論是該屬性/方法存在與實例對象還是原型對象。
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.getName = function() {
return this.name;
}
var p1 = new Person('tim', 10);
console.log('name' in p1); // true
in的這種特性最常用的場景之一，就是判斷當前頁面是否在移動端打開。
isMobile = 'ontouchstart' in document;
// 很多人喜歡用瀏覽器UA的方式來判斷，但並不是很好的方式
** 更簡單的原型寫法 **
根據前面例子的寫法，如果我們要在原型上添加更多的方法，可以這樣寫：
function Person() {}
Person.prototype.getName = function() {}
Person.prototype.getAge = function() {}
Person.prototype.sayHello = function() {}
... ...
除此之外，我還可以使用更為簡單的寫法。
function Person() {}
Person.prototype = {
constructor: Person,
getName: function() {},
getAge: function() {},
sayHello: function() {}
}
這種字面量的寫法看上去簡單很多，但是有一個需要特別注意的地方。Person.prototype = {}實際上是重新創建了一個{}對象並賦值給Person.prototype，這裡的{}並不是最初的那個原型對象。因此它裡面並不包含constructor屬性。為了保證正確性，我們必須在新創建的{}對象中顯示的設置constructor的指向。即上面的constructor: Person。
五、原型鏈
原型對象其實也是普通的對象。幾乎所有的對象都可能是原型對象，也可能是實例對象，而且還可以同時是原型對象與實例對象。這樣的一個對象，正是構成原型鏈的一個節點。因此理解了原型，那麼原型鏈並不是一個多麼複雜的概念。
我們知道所有的函數都有一個叫做toString的方法。那麼這個方法到底是在哪裡的呢？
function add() {}
那麼我們可以用如下的圖來表示這個函數的原型鏈。
原型鏈
其中add是Function對象的實例。而Function的原型對象同時又是Object原型的實例。這樣就構成了一條原型鏈。原型鏈的訪問，其實跟作用域鏈有很大的相似之處，他們都是一次單向的查找過程。因此實例對象能夠通過原型鏈，訪問到處於原型鏈上對象的所有屬性與方法。這也是foo最終能夠訪問到處於Object原型對象上的toString方法的原因。
基於原型鏈的特性，我們可以很輕鬆的實現繼承。
六、繼承
我們常常結合構造函數與原型來創建一個對象。因為構造函數與原型的不同特性，分別解決了我們不同的困擾。因此當我們想要實現繼承時，就必須得根據構造函數與原型的不同而採取不同的策略。
我們聲明一個Person對象，該對象將作為父級，而子級cPerson將要繼承Person的所有屬性與方法。
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.getName = function() {
return this.name;
}
首先我們來看構造函數的繼承。在上面我們已經理解了構造函數的本質，它其實是在new內部實現的一個複製過程。而我們在繼承時想要的，就是想父級構造函數中的操作在子級的構造函數中重現一遍即可。我們可以通過call方法來達到目的。
// 構造函數的繼承
function cPerson(name, age, job) {
Person.call(this, name, age);
this.job = job;
}
而原型的繼承，則只需要將子級的原型對象設置為父級的一個實例，加入到原型鏈中即可。
// 繼承原型
cPerson.prototype = new Person(name, age);
// 添加更多方法
cPerson.prototype.getLive = function() {}
原型鏈
當然關於繼承還有更好的方式。
七、更好的繼承
假設原型鏈的終點Object.prototype為原型鏈的E(end)端，原型鏈的起點為S(start)端。
通過前面原型鏈的學習我們知道，處於S端的對象，可以通過S -> E的單向查找，訪問到原型鏈上的所有方法與屬性。因此這給繼承提供了理論基礎。我們只需要在S端添加新的對象，那麼新對象就能夠通過原型鏈訪問到父級的方法與屬性。因此想要實現繼承，是一件非常簡單的事情。
因為封裝一個對象由構造函數與原型共同組成，因此繼承也會分別有構造函數的繼承與原型的繼承。
假設我們已經封裝好了一個父類對象Person。如下。
var Person = function(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.getName = function() {
return this.name;
}
Person.prototype.getAge = function() {
return this.age;
}
構造函數的繼承比較簡單，我們可以藉助call/apply來實現。假設我們要通過繼承封裝一個Student的子類對象。那麼構造函數可以如下實現。
var Student = function(name, age, grade) {
// 通過call方法還原Person構造函數中的所有處理邏輯
Student.call(Person, name, age);
this.grade = grade;
}
// 等價於
var Student = function(name, age, grade) {
this.name = name;
this.age = age;
this.grade = grade;
}
原型的繼承則稍微需要一點思考。首先我們應該考慮，如何將子類對象的原型加入到原型鏈中？我們只需要讓子類對象的原型，成為父類對象的一個實例，然後通過__proto__就可以訪問父類對象的原型。這樣就繼承了父類原型中的方法與屬性了。
因此我們可以先封裝一個方法，該方法根據父類對象的原型創建一個實例，該實例將會作為子類對象的原型。
function create(proto, options) {
// 創建一個空對象
var tmp = {};
// 讓這個新的空對象成為父類對象的實例
tmp.__proto__ = proto;
// 傳入的方法都掛載到新對象上，新的對象將作為子類對象的原型
Object.defineProperties(tmp, options);
return tmp;
}
簡單封裝了create對象之後，我們就可以使用該方法來實現原型的繼承了。
Student.prototype = create(Person.prototype, {
// 不要忘了重新指定構造函數
constructor: {
value: Student
}
getGrade: {
value: function() {
return this.grade
}
}
})
那麼我們來驗證一下我們這裡實現的繼承是否正確。
var s1 = new Student('ming', 22, 5);
console.log(s1.getName()); // ming
console.log(s1.getAge()); // 22
console.log(s1.getGrade()); // 5
全部都能正常訪問，沒問題。在ECMAScript5中直接提供了一個Object.create方法來完成我們上面自己封裝的create的功能。因此我們可以直接使用Object.create.
Student.prototype = create(Person.prototype, {
// 不要忘了重新指定構造函數
constructor: {
value: Student
}
getGrade: {
value: function() {
return this.grade
}
}
})
完整代碼如下：
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.getName = function() {
return this.name
}
Person.prototype.getAge = function() {
return this.age;
}
function Student(name, age, grade) {
// 構造函數繼承
Person.call(this, name, age);
this.grade = grade;
}
// 原型繼承
Student.prototype = Object.create(Person.prototype, {
// 不要忘了重新指定構造函數
constructor: {
value: Student
}
getGrade: {
value: function() {
return this.grade
}
}
})
var s1 = new Student('ming', 22, 5);
console.log(s1.getName()); // ming
console.log(s1.getAge()); // 22
console.log(s1.getGrade()); // 5
八、屬性類型
在上面的繼承實現中，使用了一個大家可能不太熟悉的方法defineProperties。並且在定義getGrade時使用了一個很奇怪的方式。
getGrade: {
value: function() {
return this.grade
}
}
這其實是對象中的屬性類型。在我們平常的使用中，給對象添加一個屬性時，直接使用object.param的方式就可以了，或者直接在對象中掛載。
var person = {
name: 'TOM'
}
在ECMAScript5中，對每個屬性都添加了幾個屬性類型，來描述這些屬性的特點。他們分別是
- configurable: 表示該屬性是否能被delete刪除。當其值為false時，其他的特性也不能被改變。默認值為true
- enumerable: 是否能枚舉。也就是是否能被for-in遍歷。默認值為true
- writable: 是否能修改值。默認為true
- value: 該屬性的具體值是多少。默認為undefined
- get : 當我們通過person.name訪問name的值時，get將被調用。該方法可以自定義返回的具體值時多少。get默認值為undefined
- set: 當我們通過person.name = 'Jake'設置name的值時，set方法將被調用。該方法可以自定義設置值的具體方式。set默認值為undefined
需要注意的是，不能同時設置value、writable 與 get、set的值。
我們可以通過Object.defineProperty方法來修改這些屬性類型。
下面我們用一些簡單的例子來演示一下這些屬性類型的具體表現。
configurable
// 用普通的方式給person對象添加一個name屬性，值為TOM
var person = {
name: 'TOM'
}
// 使用delete刪除該屬性
delete person.name; // 返回true 表示刪除成功
// 通過Object.defineProperty重新添加name屬性
// 並設置name的屬性類型的configurable為false，表示不能再用delete刪除
Object.defineProperty(person, 'name', {
configurable: false,
value: 'Jake' // 設置name屬性的值
})
// 再次delete，已經不能刪除了
delete person.name // false
console.log(person.name) // 值為Jake
// 試圖改變value
person.name = "alex";
console.log(person.name) // Jake 改變失敗
enumerable
var person = {
name: 'TOM',
age: 20
}
// 使用for-in枚舉person的屬性
var params = [];
for(var key in person) {
params.push(key);
}
// 查看枚舉結果
console.log(params); // ['name', 'age']
// 重新設置name屬性的類型，讓其不可被枚舉
Object.defineProperty(person, 'name', {
enumerable: false
})
var params_ = [];
for(var key in person) {
params_.push(key)
}
// 再次查看枚舉結果
console.log(params_); // ['age']
writable
var person = {
name: 'TOM'
}
// 修改name的值
person.name = 'Jake';
// 查看修改結果
console.log(person.name); // Jake 修改成功
// 設置name的值不能被修改
Object.defineProperty(person, 'name', {
writable: false
})
// 再次試圖修改name的值
person.name = 'alex';
console.log(person.name); // Jake 修改失敗
value
var person = {}
// 添加一個name屬性
Object.defineProperty(person, 'name', {
value: 'TOM'
})
console.log(person.name) // TOM
get/set
var person = {}
// 通過get與set自定義訪問與設置name屬性的方式
Object.defineProperty(person, 'name', {
get: function() {
// 一直返回TOM
return 'TOM'
},
set: function(value) {
// 設置name屬性時，返回該字符串，value為新值
console.log(value + ' in set');
}
})
// 第一次訪問name，調用get
console.log(person.name) // TOM
// 嘗試修改name值，此時set方法被調用
person.name = 'alex' // alex in set
// 第二次訪問name，還是調用get
console.log(person.name) // TOM
請儘量同時設置get、set。如果僅僅只設置了get，那麼我們將無法設置該屬性值。如果僅僅只設置了set，我們也無法讀取該屬性的值。
Object.defineProperty只能設置一個屬性的屬性特性。當我們想要同時設置多個屬性的特性時，需要使用我們之前提到過的Object.defineProperties
var person = {}
Object.defineProperties(person, {
name: {
value: 'Jake',
configurable: true
},
age: {
get: function() {
return this.value || 22
},
set: function(value) {
this.value = value
}
}
})
person.name // Jake
person.age // 22
讀取屬性的特性值
我們可以使用Object.getOwnPropertyDescriptor方法讀取某一個屬性的特性值。
var person = {}
Object.defineProperty(person, 'name', {
value: 'alex',
writable: false,
configurable: false
})
var descripter = Object.getOwnPropertyDescriptor(person, 'name');
console.log(descripter); // 返回結果如下
descripter = {
configurable: false,
enumerable: false,
value: 'alex',
writable: false
}
九、總結
關於面向對象的基礎知識大概就是這些了。我從最簡單的創建一個對象開始，解釋了為什麼我們需要構造函數與原型，理解了這其中的細節，有助於我們在實際開發中靈活的組織自己的對象。因為我們並不是所有的場景都會使用構造函數或者原型來創建對象，也許我們需要的對象並不會聲明多個實例，或者不用區分對象的類型，那麼我們就可以選擇更簡單的方式。
我們還需要關注構造函數與原型的各自特性，有助於我們在創建對象時準確的判斷我們的屬性與方法到底是放在構造函數中還是放在原型中。如果沒有理解清楚，這會給我們在實際開發中造成非常大的困擾。
最後接下來的幾篇文章，我會挑幾個面向對象的例子，繼續幫助大家掌握面向對象的實際運用。
鏈接：https://www.jianshu.com/p/15ac7393bc1f
來源：簡書
閱讀更多 前端全棧工程師之路 的文章
關鍵字: jQuery 編程語言 JavaScript
