JS是沒有類的，但JS可以利用構(gòu)造函數(shù)實現(xiàn)近似類的功能。
構(gòu)造函數(shù)
構(gòu)造函數(shù)，是用來創(chuàng)建對象的函數(shù)。與普通的函數(shù)聲明的區(qū)別是，約定函數(shù)名首字母大寫，還有就是調(diào)用時要使用new關(guān)鍵字，如果不使用new調(diào)用就跟普通函數(shù)一樣。
new關(guān)鍵字創(chuàng)建對象過程：
- 創(chuàng)建一個新的空對象；
- 設(shè)置新對象的constructor屬性為構(gòu)造函數(shù)的名稱，設(shè)置新對象的proto屬性指向構(gòu)造函數(shù)的prototype對象；
- 將構(gòu)造函數(shù)的作用域賦給新對象，this將指向這個新對象；
- 執(zhí)行構(gòu)造函數(shù)中的代碼（為新對象添加屬性）并返回新對象；
JS一般使用構(gòu)造函數(shù)和原型配合實現(xiàn)類的功能：
function F(val) { // 構(gòu)造函數(shù)也是函數(shù)，所以可以傳遞參數(shù)
// 檢測函數(shù)的調(diào)用方式，確保構(gòu)造函數(shù)以new操作符形式調(diào)用
if (!(this instanceof F)) {
return new F(val);
}
// 構(gòu)造函數(shù)中定義實例特有的屬性和方法
this.a = val;
this.arr = [];
}
// 原型中定義實例對象共享的屬性和方法
F.prototype.array = [];
F.prototype.sayA = function () {
console.log(this.a);
};
F.prototype.sayArr = function () {
console.log(this.arr);
};
F.prototype.sayArray = function () {
console.log(this.array);
};
// 創(chuàng)建實例對象
var f1 = new F(1);
var f2 = new F(2);
f1.arr.push(1); // 實例屬性被更改后，實例對象不會共享
f1.sayArr(); // [1]
f2.sayArr(); // []
f1.array.push(1); // 原型屬性被更改后，實例對象會共享
f1.sayArray(); // [1]
f2.sayArray(); // [1]
類的繼承
類有一個很重要的特征，就是類可以繼承，在JS中通過原型鏈實現(xiàn)繼承。
在JS中，是通過 原型鏈 來實現(xiàn)繼承。
-
原型鏈繼承，缺點是繼承的屬性和方法會被所有實例共享；
function SuperColor() { this.colors = ['red', 'blue', 'green']; } SuperColor.prototype.sayColor = function () { console.log(this.colors); } function SubColor() { } SubColor.prototype = new SuperColor(); // SuperColor生成的實例作為SubColor的原型屬性，這樣SuperColor的屬性會被共享 var color1 = new SubColor(); var color2 = new SubColor(); color1.colors.push('black'); color1.sayColor(); // ['red', 'blue', 'green', 'black'] color2.sayColor(); // ['red', 'blue', 'green', 'black'] -
原型式繼承，跟原型鏈繼承特點一樣，但它是創(chuàng)建一個在原型上繼承了傳入對象的空對象；
// object會創(chuàng)建一個空對象，空對象的原型會繼承傳入?yún)?shù)o的屬性和方法 function object(o) { function F() {}; F.prototype = o; return new F(); } var obj = { a: 1 }; var a = object(obj); a.a // 1 // 然后可以給新建的對象添加實例屬性或方法 a.b = 2; a.b // 2ES5通過Object.create()方法規(guī)范了原型式繼承，Object.create()，接收兩個參數(shù)一個用作新對象原型的對象（必須）和一個為新對象定義額外屬性的對象（可選，作為實例屬性）（寫法同Object.defineProperties()方法一致）。
// Object.create()方法傳入一個參數(shù)時與上面的object()方法一樣 var obj = { a: 1 }; var a = Object.create(obj); a.a // 1 // 然后可以給新建的對象添加實例屬性或方法 a.b = 2; a.b // 2 var b = Object.create(obj, { // 第二個參數(shù)的會作為實例屬性 a: { value: 3 } }); b.a // 3，第二個參數(shù)定義實例屬性的會屏蔽掉第一個參數(shù)原型繼承的Object.create()方法可以創(chuàng)建一個不繼承原型屬性的空對象，
Object.create(null) -
寄生式繼承，在原型式繼承的基礎(chǔ)再上封裝一個函數(shù)，并在函數(shù)內(nèi)部增強對象，缺點是不能做到函數(shù)復(fù)用；
// 模板類似下面： function parasiticObject(o) { var obj = object(o); // 下面寫要給對象添加的實例方法和屬性 return obj; } var obj = { a: 1 }; var a = function (obj) { var o = object(obj); o.b = 2; // 這個會成為實例屬性 } a.a // 1 a.b // 2 -
借用構(gòu)造函數(shù)繼承，利用call、apply繼承，缺點是不能繼承父類原型中的屬性和方法；
function SuperColor() { this.colors = ['red', 'blue', 'green']; } SuperColor.prototype.sayColor = function () { console.log(this.colors); } function SubColor() { // 利用call、apply將父類的屬性和方法傳給子類，這樣缺點是不會繼承父類的原型屬性和方法 SuperColor.call(this); // 實例之間不會共享數(shù)據(jù)，之間都是獨立的，還有個好處是可以傳遞參數(shù) } var color1 = new SuperColor(); var color2 = new SubColor(); var color3 = new SubColor(); color2.colors.push('black'); color1.sayColor(); // ['red', 'blue', 'green', 'black'] color2.sayColor(); // TypeError: color2.sayColor is not a function，父類原型上的方法沒有繼承 // 子類繼承父類的實例屬性且不會共享 color2.colors // ['red', 'blue', 'green', 'black'] color3.colors // ['red', 'blue', 'green'] -
組合式繼承，利用原型鏈繼承和借用構(gòu)造函數(shù)函數(shù)繼承，讓兩者相互補充，既能繼承實例也能共享原型，缺點是無論什么情況都會調(diào)用兩次父類的構(gòu)造函數(shù)，父類的實例屬性和方法會被創(chuàng)建兩次，子類的實例和原型都會有父類的實例屬性和方法，只是實例中的屬性和方法會屏蔽掉原型中同名的屬性和方法；
function SuperColor() { this.colors = ['red', 'blue', 'green']; } SuperColor.prototype.sayColor = function () { console.log(this.colors); } function SubColor() { SuperColor.call(this); // 第二次調(diào)用父類作為子類的實例對象，并屏蔽掉原型中的同名屬性或方法 } SubColor.prototype = new SuperColor(); // 第一次調(diào)用父類創(chuàng)建實例對象作為子類的原型 var color1 = new SubColor(); var color2 = new SubColor(); color1.colors.push('black'); color1.sayColor(); // ['red', 'blue', 'green', 'black'] color2.sayColor(); // ['red', 'blue', 'green'] -
寄生組合式繼承，通過借用構(gòu)造函數(shù)來繼承屬性，通過原型鏈的混成形式來繼承方法；
function SuperColor() { this.colors = ['red', 'blue', 'green']; } SuperColor.prototype.sayColor = function () { console.log(this.colors); } function SubColor() { SuperColor.call(this); // 只調(diào)用一次父類的構(gòu)造函數(shù) } SubColor.prototype = Object.create(SuperColor.prototype); // 通過原型式繼承將要繼承的對象賦值給子類原型 var color1 = new SubColor(); var color2 = new SubColor(); color1.colors.push('black'); color1.sayColor(); // ['red', 'blue', 'green', 'black'] color2.sayColor(); // ['red', 'blue', 'green']
