JS是沒有類的，但JS可以利用構(gòu)造函數(shù)實(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ù)和原型配合實(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ù)中定義實(shí)例特有的屬性和方法
this.a = val;
this.arr = [];
}
// 原型中定義實(shí)例對象共享的屬性和方法
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)建實(shí)例對象
var f1 = new F(1);
var f2 = new F(2);
f1.arr.push(1); // 實(shí)例屬性被更改后啼县，實(shí)例對象不會共享
f1.sayArr(); // [1]
f2.sayArr(); // []
f1.array.push(1); // 原型屬性被更改后材原，實(shí)例對象會共享
f1.sayArray(); // [1]
f2.sayArray(); // [1]
類的繼承
類有一個很重要的特征，就是類可以繼承季眷，在JS中通過原型鏈實(shí)現(xiàn)繼承余蟹。
在JS中，是通過 原型鏈 來實(shí)現(xiàn)繼承子刮。
-
原型鏈繼承威酒，缺點(diǎn)是繼承的屬性和方法會被所有實(shí)例共享；
function SuperColor() { this.colors = ['red', 'blue', 'green']; } SuperColor.prototype.sayColor = function () { console.log(this.colors); } function SubColor() { } SubColor.prototype = new SuperColor(); // SuperColor生成的實(shí)例作為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'] -
原型式繼承葵孤，跟原型鏈繼承特點(diǎn)一樣，但它是創(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 // 然后可以給新建的對象添加實(shí)例屬性或方法 a.b = 2; a.b // 2ES5通過Object.create()方法規(guī)范了原型式繼承，Object.create()狭姨，接收兩個參數(shù)一個用作新對象原型的對象（必須）和一個為新對象定義額外屬性的對象（可選宰啦，作為實(shí)例屬性）（寫法同Object.defineProperties()方法一致）苏遥。
// Object.create()方法傳入一個參數(shù)時與上面的object()方法一樣 var obj = { a: 1 }; var a = Object.create(obj); a.a // 1 // 然后可以給新建的對象添加實(shí)例屬性或方法 a.b = 2; a.b // 2 var b = Object.create(obj, { // 第二個參數(shù)的會作為實(shí)例屬性 a: { value: 3 } }); b.a // 3，第二個參數(shù)定義實(shí)例屬性的會屏蔽掉第一個參數(shù)原型繼承的Object.create()方法可以創(chuàng)建一個不繼承原型屬性的空對象赡模，
Object.create(null) -
寄生式繼承田炭，在原型式繼承的基礎(chǔ)再上封裝一個函數(shù)，并在函數(shù)內(nèi)部增強(qiáng)對象纺裁，缺點(diǎn)是不能做到函數(shù)復(fù)用诫肠；
// 模板類似下面： function parasiticObject(o) { var obj = object(o); // 下面寫要給對象添加的實(shí)例方法和屬性 return obj; } var obj = { a: 1 }; var a = function (obj) { var o = object(obj); o.b = 2; // 這個會成為實(shí)例屬性 } a.a // 1 a.b // 2 -
借用構(gòu)造函數(shù)繼承，利用call欺缘、apply繼承栋豫，缺點(diǎn)是不能繼承父類原型中的屬性和方法；
function SuperColor() { this.colors = ['red', 'blue', 'green']; } SuperColor.prototype.sayColor = function () { console.log(this.colors); } function SubColor() { // 利用call谚殊、apply將父類的屬性和方法傳給子類丧鸯，這樣缺點(diǎn)是不會繼承父類的原型屬性和方法 SuperColor.call(this); // 實(shí)例之間不會共享數(shù)據(jù)，之間都是獨(dú)立的嫩絮，還有個好處是可以傳遞參數(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丛肢，父類原型上的方法沒有繼承 // 子類繼承父類的實(shí)例屬性且不會共享 color2.colors // ['red', 'blue', 'green', 'black'] color3.colors // ['red', 'blue', 'green'] -
組合式繼承，利用原型鏈繼承和借用構(gòu)造函數(shù)函數(shù)繼承剿干，讓兩者相互補(bǔ)充蜂怎，既能繼承實(shí)例也能共享原型，缺點(diǎn)是無論什么情況都會調(diào)用兩次父類的構(gòu)造函數(shù)置尔，父類的實(shí)例屬性和方法會被創(chuàng)建兩次杠步，子類的實(shí)例和原型都會有父類的實(shí)例屬性和方法，只是實(shí)例中的屬性和方法會屏蔽掉原型中同名的屬性和方法榜轿；
function SuperColor() { this.colors = ['red', 'blue', 'green']; } SuperColor.prototype.sayColor = function () { console.log(this.colors); } function SubColor() { SuperColor.call(this); // 第二次調(diào)用父類作為子類的實(shí)例對象幽歼，并屏蔽掉原型中的同名屬性或方法 } SubColor.prototype = new SuperColor(); // 第一次調(diào)用父類創(chuàng)建實(shí)例對象作為子類的原型 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']
