經(jīng)典模式和圣杯模式區(qū)別

經(jīng)典模式和圣杯模式都是用于解決構(gòu)造函數(shù)繼承和原型繼承的問(wèn)題，但它們?cè)趯?shí)現(xiàn)繼承的方式上有所不同。

經(jīng)典模式是通過(guò)將子類(lèi)的原型對(duì)象設(shè)置為父類(lèi)的實(shí)例來(lái)實(shí)現(xiàn)繼承，然后將子類(lèi)的構(gòu)造函數(shù)設(shè)置為子類(lèi)本身。這樣子類(lèi)既可以繼承父類(lèi)的屬性，也可以繼承父類(lèi)原型對(duì)象的方法。但是經(jīng)典模式存在一個(gè)問(wèn)題，就是每次創(chuàng)建子類(lèi)的實(shí)例時(shí)都會(huì)調(diào)用一次父類(lèi)的構(gòu)造函數(shù)，導(dǎo)致父類(lèi)的屬性被重復(fù)初始化。

圣杯模式是在經(jīng)典模式的基礎(chǔ)上進(jìn)行了改進(jìn)，通過(guò)使用一個(gè)中間函數(shù)來(lái)實(shí)現(xiàn)繼承。這個(gè)中間函數(shù)將父類(lèi)的原型對(duì)象賦值給一個(gè)臨時(shí)的構(gòu)造函數(shù)，并將子類(lèi)的原型對(duì)象設(shè)置為這個(gè)臨時(shí)構(gòu)造函數(shù)的實(shí)例。這樣子類(lèi)既可以繼承父類(lèi)原型對(duì)象的方法，又不會(huì)重復(fù)調(diào)用父類(lèi)的構(gòu)造函數(shù)。此外，圣杯模式還通過(guò)將子類(lèi)的原型對(duì)象的constructor屬性設(shè)置為子類(lèi)本身來(lái)修復(fù)原型鏈斷裂的問(wèn)題。

下面是經(jīng)典模式和圣杯模式的代碼示例：

經(jīng)典模式：

function Parent(name) {this.name = name;
}Parent.prototype.sayHello = function() {console.log('Hello, I am ' + this.name);
}function Child(name) {Parent.call(this, name);
}Child.prototype = new Parent();
Child.prototype.constructor = Child;

圣杯模式：

function Parent(name) {this.name = name;
}Parent.prototype.sayHello = function() {console.log('Hello, I am ' + this.name);
}function inherit(C, P) {function F() {}F.prototype = P.prototype;C.prototype = new F();C.prototype.constructor = C;
}function Child(name) {Parent.call(this, name);
}inherit(Child, Parent);

經(jīng)典模式和圣杯模式都是用于實(shí)現(xiàn)繼承的方式，但圣杯模式在解決經(jīng)典模式中的問(wèn)題上更加優(yōu)化和完善。

圣杯模式

1. 原型：

原型是JavaScript中用來(lái)實(shí)現(xiàn)對(duì)象之間繼承關(guān)系的概念。每個(gè)JavaScript對(duì)象都有一個(gè)原型對(duì)象，它是一個(gè)普通的對(duì)象，包含了對(duì)象的屬性和方法。當(dāng)我們?cè)L問(wèn)一個(gè)對(duì)象的屬性或方法時(shí)，如果對(duì)象本身不存在該屬性或方法，JavaScript會(huì)自動(dòng)去原型對(duì)象中查找。

2. 原型鏈：

原型鏈?zhǔn)且环N通過(guò)原型對(duì)象來(lái)實(shí)現(xiàn)對(duì)象之間繼承關(guān)系的機(jī)制。每個(gè)對(duì)象都有一個(gè)原型對(duì)象，通過(guò)原型鏈，一個(gè)對(duì)象可以訪問(wèn)其原型對(duì)象的屬性和方法。原型鏈?zhǔn)怯梢幌盗性蛯?duì)象組成的，當(dāng)我們?cè)L問(wèn)一個(gè)對(duì)象的屬性或方法時(shí)，JavaScript會(huì)自動(dòng)沿著原型鏈向上查找，直到找到該屬性或方法或者到達(dá)原型鏈的頂端。

3. 繼承：

繼承是一種面向?qū)ο缶幊讨械闹匾拍?#xff0c;它允許我們創(chuàng)建一個(gè)新的對(duì)象，并從一個(gè)已有的對(duì)象中繼承屬性和方法。通過(guò)繼承，我們可以避免重復(fù)編寫(xiě)相同的代碼，提高代碼的復(fù)用性和可維護(hù)性。

相應(yīng)的代碼示例：

a. 原型鏈繼承：

原型鏈繼承是一種簡(jiǎn)單的繼承方式，它通過(guò)將子類(lèi)的原型對(duì)象設(shè)置為父類(lèi)的實(shí)例來(lái)實(shí)現(xiàn)繼承。這樣子類(lèi)就可以訪問(wèn)父類(lèi)原型對(duì)象的屬性和方法。

function Parent() {this.name = 'Parent';
}Parent.prototype.sayHello = function() {console.log('Hello, I am ' + this.name);
}function Child() {this.name = 'Child';
}Child.prototype = new Parent();var child = new Child();
child.sayHello(); // 輸出: Hello, I am Child

在這個(gè)例子中，我們定義了一個(gè)父類(lèi)Parent和一個(gè)子類(lèi)Child。在子類(lèi)中，我們將其原型對(duì)象設(shè)置為父類(lèi)的實(shí)例，這樣子類(lèi)就可以繼承父類(lèi)的屬性和方法。在子類(lèi)的實(shí)例中，我們可以調(diào)用父類(lèi)原型對(duì)象的方法。

b. 構(gòu)造函數(shù)繼承：

構(gòu)造函數(shù)繼承是一種通過(guò)調(diào)用父類(lèi)的構(gòu)造函數(shù)來(lái)實(shí)現(xiàn)繼承的方式。子類(lèi)通過(guò)調(diào)用父類(lèi)的構(gòu)造函數(shù)來(lái)繼承父類(lèi)的屬性，并在子類(lèi)的構(gòu)造函數(shù)中使用call方法來(lái)調(diào)用父類(lèi)的構(gòu)造函數(shù)。

function Parent(name) {this.name = name;
}function Child(name) {Parent.call(this, name);
}var child = new Child('Child');
console.log(child.name); // 輸出: Child

在這個(gè)例子中，我們定義了一個(gè)父類(lèi)Parent和一個(gè)子類(lèi)Child。在子類(lèi)的構(gòu)造函數(shù)中，我們使用call方法調(diào)用父類(lèi)的構(gòu)造函數(shù)，并將子類(lèi)的實(shí)例作為this參數(shù)傳遞給父類(lèi)的構(gòu)造函數(shù)。這樣子類(lèi)就可以繼承父類(lèi)的屬性。

c. 組合繼承：

組合繼承是一種通過(guò)同時(shí)使用原型鏈繼承和構(gòu)造函數(shù)繼承來(lái)實(shí)現(xiàn)繼承的方式。它通過(guò)將子類(lèi)的原型對(duì)象設(shè)置為父類(lèi)的實(shí)例，并在子類(lèi)的構(gòu)造函數(shù)中調(diào)用父類(lèi)的構(gòu)造函數(shù)來(lái)實(shí)現(xiàn)繼承。

function Parent(name) {this.name = name;
}Parent.prototype.sayHello = function() {console.log('Hello, I am ' + this.name);
}function Child(name) {Parent.call(this, name);
}Child.prototype = new Parent();
Child.prototype.constructor = Child;var child = new Child('Child');
child.sayHello(); // 輸出: Hello, I am Child

在這個(gè)例子中，我們定義了一個(gè)父類(lèi)Parent和一個(gè)子類(lèi)Child。在子類(lèi)的構(gòu)造函數(shù)中，我們使用call方法調(diào)用父類(lèi)的構(gòu)造函數(shù)，并將子類(lèi)的實(shí)例作為this參數(shù)傳遞給父類(lèi)的構(gòu)造函數(shù)。然后，我們將子類(lèi)的原型對(duì)象設(shè)置為父類(lèi)的實(shí)例，并將子類(lèi)的構(gòu)造函數(shù)設(shè)置為子類(lèi)本身。這樣子類(lèi)既可以繼承父類(lèi)的屬性，也可以繼承父類(lèi)原型對(duì)象的方法。

詳細(xì)代碼說(shuō)明

a. 原型鏈繼承：

function Parent() {this.name = 'Parent';
}Parent.prototype.sayHello = function() {console.log('Hello, I am ' + this.name);
}function Child() {this.name = 'Child';
}Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;var child = new Child();
child.sayHello(); // 輸出: Hello, I am Child

在這個(gè)例子中，我們使用Object.create()方法將子類(lèi)的原型對(duì)象設(shè)置為父類(lèi)的原型對(duì)象的一個(gè)副本。這樣子類(lèi)就可以繼承父類(lèi)原型對(duì)象的屬性和方法。

b. 構(gòu)造函數(shù)繼承：

function Parent(name) {this.name = name;
}Parent.prototype.sayHello = function() {console.log('Hello, I am ' + this.name);
}function Child(name) {Parent.call(this, name);
}var child = new Child('Child');
child.sayHello(); // 輸出: TypeError: child.sayHello is not a function

在這個(gè)例子中，我們通過(guò)調(diào)用父類(lèi)的構(gòu)造函數(shù)來(lái)繼承父類(lèi)的屬性，但是子類(lèi)無(wú)法繼承父類(lèi)原型對(duì)象的方法。

c. 組合繼承：

function Parent(name) {this.name = name;
}Parent.prototype.sayHello = function() {console.log('Hello, I am ' + this.name);
}function Child(name) {Parent.call(this, name);
}Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;var child = new Child('Child');
child.sayHello(); // 輸出: Hello, I am Child

在這個(gè)例子中，我們使用Object.create()方法將子類(lèi)的原型對(duì)象設(shè)置為父類(lèi)的原型對(duì)象的一個(gè)副本，并將子類(lèi)的構(gòu)造函數(shù)設(shè)置為子類(lèi)本身。這樣子類(lèi)既可以繼承父類(lèi)的屬性，也可以繼承父類(lèi)原型對(duì)象的方法。