> ## **構造函數** ### **原型導讀** ECMAScript中的構造函數可用來創建特定類型的對象。像 Object 和 Array 這樣的原生構造函數，在運行時會自動出現在執行環境中。此外，也可以創建自定義的構造函數，從而定義自定義對象類型的屬性和方法。例如： ~~~ function Person(name, age) { this.name = name; this.age = age; this.sayName = function () { alert(this.name); }; } var person1 = new Person("小四", 24); var person2 = new Person("王云飛", 27); ~~~ - 按照慣例，構造函數始終都應該以一個 大寫字母開頭，而非構造函數則應該以一個小寫字母開頭。主要是為了 區別于 ECMAScript中的其他函數；因為構造函數本身也是函數，只不過可以用來創建對象而已 - 當new去調用一個函數：這個時候函數中的this就是創建出來的對象，而且函數返回值直接就是this（隱式返回） - new 后面調用的函數：叫做構造函數 - person1 和 person2 分別保存著 Person 的一個不同的實例。這兩個對象都 有一個 constructor（構造函數）屬性，該屬性指向 Person，如下所示： ~~~ console.log(person1.constructor === Person); //true console.log(person2.constructor === Person); //true ~~~ ### **將構造函數當作函數** 構造函數與其他函數的唯一區別，就在于調用它們的方式不同。不過，構造函數畢竟也是函數，不 存在定義構造函數的特殊語法。任何函數，只要通過 new 操作符來調用，那它就可以作為構造函數；而 任何函數，如果不通過 new 操作符來調用，那它跟普通函數也不會有什么兩樣。例如，前面例子中定義 的 Person()函數可以通過下列任何一種方式來調用，如下所示： ~~~ // 當作構造函數使用 var person = new Person("小四", 24); person.sayName(); //"小四" // 作為普通函數調用 Person("王云飛", 24); // 添加到window sayName(); //"王云飛" ~~~ ### **構造函數的問題** ~~~ function Person(name, age, job) { this.name = name; this.age = age; this.job = job; this.sayName = function() { alert(this.name) } } var person1 = new Person("小四", 24); var person2 = new Person("王云飛", 27); person1.sayName() person2.sayName() console.log(person1.sayName === person2.sayName); // false ~~~ 構造函數模式雖然好用，但也并非沒有缺點。使用構造函數的主要問題，就是每個方法都要在每個 實例上重新創建一遍。在前面的例子中，person1 和 person2 都有一個名為 sayName()的方法，但那 兩個方法不是同一個 Function 的實例。不要忘了——ECMAScript中的函數是對象，因此每定義一個 函數，也就是實例化了一個對象。 #### **原因就是對象引用類型的問題，看例子** ``` // 對象 var a = [1,2,3]; var b = [1,2,3]; console.log(a == b); // false //基本類型：賦值的時候只是值得復制 var a = 5; var b = a; b+=3; console.log(b); // 8 console.log(a); // 5 //對象：賦值不僅是值得復制，而且也是引用的傳遞 var a = [1,2,3]; var b = a; b.push(4); console.log(b); // (4) [1, 2, 3, 4] console.log(a); // (4) [1, 2, 3, 4] // 只要在程序當中出現賦值，那必然要在內存中重新生成 var a = [1,2,3]; var b = a; b = [1,2,3,4]; console.log(b); // (4) [1, 2, 3, 4] console.log(a); // (3) [1, 2, 3] // 對象類型比較：值和引用都相同才行 var a = [1,2,3]; var b = [1,2,3]; console.log(a == b); // false // 把值和引用都給了b，所以結果是true var a = [1,2,3\]; var b = a; console.log(a \== b); // true // 總結：構造函數的問題：每new一次就生成一份，如果要是有上百上千份極大的浪費內存 ``` #### **然而，創建兩個完成同樣任務的 Function 實例的確沒有必要，因此，大可像下面這樣，通過把函數定義轉移到構造函數外 部來解決這個問題。** ~~~ function Person(name, age) { this.name = name; this.age = age; this.sayName = sayName; // 與聲明函數在邏輯上是等價的 } function sayName(){ console.log(this.name); } var person1 = new Person("小四", 24); var person2 = new Person("王云飛", 27); person1.sayName() // 小四 person2.sayName() // 王云飛 console.log(person1.sayName === person2.sayName); // true ~~~ > 在這個例子中，我們把 sayName()函數的定義轉移到了構造函數外部。而在構造函數內部，我們 將 sayName 屬性設置成等于全局的 sayName 函數。這樣一來，由于 sayName 包含的是一個指向函數 的指針，因此 person1 和 person2 對象就共享了在全局作用域中定義的同一個 sayName()函數。這 樣做確實解決了兩個函數做同一件事的問題，可是新問題又來了：在全局作用域中定義的函數實際上只 能被某個對象調用，這讓全局作用域有點名不副實。而更讓人無法接受的是：如果對象需要定義很多方 法，那么就要定義很多個全局函數，于是我們這個自定義的引用類型就絲毫沒有封裝性可言了。好在， 這些問題可以通過使用原型模式來解決。