一、使用Object建構式或物件字面量創建物件
缺點：使用同一個介面創建物件,會產生大量的重復性代碼，
解決方法：使用工廠模式創建物件，
1 //建構式
2 let obj1 = new Object();
3 obj1.name = '我和鴿子有個約會';
4 obj1.age = 22;
5 //字面量
6 let obj2 = {
7 name: '我和鴿子有個約會',
8 age: 22,
9 };
二、使用工廠模式創建物件
核心思想：創建一種函式,用函式來封裝以特定介面創建物件的細節，
優點：
createPerson()可以根據接收來的三個引數來構建一個包含所有必要資訊的person物件，
可以無數次地呼叫這個函式,每次都能回傳一個包含三個屬性和一個方法的物件，
這樣就解決了創建多個相似物件,產生大量重復代碼的問題，
缺點：
無法識別物件的型別,比如：我們想創建一個person型別(人類)的物件和cat型別(貓類)的物件,
但是我們無法將它們區分開來,因為它們本質上都是通過Object建構式創建的，
解決方法：建構式模式
1 function createPerson(name, age, job) {
2 let obj = new Object();
3 obj.name = name;
4 obj.age = 22;
5 obj.job = job;
6 obj.sayName = function () {
7 console.log(this.name);
8 };
9 return obj;
10 }
11
12 let person1 = createPerson('鴿子1', 22, 'programmer');
13 let person2 = createPerson('鴿子2', 20, 'student');
14 let cat = createPerson('貓', 3, 'Catch mice');
三、建構式模式
ECMAScript中的建構式可以用來創建特定型別的物件,像Object、Array這樣的原生建構式,在運行時會自動出現在
執行環境中,所以我們可以直接使用它們創建Object或者Array型別的物件，
當然,我們也可以自定義建構式,從而定義自定義物件型別的屬性和方法，
自定義建構式與工廠模式中的函式的不同：
1.沒有顯示地創建物件；
2.直接將屬性和方法賦給了this物件；
3.沒有return陳述句
4.函式名首字母大寫,不是硬性要求只是一種規范,目的是為了將建構式和普通函式區分開來,
因為建構式也是函式,只不過它可以用來創建物件而已，
使用建構式創建物件這一行為,被稱為該建構式的實體化(類的實體),其物件被稱為建構式的實體或實體物件，
建構式與其它函式的唯一區別就在于呼叫它們的方式不同，任何函式,只要通過new運算子呼叫,那它就是建構式,
如果不通過new運算子來呼叫,那和普通函式沒什么區別，
注意：
使用建構式創建物件需要使用 new 運算子，
這種方式呼叫建構式實際上會經歷以下4個步驟：
1.創建一個空物件；
2.將建構式的作用域賦給新物件(因此this就指向了這個新物件)；
3.執行建構式中的代碼(為這個新物件添加屬性)；
4.回傳新物件，
缺點：
所有方法都要在每個實體上重新創建一遍，
例如：person3和person4中的sayName()方法,雖然它們同屬于Person的實體,但其中的方法是獨立的,
也就是說,每實體化一個物件,都會在該物件中創建一個新的方法,這樣十分損耗性能，
解決方法：
1.將函式定義到建構式外面,這樣每個實體物件中的方法都是同一個方法，
1 function Person(name, age, job) {
2 this.name = name;
3 this.age = age;
4 this.job = job;
5 this.sayName = sayName；
6 }
7 function sayName() {
8 console.log(this.name);
9 }
10 console.log(person3.sayName === person4.sayName); //true 說明兩個實體物件中的方法是同一個
但這樣也有一個缺點：污染命名空間,比如一個建構式有好多方法,就要定義好多變數,代碼多了就
有可能出現重名的情況，
2.使用原型模式
四、原型模式
每個函式都有一個prototype(原型)屬性,該屬性是一個指標,指向一個物件,而這個物件的用途是包含由構造
函式創建的所有實體物件共享的屬性和方法，
優點：
可以讓所有實體物件共享它所包含的屬性和方法，換句話說,不必在建構式中定義實體物件的資訊,可以將
這些資訊直接添加到原型物件中,這樣每個實體物件就能共用一個函式了,并且也不會污染命名空間，
1 function Person() {
2 }
3
4 Person.prototype.name = '鴿子1';
5 Person.prototype.age = 22;
6 Person.prototype.job = 'programmer';
7 Person.prototype.sayName = function () {
8 console.log(this.name); //鴿子1
9 };
10 let person5 = new Person();
11 let person6 = new Person();
12 person5.sayName();
13 person6.sayName();
14 console.log(person5.sayName === person6.sayName); //true
4.1 原型物件
在創建函式的時候,系統會為該函式創建一個prototype指標,這個指標指向的物件被稱為原型物件，
每個原型物件中都有一個constructor(建構式)屬性,該屬性也是一個指標,指向其對應的建構式，
每個實體物件中有兩個指標: constructor(指向其建構式) __proto__(指向其建構式的原型物件)
1 console.log(person5.__proto__ === Person.prototype); //true
2 console.log(person5.constructor === Person); //true
兩個方法：
A.prototype.isProtypeof(B)
判斷實體物件B中是否存在一個指標,指向建構式A的原型物件,是回傳true,否回傳false,
因為實體物件中有一個指標指向其建構式的原型物件,所以我們可以間接的判斷B是不是A的實體物件，
Object.getPrototypeOf(obj) 回傳實體物件的原型物件
1 console.log(Person.prototype.isPrototypeOf(person5));//true
2 console.log(Object.getPrototypeOf(person5) === Person.prototype); //true
3 console.log(Object.getPrototypeOf(person5).name); //鴿子1
代碼讀取實體物件屬性的程序：
每當代碼讀取某個物件的某個屬性時,都會先在實體物件中查找該屬性,如果查找到,則回傳該屬性的值；如果沒找到,
則去往該物件的原型物件中查找,如果找到了,則回傳該屬性的值，也就是說,在我們通過person5呼叫sayName方法
時,會先后執行兩次搜索,第一次是在person5物件中,第二次是在person5的原型物件中，當我們通過person6呼叫
sayName方法時,會重現相同的搜索程序,這正是多個實體物件共享原型物件中保存的屬性和方法的基本原理，
注意：
雖然可以通過實體物件訪問其原型物件中的值,但是卻不能通過實體物件重寫原型中的值，如果我們在實體物件中添
加一個屬性,并且該屬性與實體物件的原型中的一個屬性同名,那么該屬性就會將原型中的同名屬性屏蔽,換句話說,
添加這個屬性只會阻止我們訪問原型中的那個屬性,而不會修改那個屬性,因為代碼讀取物件屬性的時候,首先會在
該物件中查找,查找到就不再搜索其原型中的屬性了，
1 console.log(person5.name);// 鴿子1 name來自原型物件
2 person5.name = '兔子'; //將原型中的name屬性屏蔽
3 console.log(person5.name);// 兔子 name來自實體物件
in 運算子
語法: 'name' in obj
判斷是否可以通過物件obj訪問到name屬性,可以則回傳true,否則回傳false,無論是該屬性存在于實體中還是
原型中，
hasOwnProperty()方法
語法：obj.hasOwnProperty('name')
判斷物件obj【自身中】是否含有name屬性,有則回傳true,無則回傳false
該方法用于檢測某屬性是存在于實體物件中還是原型物件中,只有給定屬性存在于實體物件中,才會回傳true，
1 console.log('name' in person6);//true
2 console.log(person5.hasOwnProperty('name'));//true
3 console.log(person6.hasOwnProperty('name'));//false
4 //創建一個函式判斷一個屬性到底是存在于物件中,還是存在于其原型中
5 function hasPrototypeProperty(object, name) {
6 return !object.hasOwnProperty(name) && name in object;//回傳false則表示存在于物件中,回傳true表示存在于原型中
7 }
8
9 hasPrototypeProperty(person5, 'name');//false
4.2.更簡單的原型語法
上面例子中,每給原型物件添加一個屬性或方法就要敲一遍Person.prototype，
為減少代碼量,也為了從視覺上更好地封裝原型的功能,更常見的做法是用一個包含所有屬性和方法的字面量對
象來重寫整個原型物件，
1 function Person() {
2
3 }
4
5 Person.prototype = {
6 name: '鴿子1',
7 age: 22,
8 job: 'programmer',
9 sayName: function () {
10 console.log(this.name);
11 },
12 };
13 console.log(Person.prototype.constructor === Person);//false
注意：
上面的代碼中,我們將Person.prototype指向一個新的物件,雖然結果相同,但有一個例外：
該原型物件的constructor屬性不再指向Person了,而是指向Object，
這是因為每創建一個函式,都會生成一個prototype屬性指向它的原型物件,并且該原型物件有一個constructor
屬性指向這個函式,然而,Person.prototype = {},本質上是將prototype屬性指向一個新的物件,而這個新對
象的建構式是Object，
如果constructor的值真的很重要,我們可以手動改回來
1 Person.prototype = {
2 constructor: Person,//手動更改原型物件中的constructor指向
3 name: '鴿子1',
4 age: 22,
5 job: 'programmer',
6 sayName: function () {
7 console.log(this.name);
8 },
9 };
10 console.log(Person.prototype.constructor === Person);//true
4.3 原型的動態性
因為在原型中查找值的程序是一次搜索,因此我們對原型物件的任何修改都能夠立即從實體上反映出來,即使是先創
建了實體后修改原型也是如此，
就像下邊的例子：
雖然friend實體是在新方法之前創建的,但是它仍能訪問到這個新方法,其原因可以歸結為實體與原型之間的
松散連接關系，當我們呼叫friend.sayHello()方法時,首先會在friend物件中搜索sayHello屬性,在沒
找到的情況下,會繼續搜索原型，
1 let friend = new Person();
2 Person.prototype.sayHello = function () {
3 console.log('hello');
4 };
5 friend.sayHello();//hello
注意：
盡管可以隨時為原型添加屬性和方法,并且修改能夠立即在物件實體中反映出來,但是如果重寫整個原型物件,那么
情況就不一樣了，
因為呼叫建構式時會為實體添加一個指向最初原型的指標__proto__,而把原型修改為另一個物件就等于切斷了
建構式與原型之間的聯系，
1 function Person() {
2 }
3
4 let person7 = new Person();
5 Person.prototype = {
6 constructor: Person,
7 gugugu: '鴿子',
8 };
9 console.log(person7.gugugu);//undefined
10 console.log(person7.__proto__ === Person.prototype);//false
原型模式的缺點：
1.我們通過上面的例子可以發現,它省略了為建構式傳遞初始化引數這一環節,結果所有實體物件在默認情況下都
將取得相同的屬性值，
2.原型模式最大的問題是由原型物件共享的特性所導致的，
原型中所有屬性是被多個實體所共享的,這種共享對于函式非常適合,對于那些包含基本資料型別值的屬性倒也說的
過去,畢竟,通過在實體上添加一個同名屬性,就可以隱藏原型中對應的屬性，然而,對于包含參考型別值的屬性來說,
這個問題就比較突出了，
1 function Animal() {
2
3 }
4
5 Animal.prototype = {
6 constructor: Animal,
7 name: '鴿子',
8 friends: ['貓咪', '大黃', '二哈'],
9 };
10 let animal1 = new Animal();
11 let animal2 = new Animal();
12 animal1.friends.push('小白');
13 console.log(animal1.friends);//['貓咪', '大黃', '二哈','小白']
14 console.log(animal2.friends);//['貓咪', '大黃', '二哈','小白']
15 console.log(animal1.friends === animal2.friends);//true
從上面的代碼中,我們就能看出問題：
當我們修改了animal1.friends參考的陣列,向該陣列中添加了一個字串'小白'，由于friends陣列存在于
Animal.prototype而非animal1中,所以剛才的修改也會通過animal2.friends(因為animal1.friends
和animal2.friends指向同一個陣列)反映出來，
假如我們的初衷就是像這樣所有實體共享一個陣列,那沒什么問題,但是實體一般都是要有屬于自己的全部屬性的,
所以很少有人會單獨使用原型模式，
解決方法：組合使用建構式模式和原型模式
五、組合使用建構式模式和原型模式
創建自定義型別的最常見的方式,就是組合使用建構式模式和原型模式,建構式模式用于定義每個實體獨立的屬
性,而原型模式用于定義方法和共享的屬性，
優點：
1.每個實體都會有自己的一份實體屬性副本,但同時又能共享者對方法的參考,最大限度地節省了記憶體；
2.支持向建構式傳遞引數
1 function Animal(name, age, job) {
2 this.name = name;
3 this.age = age;
4 this.job = job;
5 this.friends = ['貓咪', '大黃', '二哈'];
6 }
7
8 Animal.prototype.sayName = function () {
9 console.log(this.name);
10 };
11 let animal3 = new Animal('鴿子', 3, 'gugugu');
12 let animal4 = new Animal('大白鵝', 2, 'gugugu');
13 animal3.sayName();
14 animal4.sayName();
15 animal3.friends.push('小白');
16 console.log(animal3.friends);//['貓咪', '大黃', '二哈','小白']
17 console.log(animal4.friends);//['貓咪', '大黃', '二哈']
18 console.log(animal3.friends === animal4.friends);//false
作者：我和鴿子有個約會
出處：http://www.cnblogs.com/gugugu/
本文著作權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段宣告,且在文章頁面明顯位置給出原文連接,否則保留追究法律責任的權利，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/99343.html
標籤：JavaScript
上一篇：CSS實作迷你鍵盤
下一篇：JS——簡介