1、前言
原型模式是指的將原型對(duì)象指向創(chuàng)建對(duì)象的類，使得不同的類共享原型對(duì)象的方法和屬性蕉鸳。
js中基于原型鏈的繼承的原理本質(zhì)上就是對(duì)繼承過(guò)來(lái)的類的屬性和方法的共享，并不是對(duì)屬性和方法的拷貝忍法。
-
示例1：創(chuàng)建輪播類
在LoopImg這個(gè)類中定義輪播的相關(guān)屬性和方法潮尝，輪播圖的輪播方式有很多種，比如：左右滑動(dòng)饿序，3D翻轉(zhuǎn)等等勉失。因此，后面定義這兩個(gè)類使用call()方法將屬性執(zhí)行父類的構(gòu)造函數(shù)原探，然后在內(nèi)部修改switchImg切換的方法乱凿。
// 創(chuàng)建一個(gè)輪播圖
const LoopImg = function(arrImg, container){
this.arrImg = arrImg;
this.container = container;
this.createImg = function() {}
this.switchImg = function() {}
}
// 創(chuàng)建一個(gè)左右滑動(dòng)效果的輪播
const SlideLoopImg = function(arrImg, container, arrow) {
LoopImg.call(this, arrImg, container);
this.arrow = arrow;
this.switchImg = function() {
console.log('left and right sliding rotation chart');
}
}
// 創(chuàng)建一個(gè)左右3D轉(zhuǎn)動(dòng)效果的輪播
const RotateLoopImg = function(arrImg, container) {
LoopImg.call(this, arrImg, container);
this.switchImg = function() {
console.log('rotation of left-right sliding effect');
}
}
const loop = new RotateLoopImg( ['1.png','2.png','3.png'], 'rotate');
loop.switchImg(); // rotation of left-right sliding effect'
-
存在的問(wèn)題以及優(yōu)化方案：
LoopImg作為基類是要被子類繼承的，如果將大量的基類的方法寫在構(gòu)造函數(shù)中咽弦，就會(huì)導(dǎo)致每次子類繼承一次基類徒蟆，就會(huì)執(zhí)行一遍基類內(nèi)部的方法，就做了大量的重復(fù)性的操作型型。
為了優(yōu)化性能段审，我們普遍將簡(jiǎn)單的一些屬性賦值操作放在基類的構(gòu)造函數(shù)中，復(fù)雜的邏輯處理放在原型對(duì)象鏈上闹蒜，這樣完成了方法共享的同時(shí)提高了性能寺枉。
// 解決方案的優(yōu)化
const LoopImg = function(arrImg, container){
this.arrImg = arrImg;
this.container = container;
}
// LoopImg類的原型上添加方法
LoopImg.prototype = {
createImg: function() {
},
switchImg: function() {
}
}
const SlideLoopImg = function(arrImg, container, arrow) {
LoopImg.call(this, arrImg, container);
this.arrow = arrow;
}
SlideLoopImg.prototype = new LoopImg();
SlideLoopImg.prototype.switchImg = function() {
console.log('Up and down sliding rotation chart');
}
const RotateLoopImg = function(arrImg, container) {
LoopImg.call(this, arrImg, container);
}
RotateLoopImg.prototype = new LoopImg();
RotateLoopImg.prototype.switchImg = function() {
console.log('Rotation of left-right sliding effect');
}
const loop = new RotateLoopImg(
['1.png','2.png','3.png'],
'rotate'
);
loop.switchImg();
